Work on brewery page, refactors

Refactor query types to explicitly use z.infer

pages/api/beers/[id]/comments/index.ts

@@ -1,21 +1,28 @@
+import DBClient from '@/prisma/DBClient';
+import getAllBeerComments from '@/services/BeerComment/getAllBeerComments';
 import validateRequest from '@/config/nextConnect/middleware/validateRequest';
 import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
 import { UserExtendedNextApiRequest } from '@/config/auth/types';
 import NextConnectOptions from '@/config/nextConnect/NextConnectOptions';
 import createNewBeerComment from '@/services/BeerComment/createNewBeerComment';
-import { BeerCommentQueryResultT } from '@/services/BeerComment/schema/BeerCommentQueryResult';
+
 import BeerCommentValidationSchema from '@/services/BeerComment/schema/CreateBeerCommentValidationSchema';
 
 import { createRouter } from 'next-connect';
 import { z } from 'zod';
 import getCurrentUser from '@/config/nextConnect/middleware/getCurrentUser';
 import { NextApiResponse } from 'next';
+import BeerCommentQueryResult from '@/services/BeerComment/schema/BeerCommentQueryResult';
 
 interface CreateCommentRequest extends UserExtendedNextApiRequest {
   body: z.infer<typeof BeerCommentValidationSchema>;
   query: { id: string };
 }
 
