Merge pull request #69 from aaronpo97/edit-profile-dev

Edit profile dev

src/components/Account/UpdateProfileForm.tsx

@@ -0,0 +1,93 @@
+import FormError from '@/components/ui/forms/FormError';
+import FormInfo from '@/components/ui/forms/FormInfo';
+import FormLabel from '@/components/ui/forms/FormLabel';
+import FormSegment from '@/components/ui/forms/FormSegment';
+import Link from 'next/link';
+import FormTextArea from '@/components/ui/forms/FormTextArea';
+import { FC } from 'react';
+import GetUserSchema from '@/services/User/schema/GetUserSchema';
+import type {
+  UseFormHandleSubmit,
+  SubmitHandler,
+  FieldErrors,
+  UseFormRegister,
+} from 'react-hook-form';
+import { z } from 'zod';
+import UpdateProfileSchema from '../../services/User/schema/UpdateProfileSchema';
+
+type UpdateProfileSchemaT = z.infer<typeof UpdateProfileSchema>;
+
+interface UpdateProfileFormProps {
+  handleSubmit: UseFormHandleSubmit<UpdateProfileSchemaT>;
+  onSubmit: SubmitHandler<UpdateProfileSchemaT>;
+  errors: FieldErrors<UpdateProfileSchemaT>;
+  isSubmitting: boolean;
+  register: UseFormRegister<UpdateProfileSchemaT>;
+  user: z.infer<typeof GetUserSchema>;
+}
+
+const UpdateProfileForm: FC<UpdateProfileFormProps> = ({
+  handleSubmit,
+  onSubmit,
+  errors,
+  isSubmitting,
+  register,
+  user,
+}) => {
+  return (
+    <form className="form-control space-y-1" noValidate onSubmit={handleSubmit(onSubmit)}>
+      <div>
+        <FormInfo>
+          <FormLabel htmlFor="userAvatar">Avatar</FormLabel>
+          <FormError>{errors.userAvatar?.message}</FormError>
+        </FormInfo>
+        <FormSegment>
+          <input
+            disabled={isSubmitting}
+            type="file"
+            id="userAvatar"
+            className="file-input file-input-bordered w-full"
+            {...register('userAvatar')}
+            multiple={false}
+          />
+        </FormSegment>
+      </div>
+      <div>
+        <FormInfo>
+          <FormLabel htmlFor="bio">Bio</FormLabel>
+          <FormError>{errors.bio?.message}</FormError>
+        </FormInfo>
+
+        <FormSegment>
+          <FormTextArea
+            disabled={isSubmitting}
+            id="bio"
+            {...register('bio')}
+            rows={5}
+            formValidationSchema={register('bio')}
+            error={!!errors.bio}
+            placeholder="Bio"
+          />
+        </FormSegment>
+      </div>
+      <div className="mt-6 flex w-full flex-col justify-center space-y-3">
+        <Link
+          className={`btn btn-secondary rounded-xl ${isSubmitting ? 'btn-disabled' : ''}`}
+          href={`/users/${user?.id}`}
+        >
+          Cancel Changes
+        </Link>
+
+        <button
+          className="btn btn-primary w-full rounded-xl"
+          type="submit"
+          disabled={isSubmitting}
+        >
+          Save Changes
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default UpdateProfileForm;

src/components/Account/UpdateProfileLink.tsx

@@ -0,0 +1,29 @@
+import Link from 'next/link';
+import React from 'react';
+
+import { FaArrowRight } from 'react-icons/fa';
+
+const UpdateProfileLink: React.FC = () => {
+  return (
+    <div className="card mt-8">
+      <div className="card-body flex flex-col space-y-3">
+        <div className="flex w-full items-center justify-between space-x-5">
+          <div className="">
+            <h1 className="text-lg font-bold">Update Your Profile</h1>
+            <p className="text-sm">You can update your profile information here.</p>
+          </div>
+          <div>
+            <Link
+              href="/users/account/edit-profile"
+              className="btn-sk btn btn-circle btn-ghost btn-sm"
+            >
+              <FaArrowRight className="text-xl" />
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UpdateProfileLink;

src/components/BreweryIndex/BreweryCard.tsx

@@ -22,7 +22,7 @@ const BreweryCard: FC<{ brewery: z.infer<typeof BreweryPostQueryResult> }> = ({
               src={brewery.breweryImages[0].path}
               alt={brewery.name}
               width="1029"
-              height="110"
+              height="1029"
               crop="fill"
               className="h-full object-cover"
             />

src/components/UserPage/UserHeader.tsx

@@ -31,20 +31,20 @@ const UserHeader: FC<UserHeaderProps> = ({ user }) => {
 
   return (
     <header className="card items-center text-center">
-      <div className="card-body w-full items-center">
+      <div className="card-body w-full items-center justify-center">
         <div className="h-40 w-40">
           <UserAvatar user={user} />
         </div>
 
         <div>
           <h1 className="text-2xl font-bold lg:text-4xl">{user.username}</h1>
-        </div>
 
           <div className="flex space-x-3 text-lg font-bold">
             <span>{followingCount} Following</span>
             <span>{followerCount} Followers</span>
           </div>
-
+        </div>
+        <div>
           <span className="italic">
             joined{' '}
             {timeDistance && (
@@ -56,26 +56,28 @@ const UserHeader: FC<UserHeaderProps> = ({ user }) => {
               </span>
             )}
           </span>
-        <div className="w-6/12">
-          <p className="text-sm">{user.bio}</p>
         </div>
 
+        {user.bio && (
+          <div className="my-2 w-6/12">
+            <p className="text-sm">{user.bio}</p>
+          </div>
+        )}
+
+        <div className="my-2 flex items-center justify-center">
           {currentUser?.id !== user.id ? (
-          <div className="flex items-center justify-center">
             <UserFollowButton
               mutateFollowerCount={mutateFollowerCount}
               user={user}
               mutateFollowingCount={mutateFollowingCount}
             />
-          </div>
           ) : (
-          <div className="flex items-center justify-center">
+            <Link href={`/users/account/edit-profile`} className="btn btn-primary btn-sm">
-            <Link href={`/account/profile`} className="btn btn-primary">
               Edit Profile
             </Link>
-          </div>
           )}
         </div>
+      </div>
     </header>
   );
 };

src/config/nextConnect/middleware/checkIfBeerPostOwner.ts

@@ -1,31 +0,0 @@
-import { UserExtendedNextApiRequest } from '@/config/auth/types';
-import ServerError from '@/config/util/ServerError';
-import getBeerPostById from '@/services/BeerPost/getBeerPostById';
-import { NextApiResponse } from 'next';
-import { NextHandler } from 'next-connect';
-
-interface CheckIfBeerPostOwnerRequest extends UserExtendedNextApiRequest {
-  query: { id: string };
-}
-
-const checkIfBeerPostOwner = async <RequestType extends CheckIfBeerPostOwnerRequest>(
-  req: RequestType,
-  res: NextApiResponse,
-  next: NextHandler,
-) => {
-  const { id } = req.query;
-  const user = req.user!;
-  const beerPost = await getBeerPostById(id);
-
-  if (!beerPost) {
-    throw new ServerError('Beer post not found', 404);
-  }
-
-  if (beerPost.postedBy.id !== user.id) {
-    throw new ServerError('You are not authorized to edit this beer post', 403);
-  }
-
-  return next();
-};
-
-export default checkIfBeerPostOwner;

src/hooks/data-fetching/user-follows/useGetUsersFollowedByUser.ts

@@ -1,16 +1,38 @@
+/**
+ * Custom hook using SWR for fetching users followed by a specific user.
+ *
+ * @param options - The options for fetching users.
+ * @param [options.pageSize=5] - The number of users to fetch per page. Default is `5`
+ * @param options.userId - The ID of the user.
+ * @returns An object with the following properties:
+ *
+ *   - `following` The list of users followed by the specified user.
+ *   - `followingCount` The total count of users followed by the specified user.
+ *   - `pageCount` The total number of pages.
+ *   - `size` The current page size.
+ *   - `setSize` A function to set the page size.
+ *   - `isLoading` Indicates if the data is currently being loaded.
+ *   - `isLoadingMore` Indicates if there are more pages to load.
+ *   - `isAtEnd` Indicates if the current page is the last page.
+ *   - `mutate` A function to mutate the data.
+ *   - `error` The error object, if any.
+ */
 import FollowInfoSchema from '@/services/UserFollows/schema/FollowInfoSchema';
 import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
 import useSWRInfinite from 'swr/infinite';
 import { z } from 'zod';
 
 const useGetUsersFollowedByUser = ({
-  pageSize,
+  pageSize = 5,
   userId,
 }: {
-  pageSize: number;
+  pageSize?: number;
-  userId: string;
+  userId: string | undefined;
 }) => {
   const fetcher = async (url: string) => {
+    if (!userId) {
+      throw new Error('User ID is undefined');
+    }
     const response = await fetch(url);
     if (!response.ok) {
       throw new Error(response.statusText);

src/hooks/data-fetching/user-follows/useGetUsersFollowingUser.ts

@@ -3,14 +3,40 @@ import APIResponseValidationSchema from '@/validation/APIResponseValidationSchem
 import useSWRInfinite from 'swr/infinite';
 import { z } from 'zod';
 
-const useGetUsersFollowingUser = ({
+interface UseGetUsersFollowingUser {
-  pageSize,
+  pageSize?: number;
-  userId,
+  userId?: string;
-}: {
+}
-  pageSize: number;
+
-  userId: string;
+/**
-}) => {
+ * Custom hook using SWR for fetching users followed by a specific user.
+ *
+ * @example
+ *   const { followers, followerCount } = useGetUsersFollowingUser({ userId: '123' });
+ *
+ * @param options - The options for fetching users.
+ * @param [options.pageSize=5] - The number of users to fetch per page. Default is `5`
+ * @param options.userId - The ID of the user.
+ * @returns An object with the following properties:
+ *
+ *   - `followers` The list of users following the specified user.
+ *   - `followerCount` The total count of users following the specified user.
+ *   - `pageCount` The total number of pages.
+ *   - `size` The current page size.
+ *   - `setSize` A function to set the page size.
+ *   - `isLoading` Indicates if the data is currently being loaded.
+ *   - `isLoadingMore` Indicates if there are more pages to load.
+ *   - `isAtEnd` Indicates if the current page is the last page.
+ *   - `mutate` A function to mutate the data.
+ *   - `error` The error object, if any.
+ */
+
+const useGetUsersFollowingUser = ({ pageSize = 5, userId }: UseGetUsersFollowingUser) => {
   const fetcher = async (url: string) => {
+    if (!userId) {
+      throw new Error('User ID is undefined');
+    }
+
     const response = await fetch(url);
     if (!response.ok) {
       throw new Error(response.statusText);

src/hooks/utilities/useNavbar.ts

@@ -23,7 +23,8 @@ const useNavbar = () => {
   const { user } = useContext(UserContext);
 
   const authenticatedPages: readonly Page[] = [
-    { slug: '/account', name: 'Account' },
+    { slug: '/users/account', name: 'Account' },
+    { slug: `/users/${user?.id}`, name: 'Profile' },
     { slug: '/api/users/logout', name: 'Logout' },
   ];
 
@@ -35,6 +36,7 @@ const useNavbar = () => {
   /** These pages are accessible to both authenticated and unauthenticated users. */
   const otherPages: readonly Page[] = [
     { slug: '/beers', name: 'Beers' },
+    { slug: '/beers/styles', name: 'Beer Styles' },
     { slug: '/breweries', name: 'Breweries' },
   ];
 

src/pages/account/profile.tsx

@@ -1,157 +0,0 @@
-import FormError from '@/components/ui/forms/FormError';
-import FormInfo from '@/components/ui/forms/FormInfo';
-import FormLabel from '@/components/ui/forms/FormLabel';
-import FormSegment from '@/components/ui/forms/FormSegment';
-import FormTextInput from '@/components/ui/forms/FormTextInput';
-import findUserById from '@/services/User/findUserById';
-import GetUserSchema from '@/services/User/schema/GetUserSchema';
-import withPageAuthRequired from '@/util/withPageAuthRequired';
-import { GetServerSideProps, NextPage } from 'next';
-import { z } from 'zod';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { SubmitHandler, useForm } from 'react-hook-form';
-import toast from 'react-hot-toast';
-import createErrorToast from '@/util/createErrorToast';
-import Button from '@/components/ui/forms/Button';
-
-interface ProfilePageProps {
-  user: z.infer<typeof GetUserSchema>;
-}
-
-const UpdateProfileSchema = z.object({
-  bio: z.string().min(1, 'Bio cannot be empty'),
-  userAvatar: z
-    .instanceof(typeof FileList !== 'undefined' ? FileList : Object)
-    .refine((fileList) => fileList instanceof FileList, {
-      message: 'You must submit this form in a web browser.',
-    })
-    .refine((fileList) => (fileList as FileList).length === 1, {
-      message: 'You must upload exactly one file.',
-    })
-    .refine(
-      (fileList) =>
-        [...(fileList as FileList)]
-          .map((file) => file.type)
-          .every((fileType) => fileType.startsWith('image/')),
-      { message: 'You must upload only images.' },
-    )
-    .refine(
-      (fileList) =>
-        [...(fileList as FileList)]
-          .map((file) => file.size)
-          .every((fileSize) => fileSize < 15 * 1024 * 1024),
-      { message: 'You must upload images smaller than 15MB.' },
-    ),
-});
-
-const sendUpdateProfileRequest = async (data: z.infer<typeof UpdateProfileSchema>) => {
-  if (!(data.userAvatar instanceof FileList)) {
-    throw new Error('You must submit this form in a web browser.');
-  }
-
-  const { bio, userAvatar } = data;
-
-  const formData = new FormData();
-  formData.append('image', userAvatar[0]);
-  formData.append('bio', bio);
-
-  const response = await fetch(`/api/users/profile`, {
-    method: 'PUT',
-    body: formData,
-  });
-
-  if (!response.ok) {
-    throw new Error('Something went wrong.');
-  }
-
-  const updatedUser = await response.json();
-
-  return updatedUser;
-};
-
-const ProfilePage: NextPage<ProfilePageProps> = ({ user }) => {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    reset,
-  } = useForm<z.infer<typeof UpdateProfileSchema>>({
-    resolver: zodResolver(UpdateProfileSchema),
-  });
-
-  const onSubmit: SubmitHandler<z.infer<typeof UpdateProfileSchema>> = async (data) => {
-    try {
-      await sendUpdateProfileRequest(data);
-      const loadingToast = toast.loading('Updating profile...');
-      await new Promise((resolve) => {
-        setTimeout(resolve, 1000);
-      });
-      toast.remove(loadingToast);
-      // reset();
-      toast.success('Profile updated!');
-    } catch (error) {
-      createErrorToast(error);
-    }
-  };
-  return (
-    <div className="flex flex-col items-center justify-center">
-      <div className="w-9/12">
-        <pre>{JSON.stringify(user, null, 2)}</pre>
-        <form className="form-control" noValidate onSubmit={handleSubmit(onSubmit)}>
-          <FormInfo>
-            <FormLabel htmlFor="bio">Bio</FormLabel>
-            <FormError>{errors.bio?.message}</FormError>
-          </FormInfo>
-
-          <FormSegment>
-            <FormTextInput
-              disabled={isSubmitting}
-              id="bio"
-              type="text"
-              formValidationSchema={register('bio')}
-              error={!!errors.bio}
-              placeholder="Bio"
-            />
-          </FormSegment>
-
-          <FormInfo>
-            <FormLabel htmlFor="userAvatar">Avatar</FormLabel>
-            <FormError>{errors.userAvatar?.message}</FormError>
-          </FormInfo>
-          <FormSegment>
-            <input
-              disabled={isSubmitting}
-              type="file"
-              id="userAvatar"
-              className="file-input file-input-bordered w-full"
-              {...register('userAvatar')}
-            />
-          </FormSegment>
-
-          <div className="mt-6">
-            <Button type="submit" isSubmitting={isSubmitting}>
-              Update Profile
-            </Button>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-};
-
-export default ProfilePage;
-
-export const getServerSideProps: GetServerSideProps =
-  withPageAuthRequired<ProfilePageProps>(async (context, session) => {
-    const { id } = session;
-
-    const user = await findUserById(id);
-
-    if (!user) {
-      return { notFound: true };
-    }
-
-    return { props: { user: JSON.parse(JSON.stringify(user)) } };
-  });

src/pages/api/users/[id]/profile/index.ts

@@ -11,7 +11,7 @@ import { createRouter } from 'next-connect';
 import { z } from 'zod';
 
 interface UpdateProfileRequest extends UserExtendedNextApiRequest {
-  file?: Express.Multer.File;
+  file: Express.Multer.File;
   body: {
     bio: string;
   };
@@ -30,14 +30,26 @@ interface UpdateUserProfileByIdParams {
 }
 
 const updateUserProfileById = async ({ id, data }: UpdateUserProfileByIdParams) => {
-  const { alt, path, caption } = data.avatar;
   const user: z.infer<typeof GetUserSchema> = await DBClient.instance.user.update({
     where: { id },
     data: {
       bio: data.bio,
-      userAvatar: {
+      userAvatar: data.avatar
-        upsert: { create: { alt, path, caption }, update: { alt, path, caption } },
+        ? {
+            upsert: {
+              create: {
+                alt: data.avatar.alt,
+                path: data.avatar.path,
+                caption: data.avatar.caption,
               },
+              update: {
+                alt: data.avatar.alt,
+                path: data.avatar.path,
+                caption: data.avatar.caption,
+              },
+            },
+          }
+        : undefined,
     },
     select: {
       id: true,
@@ -61,10 +73,6 @@ const updateUserProfileById = async ({ id, data }: UpdateUserProfileByIdParams)
 const updateProfile = async (req: UpdateProfileRequest, res: NextApiResponse) => {
   const { file, body, user } = req;
 
-  if (!file) {
-    throw new Error('No file uploaded');
-  }
-
   await updateUserProfileById({
     id: user!.id,
     data: {
@@ -86,10 +94,11 @@ const router = createRouter<
 
 router.put(
   getCurrentUser,
+
   // @ts-expect-error
   singleUploadMiddleware,
-
   validateRequest({ bodySchema: z.object({ bio: z.string().max(1000) }) }),
+
   updateProfile,
 );
 

src/pages/api/users/[id]/profile/update-avatar.ts

@@ -0,0 +1,118 @@
+import { UserExtendedNextApiRequest } from '@/config/auth/types';
+import { singleUploadMiddleware } from '@/config/multer/uploadMiddleware';
+import getCurrentUser from '@/config/nextConnect/middleware/getCurrentUser';
+
+import ServerError from '@/config/util/ServerError';
+import DBClient from '@/prisma/DBClient';
+import GetUserSchema from '@/services/User/schema/GetUserSchema';
+
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import { NextApiResponse } from 'next';
+import { NextHandler, createRouter } from 'next-connect';
+import { z } from 'zod';
+
+interface UpdateProfileRequest extends UserExtendedNextApiRequest {
+  file: Express.Multer.File;
+  body: {
+    bio: string;
+  };
+}
+
+interface UpdateUserProfileByIdParams {
+  id: string;
+  data: {
+    avatar: {
+      alt: string;
+      path: string;
+      caption: string;
+    };
+  };
+}
+
+const updateUserAvatarById = async ({ id, data }: UpdateUserProfileByIdParams) => {
+  const user: z.infer<typeof GetUserSchema> = await DBClient.instance.user.update({
+    where: { id },
+    data: {
+      userAvatar: data.avatar
+        ? {
+            upsert: {
+              create: {
+                alt: data.avatar.alt,
+                path: data.avatar.path,
+                caption: data.avatar.caption,
+              },
+              update: {
+                alt: data.avatar.alt,
+                path: data.avatar.path,
+                caption: data.avatar.caption,
+              },
+            },
+          }
+        : undefined,
+    },
+    select: {
+      id: true,
+      username: true,
+      email: true,
+      bio: true,
+      userAvatar: true,
+      accountIsVerified: true,
+      createdAt: true,
+      firstName: true,
+      lastName: true,
+      updatedAt: true,
+      dateOfBirth: true,
+      role: true,
+    },
+  });
+
+  return user;
+};
+
+const checkIfUserCanUpdateProfile = async (
+  req: UpdateProfileRequest,
+  res: NextApiResponse,
+  next: NextHandler,
+) => {
+  const user = req.user!;
+
+  if (user.id !== req.query.id) {
+    throw new ServerError('You can only update your own profile.', 403);
+  }
+
+  await next();
+};
+
+const updateProfile = async (req: UpdateProfileRequest, res: NextApiResponse) => {
+  const { file, user } = req;
+
+  await updateUserAvatarById({
+    id: user!.id,
+    data: {
+      avatar: { alt: file.originalname, path: file.path, caption: '' },
+    },
+  });
+  res.status(200).json({
+    message: 'User avatar updated successfully.',
+    statusCode: 200,
+    success: true,
+  });
+};
+
+const router = createRouter<
+  UpdateProfileRequest,
+  NextApiResponse<z.infer<typeof APIResponseValidationSchema>>
+>();
+
+router.put(
+  getCurrentUser,
+  checkIfUserCanUpdateProfile,
+  // @ts-expect-error
+  singleUploadMiddleware,
+  updateProfile,
+);
+
+const handler = router.handler();
+
+export default handler;
+export const config = { api: { bodyParser: false } };

src/pages/api/users/[id]/profile/update-bio.ts

@@ -0,0 +1,89 @@
+import { UserExtendedNextApiRequest } from '@/config/auth/types';
+
+import getCurrentUser from '@/config/nextConnect/middleware/getCurrentUser';
+import validateRequest from '@/config/nextConnect/middleware/validateRequest';
+import ServerError from '@/config/util/ServerError';
+import DBClient from '@/prisma/DBClient';
+import GetUserSchema from '@/services/User/schema/GetUserSchema';
+
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import { NextApiResponse } from 'next';
+import { NextHandler, createRouter } from 'next-connect';
+import { z } from 'zod';
+
+interface UpdateProfileRequest extends UserExtendedNextApiRequest {
+  body: {
+    bio: string;
+  };
+}
+
+interface UpdateUserProfileByIdParams {
+  id: string;
+  data: { bio: string };
+}
+
+const updateUserProfileById = async ({ id, data }: UpdateUserProfileByIdParams) => {
+  const user: z.infer<typeof GetUserSchema> = await DBClient.instance.user.update({
+    where: { id },
+    data: { bio: data.bio },
+    select: {
+      id: true,
+      username: true,
+      email: true,
+      bio: true,
+      userAvatar: true,
+      accountIsVerified: true,
+      createdAt: true,
+      firstName: true,
+      lastName: true,
+      updatedAt: true,
+      dateOfBirth: true,
+      role: true,
+    },
+  });
+
+  return user;
+};
+
+const updateProfile = async (req: UpdateProfileRequest, res: NextApiResponse) => {
+  const user = req.user!;
+  const { body } = req;
+
+  await updateUserProfileById({ id: user!.id, data: { bio: body.bio } });
+
+  res.status(200).json({
+    message: 'Profile updated successfully.',
+    statusCode: 200,
+    success: true,
+  });
+};
+
+const checkIfUserCanUpdateProfile = async (
+  req: UpdateProfileRequest,
+  res: NextApiResponse,
+  next: NextHandler,
+) => {
+  const user = req.user!;
+
+  if (user.id !== req.query.id) {
+    throw new ServerError('You can only update your own profile.', 403);
+  }
+
+  await next();
+};
+
+const router = createRouter<
+  UpdateProfileRequest,
+  NextApiResponse<z.infer<typeof APIResponseValidationSchema>>
+>();
+
+router.put(
+  getCurrentUser,
+  checkIfUserCanUpdateProfile,
+  validateRequest({ bodySchema: z.object({ bio: z.string().max(1000) }) }),
+  updateProfile,
+);
+
+const handler = router.handler();
+
+export default handler;

src/pages/users/account/edit-profile.tsx

@@ -0,0 +1,181 @@
+import { useContext, useEffect } from 'react';
+
+import { GetServerSideProps, NextPage } from 'next';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+import toast from 'react-hot-toast';
+
+import withPageAuthRequired from '@/util/withPageAuthRequired';
+import createErrorToast from '@/util/createErrorToast';
+
+import UserContext from '@/contexts/UserContext';
+
+import UserAvatar from '@/components/Account/UserAvatar';
+import UpdateProfileForm from '@/components/Account/UpdateProfileForm';
+
+import useGetUsersFollowedByUser from '@/hooks/data-fetching/user-follows/useGetUsersFollowedByUser';
+import useGetUsersFollowingUser from '@/hooks/data-fetching/user-follows/useGetUsersFollowingUser';
+
+import UpdateProfileSchema from '@/services/User/schema/UpdateProfileSchema';
+import sendUpdateUserAvatarRequest from '@/requests/Account/sendUpdateUserAvatarRequest';
+import sendUpdateUserProfileRequest from '@/requests/Account/sendUpdateUserProfileRequest.ts';
+import Spinner from '@/components/ui/Spinner';
+
+const ProfilePage: NextPage = () => {
+  const { user, mutate: mutateUser } = useContext(UserContext);
+
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    formState: { errors, isSubmitting },
+    watch,
+  } = useForm<z.infer<typeof UpdateProfileSchema>>({
+    resolver: zodResolver(UpdateProfileSchema),
+  });
+
+  useEffect(() => {
+    if (!user || !user.bio) {
+      return;
+    }
+
+    setValue('bio', user.bio);
+  }, [user, setValue]);
+
+  const router = useRouter();
+
+  const onSubmit: SubmitHandler<z.infer<typeof UpdateProfileSchema>> = async (data) => {
+    try {
+      const loadingToast = toast.loading('Updating profile...');
+      if (!user) {
+        throw new Error('User is not logged in.');
+      }
+
+      if (data.userAvatar instanceof FileList && data.userAvatar.length === 1) {
+        await sendUpdateUserAvatarRequest({
+          userId: user.id,
+          file: data.userAvatar[0],
+        });
+      }
+
+      await sendUpdateUserProfileRequest({
+        userId: user.id,
+        bio: data.bio,
+      });
+
+      toast.remove(loadingToast);
+      await mutateUser!();
+      await router.push(`/users/${user.id}`);
+      toast.success('Profile updated.');
+    } catch (error) {
+      createErrorToast(error);
+    }
+  };
+  const { followingCount } = useGetUsersFollowedByUser({
+    userId: user?.id,
+  });
+
+  const { followerCount } = useGetUsersFollowingUser({
+    userId: user?.id,
+  });
+
+  const getUserAvatarPath = () => {
+    const watchedInput = watch('userAvatar');
+
+    if (
+      !(
+        watchedInput instanceof FileList &&
+        watchedInput.length === 1 &&
+        watchedInput[0].type.startsWith('image/')
+      )
+    ) {
+      return '';
+    }
+
+    const [avatar] = watchedInput;
+
+    return URL.createObjectURL(avatar);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>The Biergarten App || Update Your Profile</title>
+        <meta name="description" content="Update your user profile." />
+      </Head>
+      <div className="my-10 flex flex-col items-center justify-center">
+        {user ? (
+          <div className="w-10/12 lg:w-7/12">
+            <div className="card">
+              <div className="card-body">
+                <div className="my-10 flex flex-col items-center justify-center">
+                  <div className="my-2 h-40 xl:my-5 xl:h-52">
+                    <UserAvatar
+                      user={{
+                        ...user,
+                        userAvatar:
+                          // Render the user's avatar if they have one and then switch to the preview it's being updated.
+                          user.userAvatar && !getUserAvatarPath()
+                            ? user.userAvatar
+                            : {
+                                id: 'preview',
+                                alt: 'User Avatar',
+                                caption: 'User Avatar',
+                                path: getUserAvatarPath(),
+                                createdAt: new Date(),
+                                updatedAt: new Date(),
+                              },
+                      }}
+                    />
+                  </div>
+                  <div className="text-center">
+                    <h2 className="my-1 text-2xl font-bold xl:text-3xl">
+                      {user.username}
+                    </h2>
+
+                    <div className="flex space-x-3 font-bold xl:text-lg">
+                      <span>{followingCount} Following</span>
+                      <span>{followerCount} Followers</span>
+                    </div>
+                  </div>
+
+                  <div>
+                    <p className="hyphens-auto text-center xl:text-lg">
+                      {watch('bio') ? (
+                        <span className="hyphens-manual">{watch('bio')}</span>
+                      ) : (
+                        <span className="italic">Your bio will appear here.</span>
+                      )}
+                    </p>
+                  </div>
+                </div>
+
+                <UpdateProfileForm
+                  handleSubmit={handleSubmit}
+                  onSubmit={onSubmit}
+                  errors={errors}
+                  isSubmitting={isSubmitting}
+                  register={register}
+                  user={user}
+                />
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="flex h-96 items-center justify-center">
+            <Spinner />
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default ProfilePage;
+
+export const getServerSideProps: GetServerSideProps = withPageAuthRequired();

src/pages/users/account/index.tsx

@@ -11,6 +11,7 @@ import DeleteAccount from '@/components/Account/DeleteAccount';
 import accountPageReducer from '@/reducers/accountPageReducer';
 import UserAvatar from '@/components/Account/UserAvatar';
 import UserPosts from '@/components/Account/UserPosts';
+import UpdateProfileLink from '@/components/Account/UpdateProfileLink';
 
 const AccountPage: NextPage = () => {
   const { user } = useContext(UserContext);
@@ -57,6 +58,7 @@ const AccountPage: NextPage = () => {
               </Tab.List>
               <Tab.Panels>
                 <Tab.Panel className="h-full space-y-5">
+                  <UpdateProfileLink />
                   <AccountInfo pageState={pageState} dispatch={dispatch} />
                   <Security pageState={pageState} dispatch={dispatch} />
                   <DeleteAccount pageState={pageState} dispatch={dispatch} />

src/requests/Account/sendUpdateUserAvatarRequest.ts

@@ -0,0 +1,27 @@
+interface UpdateProfileRequestParams {
+  file: File;
+  userId: string;
+}
+
+const sendUpdateUserAvatarRequest = async ({
+  file,
+  userId,
+}: UpdateProfileRequestParams) => {
+  const formData = new FormData();
+  formData.append('file', file);
+
+  const response = await fetch(`/api/users/${userId}/`, {
+    method: 'PUT',
+    body: formData,
+  });
+
+  if (!response.ok) {
+    throw new Error('Failed to update profile.');
+  }
+
+  const json = await response.json();
+
+  return json;
+};
+
+export default sendUpdateUserAvatarRequest;

src/requests/Account/sendUpdateUserProfileRequest.ts.ts

@@ -0,0 +1,28 @@
+import UpdateProfileSchema from '@/services/User/schema/UpdateProfileSchema';
+import { z } from 'zod';
+
+interface UpdateProfileRequestParams {
+  userId: string;
+  bio: z.infer<typeof UpdateProfileSchema>['bio'];
+}
+
+const sendUpdateUserProfileRequest = async ({
+  bio,
+  userId,
+}: UpdateProfileRequestParams) => {
+  const response = await fetch(`/api/users/${userId}/profile/update-bio`, {
+    method: 'PUT',
+    body: JSON.stringify({ bio }),
+    headers: { 'Content-Type': 'application/json' },
+  });
+
+  if (!response.ok) {
+    throw new Error('Failed to update profile.');
+  }
+
+  const json = await response.json();
+
+  return json;
+};
+
+export default sendUpdateUserProfileRequest;

src/services/User/schema/UpdateProfileSchema.ts

@@ -0,0 +1,29 @@
+import { z } from 'zod';
+
+const UpdateProfileSchema = z.object({
+  bio: z.string(),
+  userAvatar: z
+    .instanceof(typeof FileList !== 'undefined' ? FileList : Object)
+    .refine((fileList) => fileList instanceof FileList, {
+      message: 'You must submit this form in a web browser.',
+    })
+    .refine((fileList) => [...(fileList as FileList)].length <= 1, {
+      message: 'You must upload only one or zero files.',
+    })
+    .refine(
+      (fileList) =>
+        [...(fileList as FileList)]
+          .map((file) => file.type)
+          .every((fileType) => fileType.startsWith('image/')),
+      { message: 'You must upload only images.' },
+    )
+    .refine(
+      (fileList) =>
+        [...(fileList as FileList)]
+          .map((file) => file.size)
+          .every((fileSize) => fileSize < 15 * 1024 * 1024),
+      { message: 'You must upload images smaller than 15MB.' },
+    ),
+});
+
+export default UpdateProfileSchema;

tailwind.config.js

@@ -17,8 +17,8 @@ const myThemes = {
     'base-300': 'hsl(227, 20%, 10%)',
   },
   light: {
-    primary: 'hsl(180, 15%, 70%)',
+    primary: 'hsl(180, 20%, 70%)',
-    secondary: 'hsl(21, 54%, 83%)',
+    secondary: 'hsl(120, 10%, 70%)',
     error: 'hsl(4, 87%, 74%)',
     accent: 'hsl(93, 27%, 73%)',
     neutral: 'hsl(38, 31%, 91%)',