Feat: implement client side functionality for user follow feature

src/components/UserPage/UserHeader.tsx

@@ -1,20 +1,30 @@
 import useTimeDistance from '@/hooks/utilities/useTimeDistance';
-import useGetUsersFollowedByUser from '@/hooks/data-fetching/user-follows/useGetUsersFollowedByUser';
-import useGetUsersFollowingUser from '@/hooks/data-fetching/user-follows/useGetUsersFollowingUser';
+
 import { FC } 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 UserAvatar from '../Account/UserAvatar';
+import UserFollowButton from './UserFollowButton';
 
 interface UserHeaderProps {
   user: z.infer<typeof GetUserSchema>;
-  followerCount: ReturnType<typeof useGetUsersFollowingUser>['followerCount'];
-  followingCount: ReturnType<typeof useGetUsersFollowedByUser>['followingCount'];
 }
-const UserHeader: FC<UserHeaderProps> = ({ user, followerCount, followingCount }) => {
+const UserHeader: FC<UserHeaderProps> = ({ user }) => {
   const timeDistance = useTimeDistance(new Date(user.createdAt));
 
+  const { followingCount, mutate: mutateFollowingCount } = useGetUsersFollowedByUser({
+    userId: user.id,
+    pageSize: 10,
+  });
+
+  const { followerCount, mutate: mutateFollowerCount } = useGetUsersFollowingUser({
+    userId: user.id,
+    pageSize: 10,
+  });
+
   return (
     <header className="card text-center items-center">
       <div className="card-body items-center w-full">
@@ -42,6 +52,13 @@ const UserHeader: FC<UserHeaderProps> = ({ user, followerCount, followingCount }
             </span>
           )}
         </span>
+        <div className="h-20 flex items-center justify-center">
+          <UserFollowButton
+            mutateFollowerCount={mutateFollowerCount}
+            user={user}
+            mutateFollowingCount={mutateFollowingCount}
+          />
+        </div>
       </div>
     </header>
   );