Add page count to api route header, update docs

package.json

@@ -8,7 +8,7 @@
     "start": "next start",
     "lint": "next lint",
     "format": "npx prettier . --write",
-    "seed": "npx ts-node ./prisma/seed/index.ts"
+    "seed": "npx ts-node ./src/prisma/seed/index.ts"
   },
   "dependencies": {
     "@hapi/iron": "^7.0.1",

src/hooks/useBeerPosts.ts

@@ -3,7 +3,14 @@ import APIResponseValidationSchema from '@/validation/APIResponseValidationSchem
 import useSWRInfinite from 'swr/infinite';
 import { z } from 'zod';
 
-const useGetBeerPosts = ({ pageSize }: { pageSize: number }) => {
+/**
+ * A custom hook using SWR to fetch beer posts from the API.
+ *
+ * @param options The options to use when fetching beer posts.
+ * @param options.pageSize The number of beer posts to fetch per page.
+ * @returns An object containing the beer posts, page count, and loading state.
+ */
+const useBeerPosts = ({ pageSize }: { pageSize: number }) => {
   const fetcher = async (url: string) => {
     const response = await fetch(url);
     if (!response.ok) {
@@ -37,8 +44,7 @@ const useGetBeerPosts = ({ pageSize }: { pageSize: number }) => {
 
   const beerPosts = data?.flatMap((d) => d.beerPosts) ?? [];
   const pageCount = data?.[0].pageCount ?? 0;
-  const isLoadingMore =
-    isLoading || (size > 0 && data && typeof data[size - 1] === 'undefined');
+  const isLoadingMore = size > 0 && data && typeof data[size - 1] === 'undefined';
   const isAtEnd = !(size < data?.[0].pageCount!);
 
   return {
@@ -53,4 +59,4 @@ const useGetBeerPosts = ({ pageSize }: { pageSize: number }) => {
   };
 };
 
-export default useGetBeerPosts;
+export default useBeerPosts;

src/pages/api/beers/index.ts

@@ -1,4 +1,5 @@
 import validateRequest from '@/config/nextConnect/middleware/validateRequest';
+import DBClient from '@/prisma/DBClient';
 import getAllBeerPosts from '@/services/BeerPost/getAllBeerPosts';
 
 import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
@@ -21,6 +22,9 @@ const getBeerPosts = async (
   const pageSize = parseInt(req.query.pageSize, 10);
 
   const beerPosts = await getAllBeerPosts(pageNum, pageSize);
+  const beerPostCount = await DBClient.instance.beerPost.count();
+
+  res.setHeader('X-Total-Count', beerPostCount);
 
   res.status(200).json({
     message: 'Beer posts retrieved successfully',

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

@@ -61,7 +61,7 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost, beerRecommendations }
           </Carousel>
 
           <div className="mb-12 mt-10 flex w-full items-center justify-center ">
-            <div className="w-11/12 space-y-3 xl:w-9/12">
+            <div className="w-11/12 space-y-3 xl:w-9/12 2xl:w-8/12">
               <BeerInfoHeader beerPost={beerPost} />
 
               {isDesktop ? (

src/pages/beers/index.tsx

@@ -8,24 +8,23 @@ import { MutableRefObject, useContext, useRef } from 'react';
 
 import { useInView } from 'react-intersection-observer';
 import Spinner from '@/components/ui/Spinner';
-import useMediaQuery from '@/hooks/useMediaQuery';
-import useGetBeerPosts from '@/hooks/useGetBeerPosts';
+
+import useBeerPosts from '@/hooks/useBeerPosts';
 import BeerPostLoadingCard from '@/components/BeerIndex/BeerPostLoadingCard';
 import { FaArrowUp } from 'react-icons/fa';
 
 const BeerPage: NextPage = () => {
   const { user } = useContext(UserContext);
 
-  const isDesktop = useMediaQuery('(min-width: 1024px)');
-  const PAGE_SIZE = isDesktop ? 3 : 1;
+  const PAGE_SIZE = 2;
 
-  const { beerPosts, setSize, size, isLoading, isLoadingMore, isAtEnd } = useGetBeerPosts(
-    { pageSize: PAGE_SIZE },
-  );
+  const { beerPosts, setSize, size, isLoading, isLoadingMore, isAtEnd } = useBeerPosts({
+    pageSize: PAGE_SIZE,
+  });
 
   const { ref: lastBeerPostRef } = useInView({
     onChange: (visible) => {
-      if (!visible) return;
+      if (!visible || isAtEnd) return;
       setSize(size + 1);
     },
   });
@@ -39,7 +38,7 @@ const BeerPage: NextPage = () => {
         <meta name="description" content="Beer posts" />
       </Head>
       <div className="flex items-center justify-center bg-base-100" ref={pageRef}>
-        <div className="my-10 flex w-11/12 flex-col space-y-4 lg:w-8/12">
+        <div className="my-10 flex w-11/12 flex-col space-y-4 lg:w-8/12 2xl:w-7/12">
           <header className="my-10 flex justify-between">
             <div className="space-y-2">
               <h1 className="text-6xl font-bold">The Biergarten Index</h1>
@@ -52,7 +51,7 @@ const BeerPage: NextPage = () => {
               </div>
             )}
           </header>
-          <div className="grid gap-6 xl:grid-cols-2 2xl:grid-cols-3">
+          <div className="grid gap-6 xl:grid-cols-2">
             {!!beerPosts.length && !isLoading && (
               <>
                 {beerPosts.map((beerPost, i) => {
@@ -67,7 +66,7 @@ const BeerPage: NextPage = () => {
                 })}
               </>
             )}
-            {isLoadingMore && (
+            {(isLoading || isLoadingMore) && (
               <>
                 {Array.from({ length: PAGE_SIZE }, (_, i) => (
                   <BeerPostLoadingCard key={i} />
@@ -76,13 +75,13 @@ const BeerPage: NextPage = () => {
             )}
           </div>
 
-          {isLoadingMore && (
-            <div className="mt-1 flex h-52 w-full items-center justify-center">
-              <Spinner size={isDesktop ? 'lg' : 'md'} />
+          {(isLoading || isLoadingMore) && (
+            <div className="flex h-32 w-full items-center justify-center">
+              <Spinner size="sm" />
             </div>
           )}
 
-          {!isLoadingMore && isAtEnd && (
+          {isAtEnd && !isLoading && (
             <div className="flex h-20 items-center justify-center text-center">
               <div
                 className="tooltip tooltip-bottom"

src/prisma/DBClient.ts

@@ -1,5 +1,5 @@
 import { PrismaClient } from '@prisma/client';
-import { NODE_ENV } from '@/config/env';
+import { NODE_ENV } from '../config/env';
 
 const globalForPrisma = global as unknown as { prisma: PrismaClient };