Add beer post, brewery post GET service and page

Add prettier, eslint config

pages/_app.tsx

@@ -1,6 +1,6 @@
-import '@/styles/globals.css'
-import type { AppProps } from 'next/app'
+import '@/styles/globals.css';
+import type { AppProps } from 'next/app';
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }

pages/_document.tsx

@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from 'next/document';
 
 export default function Document() {
   return (
@@ -9,5 +9,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }

pages/api/hello.ts

@@ -1,10 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from "next";
-
-type Data = {
-   name: string;
-};
-
-export default function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
-   res.status(200).json({ name: "John Doe" });
-}

pages/beers/[id].tsx

@@ -0,0 +1,27 @@
+import { GetServerSideProps, NextPage } from 'next';
+import BeerPostQueryResult from '@/services/BeerPost/types/BeerPostQueryResult';
+import getBeerPostById from '@/services/BeerPost/getBeerPostById';
+import Layout from '@/components/Layout';
+
+interface BeerPageProps {
+  beerPost: BeerPostQueryResult;
+}
+
+const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost }) => {
+  return (
+    <Layout>
+      <main>
+        <h1 className="text-3xl font-bold underline">{beerPost.name}</h1>
+      </main>
+    </Layout>
+  );
+};
+
+export const getServerSideProps: GetServerSideProps<BeerPageProps> = async (context) => {
+  const beerPost = await getBeerPostById(context.params!.id! as string);
+  return !beerPost
+    ? { notFound: true }
+    : { props: { beerPost: JSON.parse(JSON.stringify(beerPost)) } };
+};
+
+export default BeerByIdPage;

pages/beers/index.tsx

