Refactor api requests and components out of pages

pages/beers/index.tsx

@@ -1,75 +1,18 @@
 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/DBClient';
-import Layout from '@/components/Layout';
-import { FC } from 'react';
-import Image from 'next/image';
+import Layout from '@/components/ui/Layout';
+import Pagination from '../../components/BeerIndex/Pagination';
+import BeerCard from '../../components/BeerIndex/BeerCard';
 
 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 bg-base-300" key={post.id}>
-      <figure className="card-image h-96">
-        {post.beerImages.length > 0 && (
-          <Image src={post.beerImages[0].url} alt={post.name} width="1029" height="110" />
-        )}
-      </figure>
-
-      <div className="card-body 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;
@@ -93,13 +36,10 @@ const BeerPage: NextPage<BeerPageProps> = ({ initialBeerPosts, pageCount }) => {
 
 export const getServerSideProps: GetServerSideProps<BeerPageProps> = async (context) => {
   const { query } = context;
-
   const pageNumber = parseInt(query.page_num as string, 10) || 1;
-
   const pageSize = 12;
   const numberOfPosts = await DBClient.instance.beerPost.count();
   const pageCount = numberOfPosts ? Math.ceil(numberOfPosts / pageSize) : 0;
-
   const beerPosts = await getAllBeerPosts(pageNumber, pageSize);
 
   return {