Add dbml, minor tweaks to beer style page

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

@@ -0,0 +1,41 @@
+import validateRequest from '@/config/nextConnect/middleware/validateRequest';
+import getBeerStyleById from '@/services/BeerStyles/getBeerStyleById';
+
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import { NextApiRequest, NextApiResponse } from 'next';
+import { createRouter } from 'next-connect';
+import { z } from 'zod';
+
+interface GetBeerStyleByIdRequest extends NextApiRequest {
+  query: { id: string };
+}
+
+const getBeerStyle = async (
+  req: GetBeerStyleByIdRequest,
+  res: NextApiResponse<z.infer<typeof APIResponseValidationSchema>>,
+) => {
+  const { id } = req.query;
+
+  const beerStyle = await getBeerStyleById(id);
+
+  res.status(200).json({
+    message: 'Beer types retrieved successfully',
+    statusCode: 200,
+    payload: beerStyle,
+    success: true,
+  });
+};
+
+const router = createRouter<
+  GetBeerStyleByIdRequest,
+  NextApiResponse<z.infer<typeof APIResponseValidationSchema>>
+>();
+
+router.get(
+  validateRequest({ querySchema: z.object({ id: z.string().cuid() }) }),
+  getBeerStyle,
+);
+
+const handler = router.handler();
+
+export default handler;

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

@@ -0,0 +1,33 @@
+import getBeerStyleById from '@/services/BeerStyles/getBeerStyleById';
+import BeerStyleQueryResult from '@/services/BeerStyles/schema/BeerStyleQueryResult';
+import { GetServerSideProps, NextPage } from 'next';
+import { z } from 'zod';
+
+interface BeerStylePageProps {
+  beerStyle: z.infer<typeof BeerStyleQueryResult>;
+}
+
+const BeerStylePage: NextPage<BeerStylePageProps> = ({ beerStyle }) => {
+  return (
+    <div>
+      <h1>{beerStyle.name}</h1>
+      <p>{beerStyle.description}</p>
+    </div>
+  );
+};
+
+export default BeerStylePage;
+
+export const getServerSideProps: GetServerSideProps<BeerStylePageProps> = async (
+  context,
+) => {
+  const beerStyle = await getBeerStyleById(context.params!.id! as string);
+
+  if (!beerStyle) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return { props: { beerStyle: JSON.parse(JSON.stringify(beerStyle)) } };
+};

src/pages/beers/styles/index.tsx

@@ -38,7 +38,7 @@ const BeerStylePage: NextPage = () => {
           <header className="my-10 flex justify-between lg:flex-row">
             <div>
               <h1 className="text-4xl font-bold lg:text-6xl">The Biergarten App</h1>
-              <h2 className="text-2xl font-bold lg:text-4xl">Types</h2>
+              <h2 className="text-2xl font-bold lg:text-4xl">Styles</h2>
             </div>
           </header>
           <div className="grid gap-6 xl:grid-cols-2">