AaronPo/the-biergarten-app
1
0
Fork 0
mirror of https://github.com/aaronpo97/the-biergarten-app.git synced 2026-02-16 20:13:49 +00:00
Code Issues Packages Projects 1 Releases Wiki Activity

feat: extract user header

Browse Source
This commit is contained in:
Aaron William Po
2023-11-20 14:44:03 -05:00
parent 6641a45705
commit f7227519b6
3 changed files with 94 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/pages/users/[id].tsx
View File

@@ -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 timeDistance = useTimeDistance(new Date(user.createdAt));
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`;
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 (
context,
) => {
const { id } = context.params!;
const user = await findUserById(id as string);
if (!user) {
return { notFound: true };
}
return { props: { user: JSON.parse(JSON.stringify(user)) } };
};
export const getServerSideProps = withPageAuthRequired<UserInfoPageProps>(
async (context) => {
const { id } = context.params!;
const user = await findUserById(id as string);
return user
? { props: { user: JSON.parse(JSON.stringify(user)) } }
: { notFound: true };
},
);