@@ -0,0 +1,104 @@
+import { GetServerSideProps, NextPage } from 'next';
+import getAllBeerPosts from '@/services/BeerPost/getAllBeerPosts';
+import BeerPostQueryResult from '@/services/BeerPost/types/BeerPostQueryResult';
+import Link from 'next/link';
+
+import { useRouter } from 'next/router';
+import DBClient from '@/prisma/client';
+import Layout from '@/components/Layout';
+import { FC } from 'react';
+
+interface BeerPageProps {
+  initialBeerPosts: BeerPostQueryResult[];
+  pageCount: number;
+}
+
+interface PaginationProps {
+  pageNum: number;
+  pageCount: number;
+}
+
+const Pagination: FC<PaginationProps> = ({ pageCount, pageNum }) => {
+  const router = useRouter();
+
+  return (
+    <div className="btn-group">
+      <button
+        className="btn"
+        disabled={pageNum <= 1}
+        onClick={async () =>
+          router.push({ pathname: '/beers', query: { page_num: pageNum - 1 } })
+        }
+      >
+        «
+      </button>
+      <button className="btn">Page {pageNum}</button>
+      <button
+        className="btn"
+        disabled={pageNum >= pageCount}
+        onClick={async () =>
+          router.push({ pathname: '/beers', query: { page_num: pageNum + 1 } })
+        }
+      >
+        »
+      </button>
+    </div>
+  );
+};
+
+const BeerCard: FC<{ post: BeerPostQueryResult }> = ({ post }) => {
+  return (
+    <div className="card h-52 bg-base-200 p-6" key={post.id}>
+      <div className="card-content space-y-3">
+        <div>
+          <h2 className="text-3xl font-bold">
+            <Link href={`/beers/${post.id}`}>{post.name}</Link>
+          </h2>
+          <h3 className="text-xl font-semibold">{post.brewery.name}</h3>
+        </div>
+        <div>
+          <p>{post.description}</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+const BeerPage: NextPage<BeerPageProps> = ({ initialBeerPosts, pageCount }) => {
+  const router = useRouter();
+  const { query } = router;
+
+  const pageNum = parseInt(query.page_num as string, 10) || 1;
+  return (
+    <Layout>
+      <div className="flex items-center justify-center">
+        <main className="mt-10 flex w-8/12 flex-col space-y-4">
+          <h1 className="card-title text-5xl font-bold">Beer Posts</h1>
+          <div className="space-y-4">
+            {initialBeerPosts.map((post) => {
+              return <BeerCard post={post} key={post.id} />;
+            })}
+          </div>
+          <Pagination pageNum={pageNum} pageCount={pageCount} />
+        </main>
+      </div>
+    </Layout>
+  );
+};
+
+export const getServerSideProps: GetServerSideProps<BeerPageProps> = async (context) => {
+  const { query } = context;
+
+  const pageNumber = parseInt(query.page_num as string, 10) || 1;
+
+  const pageSize = 9;
+  const numberOfPosts = await DBClient.instance.beerPost.count();
+  const pageCount = numberOfPosts ? Math.ceil(numberOfPosts / pageSize) : 0;
+
+  const beerPosts = await getAllBeerPosts(pageNumber, pageSize);
+
+  return {
+    props: { initialBeerPosts: JSON.parse(JSON.stringify(beerPosts)), pageCount },
+  };
+};
+
+export default BeerPage;

pages/breweries/[id].tsx

@@ -0,0 +1,26 @@
+import { GetServerSideProps, NextPage } from 'next';
+import BeerPostQueryResult from '@/services/BeerPost/types/BeerPostQueryResult';
+import getBreweryPostById from '@/services/BreweryPost/getBreweryPostById';
+
+interface BreweryPageProps {
+  breweryPost: BeerPostQueryResult;
+}
+
+const BreweryByIdPage: NextPage<BreweryPageProps> = ({ breweryPost }) => {
+  return (
+    <>
+      <h1 className="text-3xl font-bold underline">{breweryPost.name}</h1>
+    </>
+  );
+};
+
+export const getServerSideProps: GetServerSideProps<BreweryPageProps> = async (
+  context,
+) => {
+  const breweryPost = await getBreweryPostById(context.params!.id! as string);
+  return !breweryPost
+    ? { notFound: true }
+    : { props: { breweryPost: JSON.parse(JSON.stringify(breweryPost)) } };
+};
+
+export default BreweryByIdPage;

pages/breweries/index.tsx

@@ -0,0 +1,35 @@
+import { GetServerSideProps, NextPage } from 'next';
+
+import Link from 'next/link';
+import getAllBreweryPosts from '@/services/BreweryPost/getAllBreweryPosts';
+import GetAllBreweryPostsQueryResult from '@/services/BreweryPost/types/BreweryPostQueryResult';
+
+interface BreweryPageProps {
+  breweryPosts: GetAllBreweryPostsQueryResult[];
+}
+
+const BreweryPage: NextPage<BreweryPageProps> = ({ breweryPosts }) => {
+  return (
+    <>
+      <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>
+        );
+      })}
+    </>
+  );
+};
+
+export const getServerSideProps: GetServerSideProps<BreweryPageProps> = async () => {
+  const breweryPosts = await getAllBreweryPosts();
+  return {
+    props: { breweryPosts: JSON.parse(JSON.stringify(breweryPosts)) },
+  };
+};
+
+export default BreweryPage;

pages/index.tsx

@@ -1,24 +1,7 @@
-import { PrismaClient } from "@prisma/client";
-import type { BeerPost } from "@prisma/client";
-import { GetServerSideProps, NextPage } from "next";
+import { NextPage } from 'next';
 
-export const getServerSideProps: GetServerSideProps<{}> = async () => {
-   const prisma = new PrismaClient();
-   const beerPosts = await prisma.beerPost.findMany();
-
-   return {
-      props: {
-         beerPosts,
-      },
-   };
-};
-
-interface HomePageProps {
-   beerPosts: BeerPost[];
-}
-const Home: NextPage<HomePageProps> = ({ beerPosts }) => {
-   console.log(beerPosts);
-   return <h1 className="text-3xl font-bold underline">Hello world!</h1>;
+const Home: NextPage = () => {
+  return <h1 className="text-3xl font-bold underline">Hello world!</h1>;
 };
 
 export default Home;