Refactor

Extract upload middleware to separate file and implement edit profile functionality.

src/components/UserPage/UserHeader.tsx

@@ -1,11 +1,13 @@
 import useTimeDistance from '@/hooks/utilities/useTimeDistance';
 
-import { FC } from 'react';
+import { FC, useContext } from 'react';
 import { z } from 'zod';
 import { format } from 'date-fns';
 import GetUserSchema from '@/services/User/schema/GetUserSchema';
 import useGetUsersFollowedByUser from '@/hooks/data-fetching/user-follows/useGetUsersFollowedByUser';
 import useGetUsersFollowingUser from '@/hooks/data-fetching/user-follows/useGetUsersFollowingUser';
+import UserContext from '@/contexts/UserContext';
+import Link from 'next/link';
 import UserAvatar from '../Account/UserAvatar';
 import UserFollowButton from './UserFollowButton';
 
@@ -25,6 +27,8 @@ const UserHeader: FC<UserHeaderProps> = ({ user }) => {
     pageSize: 10,
   });
 
+  const { user: currentUser } = useContext(UserContext);
+
   return (
     <header className="card text-center items-center">
       <div className="card-body items-center w-full">
@@ -55,13 +59,22 @@ const UserHeader: FC<UserHeaderProps> = ({ user }) => {
         <div className="w-6/12">
           <p className="text-sm">{user.bio}</p>
         </div>
-        <div className="h-20 flex items-center justify-center">
-          <UserFollowButton
-            mutateFollowerCount={mutateFollowerCount}
-            user={user}
-            mutateFollowingCount={mutateFollowingCount}
-          />
-        </div>
+
+        {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={`/account/profile`} className="btn btn-primary">
+              Edit Profile
+            </Link>
+          </div>
+        )}
       </div>
     </header>
   );