Rewrote beer by id page comments to load on client

pages/beers/[id]/index.tsx

@@ -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)),
   };
 

pages/beers/index.tsx

@@ -27,7 +27,7 @@ const BeerPage: NextPage<BeerPageProps> = ({ initialBeerPosts, pageCount }) => {
         <meta name="description" content="Beer posts" />
       </Head>
       <div className="flex items-center justify-center bg-base-100">
-        <div className="my-10 flex  w-10/12 flex-col space-y-4">
+        <div className="my-10 flex w-10/12 flex-col space-y-4">
           <header className="my-10">
             <div className="space-y-2">
               <h1 className="text-6xl font-bold">The Biergarten Index</h1>