feat: extract user header

src/components/UserPage/UserHeader.tsx

@@ -0,0 +1,50 @@
+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 UserAvatar from '../Account/UserAvatar';
+
+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 timeDistance = useTimeDistance(new Date(user.createdAt));
+
+  return (
+    <header className="card text-center items-center">
+      <div className="card-body items-center w-full">
+        <div className="w-40 h-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>
+
+        <span className="italic">
+          joined{' '}
+          {timeDistance && (
+            <span
+              className="tooltip tooltip-bottom"
+              data-tip={format(new Date(user.createdAt), 'MM/dd/yyyy')}
+            >
+              {`${timeDistance} ago`}
+            </span>
+          )}
+        </span>
+      </div>
+    </header>
+  );
+};
+
+export default UserHeader;

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

@@ -3,7 +3,7 @@ import APIResponseValidationSchema from '@/validation/APIResponseValidationSchem
 import useSWRInfinite from 'swr/infinite';
 import { z } from 'zod';
 
-const useGetUsersFollowingUser = ({
+const useGetUsersFollowedByUser = ({
   pageSize,
   userId,
 }: {
@@ -61,4 +61,4 @@ const useGetUsersFollowingUser = ({
   };
 };
 
-export default useGetUsersFollowingUser;
+export default useGetUsersFollowedByUser;

src/pages/users/[id].tsx

@@ -1,13 +1,12 @@
 import useMediaQuery from '@/hooks/utilities/useMediaQuery';
-import useTimeDistance from '@/hooks/utilities/useTimeDistance';
 import findUserById from '@/services/User/findUserById';
 import GetUserSchema from '@/services/User/schema/GetUserSchema';
-import { format } from 'date-fns';
+
-import { GetServerSideProps } from 'next';
 import Head from 'next/head';
 import { FC } from 'react';
 import { z } from 'zod';
-import UserAvatar from '@/components/Account/UserAvatar';
+import withPageAuthRequired from '@/util/withPageAuthRequired';
+import UserHeader from '@/components/UserPage/UserHeader';
 import useGetUsersFollowedByUser from '@/hooks/data-fetching/user-follows/useGetUsersFollowedByUser';
 import useGetUsersFollowingUser from '@/hooks/data-fetching/user-follows/useGetUsersFollowingUser';
 
@@ -15,8 +14,10 @@ interface UserInfoPageProps {
   user: z.infer<typeof GetUserSchema>;
 }
 
-const UserHeader: FC<{ user: z.infer<typeof GetUserSchema> }> = ({ user }) => {
+const UserInfoPage: FC<UserInfoPageProps> = ({ user }) => {
-  const timeDistance = useTimeDistance(new Date(user.createdAt));
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const isDesktop = useMediaQuery('(min-width: 1024px)');
+  const title = `${user.username} | The Biergarten App`;
 
   const { followingCount } = useGetUsersFollowedByUser({
     userId: user.id,
@@ -28,43 +29,6 @@ const UserHeader: FC<{ user: z.infer<typeof GetUserSchema> }> = ({ user }) => {
     pageSize: 10,
   });
 
-  return (
-    <header className="card text-center items-center">
-      <div className="card-body items-center w-full">
-        <div className="w-40 h-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>
-
-        <span className="italic">
-          joined{' '}
-          {timeDistance && (
-            <span
-              className="tooltip tooltip-bottom"
-              data-tip={format(new Date(user.createdAt), 'MM/dd/yyyy')}
-            >
-              {`${timeDistance} ago`}
-            </span>
-          )}
-        </span>
-      </div>
-    </header>
-  );
-};
-
-const UserInfoPage: FC<UserInfoPageProps> = ({ user }) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const isDesktop = useMediaQuery('(min-width: 1024px)');
-  const title = `${user.username} | The Biergarten App`;
-
   return (
     <>
       <Head>
@@ -74,7 +38,32 @@ const UserInfoPage: FC<UserInfoPageProps> = ({ user }) => {
       <>
         <main className="mb-12 mt-10 flex w-full items-center justify-center">
           <div className="w-11/12 space-y-3 xl:w-9/12 2xl:w-8/12">
-            <UserHeader user={user} />
+            <UserHeader
+              user={user}
+              followerCount={followerCount}
+              followingCount={followingCount}
+            />
+
+            {isDesktop ? (
+              <div className="flex space-x-3">
+                <div className="w-5/12">
+                  <div className="card">
+                    <div className="card-body">
+                      <h2 className="text-2xl font-bold">About Me</h2>
+                      <p>{user.bio}</p>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="w-7/12">
+                  <div className="card">
+                    <div className="card-body"></div>
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <></>
+            )}
           </div>
         </main>
       </>
@@ -84,15 +73,12 @@ const UserInfoPage: FC<UserInfoPageProps> = ({ user }) => {
 
 export default UserInfoPage;
 
-export const getServerSideProps: GetServerSideProps<UserInfoPageProps> = async (
+export const getServerSideProps = withPageAuthRequired<UserInfoPageProps>(
-  context,
+  async (context) => {
-) => {
+    const { id } = context.params!;
-  const { id } = context.params!;
+    const user = await findUserById(id as string);
-  const user = await findUserById(id as string);
+    return user
-
+      ? { props: { user: JSON.parse(JSON.stringify(user)) } }
-  if (!user) {
+      : { notFound: true };
-    return { notFound: true };
+  },
-  }
+);
-
-  return { props: { user: JSON.parse(JSON.stringify(user)) } };
-};