+interface GetAllCommentsRequest extends UserExtendedNextApiRequest {
+  query: { id: string; page_size: string; page_num: string };
+}
+
 const createComment = async (
   req: CreateCommentRequest,
   res: NextApiResponse<z.infer<typeof APIResponseValidationSchema>>,
@@ -24,12 +31,13 @@ const createComment = async (
 
   const beerPostId = req.query.id;
 
-  const newBeerComment: BeerCommentQueryResultT = await createNewBeerComment({
-    content,
-    rating,
-    beerPostId,
-    userId: req.user!.id,
-  });
+  const newBeerComment: z.infer<typeof BeerCommentQueryResult> =
+    await createNewBeerComment({
+      content,
+      rating,
+      beerPostId,
+      userId: req.user!.id,
+    });
 
   res.status(201).json({
     message: 'Beer comment created successfully',
@@ -39,8 +47,34 @@ const createComment = async (
   });
 };
 
+const getAll = async (
+  req: GetAllCommentsRequest,
+  res: NextApiResponse<z.infer<typeof APIResponseValidationSchema>>,
+) => {
+  const beerPostId = req.query.id;
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const { page_size, page_num } = req.query;
+
+  const comments = await getAllBeerComments(
+    { id: beerPostId },
+    { pageSize: parseInt(page_size, 10), pageNum: parseInt(page_num, 10) },
+  );
+
+  const pageCount = await DBClient.instance.beerComment.count({ where: { beerPostId } });
+
+  res.setHeader('X-Total-Count', pageCount);
+
+  res.status(200).json({
+    message: 'Beer comments fetched successfully',
+    statusCode: 200,
+    payload: comments,
+    success: true,
+  });
+};
+
 const router = createRouter<
-  CreateCommentRequest,
+  // I don't want to use any, but I can't figure out how to get the types to work
+  any,
   NextApiResponse<z.infer<typeof APIResponseValidationSchema>>
 >();
 
@@ -53,5 +87,16 @@ router.post(
   createComment,
 );
 
+router.get(
+  validateRequest({
+    querySchema: z.object({
+      id: z.string().uuid(),
+      page_size: z.coerce.number().int().positive(),
+      page_num: z.coerce.number().int().positive(),
+    }),
+  }),
+  getAll,
+);
+
 const handler = router.handler(NextConnectOptions);
 export default handler;

pages/api/beers/search.ts

@@ -5,7 +5,7 @@ import { NextApiRequest, NextApiResponse } from 'next';
 import { createRouter } from 'next-connect';
 import { z } from 'zod';
 import DBClient from '@/prisma/DBClient';
-import { BeerPostQueryResult } from '@/services/BeerPost/schema/BeerPostQueryResult';
+import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
 
 const SearchSchema = z.object({
   search: z.string().min(1),
@@ -18,29 +18,30 @@ interface SearchAPIRequest extends NextApiRequest {
 const search = async (req: SearchAPIRequest, res: NextApiResponse) => {
   const { search: query } = req.query;
 
-  const beers: BeerPostQueryResult[] = await DBClient.instance.beerPost.findMany({
-    select: {
-      id: true,
-      name: true,
-      ibu: true,
-      abv: true,
-      createdAt: true,
-      description: true,
-      postedBy: { select: { username: true, id: true } },
-      brewery: { select: { name: true, id: true } },
-      type: { select: { name: true, id: true } },
-      beerImages: { select: { alt: true, path: true, caption: true, id: true } },
-    },
-    where: {
-      OR: [
-        { name: { contains: query, mode: 'insensitive' } },
-        { description: { contains: query, mode: 'insensitive' } },
+  const beers: z.infer<typeof beerPostQueryResult>[] =
+    await DBClient.instance.beerPost.findMany({
+      select: {
+        id: true,
+        name: true,
+        ibu: true,
+        abv: true,
+        createdAt: true,
+        description: true,
+        postedBy: { select: { username: true, id: true } },
+        brewery: { select: { name: true, id: true } },
+        type: { select: { name: true, id: true } },
+        beerImages: { select: { alt: true, path: true, caption: true, id: true } },
+      },
+      where: {
+        OR: [
+          { name: { contains: query, mode: 'insensitive' } },
+          { description: { contains: query, mode: 'insensitive' } },
 
-        { brewery: { name: { contains: query, mode: 'insensitive' } } },
-        { type: { name: { contains: query, mode: 'insensitive' } } },
-      ],
-    },
-  });
+          { brewery: { name: { contains: query, mode: 'insensitive' } } },
+          { type: { name: { contains: query, mode: 'insensitive' } } },
+        ],
+      },
+    });
 
   res.status(200).json(beers);
 };

pages/beers/[id]/edit.tsx

@@ -5,13 +5,14 @@ import React from 'react';
 import Layout from '@/components/ui/Layout';
 import withPageAuthRequired from '@/getServerSideProps/withPageAuthRequired';
 import getBeerPostById from '@/services/BeerPost/getBeerPostById';
-import { BeerPostQueryResult } from '@/services/BeerPost/schema/BeerPostQueryResult';
+import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
 import EditBeerPostForm from '@/components/EditBeerPostForm';
 import FormPageLayout from '@/components/ui/forms/FormPageLayout';
 import { BiBeer } from 'react-icons/bi';
+import { z } from 'zod';
 
 interface EditPageProps {
-  beerPost: BeerPostQueryResult;
+  beerPost: z.infer<typeof beerPostQueryResult>;
 }
 
 const EditPage: NextPage<EditPageProps> = ({ beerPost }) => {

pages/beers/[id]/index.tsx

@@ -11,19 +11,20 @@ import getAllBeerComments from '@/services/BeerComment/getAllBeerComments';
 import getBeerPostById from '@/services/BeerPost/getBeerPostById';
 import getBeerRecommendations from '@/services/BeerPost/getBeerRecommendations';
 
-import { BeerCommentQueryResultArrayT } from '@/services/BeerComment/schema/BeerCommentQueryResult';
-import { BeerPostQueryResult } from '@/services/BeerPost/schema/BeerPostQueryResult';
+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: BeerPostQueryResult;
+  beerPost: z.infer<typeof beerPostQueryResult>;
   beerRecommendations: (BeerPost & {
     brewery: { id: string; name: string };
     beerImages: { id: string; alt: string; url: string }[];
   })[];
-  beerComments: BeerCommentQueryResultArrayT;
+  beerComments: z.infer<typeof BeerCommentQueryResult>[];
   commentsPageCount: number;
   likeCount: number;
 }

pages/beers/create.tsx

@@ -8,9 +8,10 @@ import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQuer
 import { BeerType } from '@prisma/client';
 import { NextPage } from 'next';
 import { BiBeer } from 'react-icons/bi';
+import { z } from 'zod';
 
 interface CreateBeerPageProps {
-  breweries: BreweryPostQueryResult[];
+  breweries: z.infer<typeof BreweryPostQueryResult>[];
   types: BeerType[];
 }
 

pages/beers/index.tsx

@@ -6,11 +6,12 @@ import DBClient from '@/prisma/DBClient';
 import Layout from '@/components/ui/Layout';
 import BeerIndexPaginationBar from '@/components/BeerIndex/BeerIndexPaginationBar';
 import BeerCard from '@/components/BeerIndex/BeerCard';
-import { BeerPostQueryResult } from '@/services/BeerPost/schema/BeerPostQueryResult';
+import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
 import Head from 'next/head';
+import { z } from 'zod';
 
 interface BeerPageProps {
-  initialBeerPosts: BeerPostQueryResult[];
+  initialBeerPosts: z.infer<typeof beerPostQueryResult>[];
   pageCount: number;
 }
 

pages/beers/search.tsx

@@ -14,8 +14,8 @@ const DEBOUNCE_DELAY = 300;
 
 const SearchPage: NextPage = () => {
   const router = useRouter();
-  const querySearch = router.query.search as string | undefined;
-  const [searchValue, setSearchValue] = useState(querySearch || '');
+  const querySearch = (router.query.search as string) || '';
+  const [searchValue, setSearchValue] = useState(querySearch);
   const { searchResults, isLoading, searchError } = useBeerPostSearch(searchValue);
 
   const debounceSearch = debounce((value: string) => {
@@ -36,7 +36,7 @@ const SearchPage: NextPage = () => {
       if (!querySearch || searchValue) {
         return;
       }
-      setSearchValue(searchValue);
+      setSearchValue(querySearch);
     }, DEBOUNCE_DELAY)();
   }, [querySearch, searchValue]);
 

pages/breweries/[id].tsx

@@ -1,10 +1,12 @@
 import Layout from '@/components/ui/Layout';
-import { BeerPostQueryResult } from '@/services/BeerPost/schema/BeerPostQueryResult';
+
 import getBreweryPostById from '@/services/BreweryPost/getBreweryPostById';
+import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQueryResult';
 import { GetServerSideProps, NextPage } from 'next';
+import { z } from 'zod';
 
 interface BreweryPageProps {
-  breweryPost: BeerPostQueryResult;
+  breweryPost: z.infer<typeof BreweryPostQueryResult>;
 }
 
 const BreweryByIdPage: NextPage<BreweryPageProps> = ({ breweryPost }) => {

pages/breweries/index.tsx

@@ -4,24 +4,58 @@ import Link from 'next/link';
 import getAllBreweryPosts from '@/services/BreweryPost/getAllBreweryPosts';
 import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQueryResult';
 import Layout from '@/components/ui/Layout';
+import { FC } from 'react';
+import Image from 'next/image';
+import { z } from 'zod';
 
 interface BreweryPageProps {
-  breweryPosts: BreweryPostQueryResult[];
+  breweryPosts: z.infer<typeof BreweryPostQueryResult>[];
 }
 
+const BreweryCard: FC<{ brewery: z.infer<typeof BreweryPostQueryResult> }> = ({
+  brewery,
+}) => {
+  return (
+    <div className="card bg-base-300" key={brewery.id}>
+      <figure className="card-image h-96">
+        {brewery.breweryImages.length > 0 && (
+          <Image
+            src={brewery.breweryImages[0].path}
+            alt={brewery.name}
+            width="1029"
+            height="110"
+          />
+        )}
+      </figure>
+      <div className="card-body space-y-3">
+        <div>
+          <h2 className="text-3xl font-bold">
+            <Link href={`/breweries/${brewery.id}`}>{brewery.name}</Link>
+          </h2>
+          <h3 className="text-xl font-semibold">{brewery.location}</h3>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 const BreweryPage: NextPage<BreweryPageProps> = ({ breweryPosts }) => {
   return (
     <Layout>
-      <h1 className="text-3xl font-bold underline">Brewery Posts</h1>
-      {breweryPosts.map((post) => {
-        return (
-          <div key={post.id}>
-            <h2>
-              <Link href={`/breweries/${post.id}`}>{post.name}</Link>
-            </h2>
+      <div className="flex items-center justify-center bg-base-100">
+        <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">Breweries</h1>
+            </div>
+          </header>
+          <div className="grid gap-5 md:grid-cols-1 xl:grid-cols-2">
+            {breweryPosts.map((brewery) => {
+              return <BreweryCard brewery={brewery} key={brewery.id} />;
+            })}
           </div>
-        );
-      })}
+        </div>
+      </div>
     </Layout>
   );
 };