Add user location marker to brewery map, Add beer sec. for brewery posts

src/pages/api/breweries/[id]/beers/index.ts

@@ -0,0 +1,72 @@
+import NextConnectOptions from '@/config/nextConnect/NextConnectOptions';
+import validateRequest from '@/config/nextConnect/middleware/validateRequest';
+import DBClient from '@/prisma/DBClient';
+import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import { NextApiRequest, NextApiResponse } from 'next';
+import { createRouter } from 'next-connect';
+import { z } from 'zod';
+
+interface GetAllBeersByBreweryRequest extends NextApiRequest {
+  query: { page_size: string; page_num: string; id: string };
+}
+
+const getAllBeersByBrewery = async (
+  req: GetAllBeersByBreweryRequest,
+  res: NextApiResponse<z.infer<typeof APIResponseValidationSchema>>,
+) => {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const { page_size, page_num, id } = req.query;
+
+  const beers: z.infer<typeof beerPostQueryResult>[] =
+    await DBClient.instance.beerPost.findMany({
+      where: { breweryId: id },
+      take: parseInt(page_size, 10),
+      skip: parseInt(page_num, 10) * parseInt(page_size, 10),
+      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 } },
+      },
+    });
+
+  const pageCount = await DBClient.instance.beerPost.count({
+    where: { breweryId: id },
+  });
+
+  res.setHeader('X-Total-Count', pageCount);
+
+  res.status(200).json({
+    message: 'Beers fetched successfully',
+    statusCode: 200,
+    payload: beers,
+    success: true,
+  });
+};
+
+const router = createRouter<
+  GetAllBeersByBreweryRequest,
+  NextApiResponse<z.infer<typeof APIResponseValidationSchema>>
+>();
+
+router.get(
+  validateRequest({
+    querySchema: z.object({
+      page_size: z.string().nonempty(),
+      page_num: z.string().nonempty(),
+      id: z.string().nonempty(),
+    }),
+  }),
+  getAllBeersByBrewery,
+);
+
+const handler = router.handler(NextConnectOptions);
+
+export default handler;

src/pages/breweries/[id].tsx

@@ -11,7 +11,7 @@ import useMediaQuery from '@/hooks/useMediaQuery';
 import { Tab } from '@headlessui/react';
 import BreweryInfoHeader from '@/components/BreweryById/BreweryInfoHeader';
 import BreweryPostMap from '@/components/BreweryById/BreweryPostMap';
-import BreweryBeersSection from '@/components/BreweryById/BreweryBeerSection.tsx';
+import BreweryBeersSection from '@/components/BreweryById/BreweryBeerSection';
 import BreweryCommentsSection from '@/components/BreweryById/BreweryCommentsSection';
 
 interface BreweryPageProps {
@@ -63,7 +63,7 @@ const BreweryByIdPage: NextPage<BreweryPageProps> = ({ breweryPost }) => {
                 </div>
                 <div className="w-[40%] space-y-3">
                   <BreweryPostMap latitude={latitude} longitude={longitude} />
-                  <BreweryBeersSection />
+                  <BreweryBeersSection breweryPost={breweryPost} />
                 </div>
               </div>
             ) : (
@@ -83,7 +83,7 @@ const BreweryByIdPage: NextPage<BreweryPageProps> = ({ breweryPost }) => {
                       <BreweryCommentsSection breweryPost={breweryPost} />
                     </Tab.Panel>
                     <Tab.Panel>
-                      <BreweryBeersSection />
+                      <BreweryBeersSection breweryPost={breweryPost} />
                     </Tab.Panel>
                   </Tab.Panels>
                 </Tab.Group>

src/pages/breweries/map.tsx

@@ -13,6 +13,7 @@ import DBClient from '@/prisma/DBClient';
 import LocationMarker from '@/components/ui/LocationMarker';
 import Link from 'next/link';
 import Head from 'next/head';
+import useGeolocation from '@/hooks/useGeolocation';
 
 type MapStyles = Record<'light' | 'dark', `mapbox://styles/mapbox/${string}`>;
 
@@ -61,7 +62,7 @@ const BreweryMapPage: NextPage<BreweryMapPageProps> = ({ breweries }) => {
                 setPopupInfo(brewery);
               }}
             >
-              <LocationMarker />
+              <LocationMarker size="md" color="blue" />
             </Marker>
           );
         })}
@@ -69,6 +70,19 @@ const BreweryMapPage: NextPage<BreweryMapPageProps> = ({ breweries }) => {
     ),
     [breweries],
   );
+
+  const { coords, error } = useGeolocation();
+
+  const userLocationPin = useMemo(
+    () =>
+      coords && !error ? (
+        <Marker latitude={coords.latitude} longitude={coords.longitude}>
+          <LocationMarker size="lg" color="red" />
+        </Marker>
+      ) : null,
+    [coords, error],
+  );
+
   return (
     <>
       <Head>
@@ -90,6 +104,7 @@ const BreweryMapPage: NextPage<BreweryMapPageProps> = ({ breweries }) => {
           <NavigationControl position="top-left" />
           <ScaleControl />
           {pins}
+          {userLocationPin}
           {popupInfo && (
             <Popup
               anchor="bottom"