Feat: Update beer recs to be loaded on the client side

src/pages/api/beers/[id]/recommendations.ts

@@ -0,0 +1,63 @@
+import NextConnectOptions from '@/config/nextConnect/NextConnectOptions';
+import validateRequest from '@/config/nextConnect/middleware/validateRequest';
+import ServerError from '@/config/util/ServerError';
+import getBeerPostById from '@/services/BeerPost/getBeerPostById';
+import getBeerRecommendations from '@/services/BeerPost/getBeerRecommendations';
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import { NextApiRequest, NextApiResponse } from 'next';
+import { createRouter } from 'next-connect';
+import { z } from 'zod';
+
+interface BeerPostRequest extends NextApiRequest {
+  query: { id: string; page_num: string; page_size: string };
+}
+
+const router = createRouter<
+  BeerPostRequest,
+  NextApiResponse<z.infer<typeof APIResponseValidationSchema>>
+>();
+
+const getBeerRecommendationsRequest = async (
+  req: BeerPostRequest,
+  res: NextApiResponse<z.infer<typeof APIResponseValidationSchema>>,
+) => {
+  const { id } = req.query;
+
+  const beerPost = await getBeerPostById(id);
+
+  if (!beerPost) {
+    throw new ServerError('Beer post not found', 404);
+  }
+
+  const pageNum = parseInt(req.query.page_num as string, 10);
+  const pageSize = parseInt(req.query.page_size as string, 10);
+
+  const { count, beerRecommendations } = await getBeerRecommendations({
+    beerPost,
+    pageNum,
+    pageSize,
+  });
+
+  res.setHeader('X-Total-Count', count);
+  res.status(200).json({
+    success: true,
+    message: 'Recommendations fetched successfully',
+    statusCode: 200,
+    payload: beerRecommendations,
+  });
+};
+
+router.get(
+  validateRequest({
+    querySchema: z.object({
+      id: z.string().uuid(),
+      page_num: z.string().regex(/^[0-9]+$/),
+      page_size: z.string().regex(/^[0-9]+$/),
+    }),
+  }),
+  getBeerRecommendationsRequest,
+);
+
+const handler = router.handler(NextConnectOptions);
+
+export default handler;

src/pages/beers/[id]/index.tsx

@@ -7,10 +7,8 @@ import BeerPostCommentsSection from '@/components/BeerById/BeerPostCommentsSecti
 import BeerRecommendations from '@/components/BeerById/BeerRecommendations';
 
 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 { z } from 'zod';
 
@@ -21,13 +19,9 @@ import { Tab } from '@headlessui/react';
 
 interface BeerPageProps {
   beerPost: z.infer<typeof beerPostQueryResult>;
-  beerRecommendations: (BeerPost & {
-    brewery: { id: string; name: string };
-    beerImages: { id: string; alt: string; url: string }[];
-  })[];
 }
 
-const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost, beerRecommendations }) => {
+const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost }) => {
   const isDesktop = useMediaQuery('(min-width: 1024px)');
 
   return (
@@ -72,7 +66,7 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost, beerRecommendations }
                   <BeerPostCommentsSection beerPost={beerPost} />
                 </div>
                 <div className="w-[40%]">
-                  <BeerRecommendations beerRecommendations={beerRecommendations} />
+                  <BeerRecommendations beerPost={beerPost} />
                 </div>
               </div>
             ) : (
@@ -90,7 +84,7 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost, beerRecommendations }
                     <BeerPostCommentsSection beerPost={beerPost} />
                   </Tab.Panel>
                   <Tab.Panel>
-                    <BeerRecommendations beerRecommendations={beerRecommendations} />
+                    <BeerRecommendations beerPost={beerPost} />
                   </Tab.Panel>
                 </Tab.Panels>
               </Tab.Group>
@@ -109,12 +103,8 @@ export const getServerSideProps: GetServerSideProps<BeerPageProps> = async (cont
     return { notFound: true };
   }
 
-  const { type, brewery, id } = beerPost;
-  const beerRecommendations = await getBeerRecommendations({ type, brewery, id });
-
   const props = {
     beerPost: JSON.parse(JSON.stringify(beerPost)),
-    beerRecommendations: JSON.parse(JSON.stringify(beerRecommendations)),
   };
 
   return { props };

src/pages/beers/index.tsx

@@ -9,7 +9,7 @@ import { FaArrowUp } from 'react-icons/fa';
 import LoadingCard from '@/components/ui/LoadingCard';
 
 const BeerPage: NextPage = () => {
-  const PAGE_SIZE = 6;
+  const PAGE_SIZE = 20;
 
   const { beerPosts, setSize, size, isLoading, isLoadingMore, isAtEnd } = useBeerPosts({
     pageSize: PAGE_SIZE,

src/pages/breweries/index.tsx

@@ -17,7 +17,7 @@ interface BreweryPageProps {
 }
 
 const BreweryPage: NextPage<BreweryPageProps> = () => {
-  const PAGE_SIZE = 6;
+  const PAGE_SIZE = 20;
 
   const { breweryPosts, setSize, size, isLoading, isLoadingMore, isAtEnd } =
     useBreweryPosts({