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

Rewrote beer by id page comments to load on client

Browse Source
This commit is contained in:
Aaron William Po
2023-04-02 21:50:42 -04:00
parent b69dbc95b4
commit de3964dbfa
8 changed files with 132 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
pages/beers/[id]/index.tsx
View File

@@ -7,16 +7,14 @@ import BeerPostCommentsSection from '@/components/BeerById/BeerPostCommentsSecti
import BeerRecommendations from '@/components/BeerById/BeerRecommendations';
import Layout from '@/components/ui/Layout';
import getAllBeerComments from '@/services/BeerComment/getAllBeerComments';
import getBeerPostById from '@/services/BeerPost/getBeerPostById';
import getBeerRecommendations from '@/services/BeerPost/getBeerRecommendations';
import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
import { BeerPost } from '@prisma/client';
import getBeerPostLikeCount from '@/services/BeerPostLike/getBeerPostLikeCount';
import getBeerCommentCount from '@/services/BeerComment/getBeerCommentCount';
import { z } from 'zod';
import BeerCommentQueryResult from '@/services/BeerComment/schema/BeerCommentQueryResult';
interface BeerPageProps {
beerPost: z.infer<typeof beerPostQueryResult>;
@@ -24,16 +22,12 @@ interface BeerPageProps {
brewery: { id: string; name: string };
beerImages: { id: string; alt: string; url: string }[];
})[];
beerComments: z.infer<typeof BeerCommentQueryResult>[];
commentsPageCount: number;
likeCount: number;
}
const BeerByIdPage: NextPage<BeerPageProps> = ({
beerPost,
beerRecommendations,
beerComments,
commentsPageCount,
likeCount,
}) => {
return (
@@ -57,11 +51,7 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({
<div className="w-11/12 space-y-3 xl:w-9/12">
<BeerInfoHeader beerPost={beerPost} initialLikeCount={likeCount} />
<div className="mt-4 flex flex-col space-y-3 md:flex-row md:space-y-0 md:space-x-3">
<BeerPostCommentsSection
beerPost={beerPost}
comments={beerComments}
commentsPageCount={commentsPageCount}
/>
<BeerPostCommentsSection beerPost={beerPost} />
<div className="md:w-[40%]">
<BeerRecommendations beerRecommendations={beerRecommendations} />
</div>
@@ -75,7 +65,6 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({
export const getServerSideProps: GetServerSideProps<BeerPageProps> = async (context) => {
const beerPost = await getBeerPostById(context.params!.id! as string);
const beerCommentPageNum = parseInt(context.query.comments_page as string, 10) || 1;
if (!beerPost) {
return { notFound: true };
@@ -84,22 +73,11 @@ export const getServerSideProps: GetServerSideProps<BeerPageProps> = async (cont
const { type, brewery, id } = beerPost;
const beerRecommendations = await getBeerRecommendations({ type, brewery, id });
const pageSize = 5;
const beerComments = await getAllBeerComments(
{ id: beerPost.id },
{ pageSize, pageNum: beerCommentPageNum },
);
const commentCount = await getBeerCommentCount(beerPost.id);
const commentPageCount = commentCount ? Math.ceil(commentCount / pageSize) : 0;
const likeCount = await getBeerPostLikeCount(beerPost.id);
const props = {
beerPost: JSON.parse(JSON.stringify(beerPost)),
beerRecommendations: JSON.parse(JSON.stringify(beerRecommendations)),
beerComments: JSON.parse(JSON.stringify(beerComments)),
commentsPageCount: JSON.parse(JSON.stringify(commentPageCount)),
likeCount: JSON.parse(JSON.stringify(likeCount)),
};