Merge pull request #25 from aaronpo97/beer-infinite-scroll

Feature: Add infinite scrolling to beer index page

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/components/BeerById/BeerPostLikeButton.tsx

@@ -20,8 +20,8 @@ const BeerPostLikeButton: FC<{
     try {
       setLoading(true);
       await sendLikeRequest(beerPostId);
-      await mutateCount();
+
-      await mutateLikeStatus();
+      await Promise.all([mutateCount(), mutateLikeStatus()]);
       setLoading(false);
     } catch (e) {
       setLoading(false);

src/components/BeerIndex/BeerCard.tsx

@@ -1,13 +1,19 @@
 import Link from 'next/link';
-import { FC } from 'react';
+import { FC, useContext } from 'react';
 import Image from 'next/image';
 import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
 import { z } from 'zod';
+import UserContext from '@/contexts/userContext';
+import useGetLikeCount from '@/hooks/useGetLikeCount';
+import BeerPostLikeButton from '../BeerById/BeerPostLikeButton';
 
 const BeerCard: FC<{ post: z.infer<typeof beerPostQueryResult> }> = ({ post }) => {
+  const { user } = useContext(UserContext);
+  const { mutate, likeCount } = useGetLikeCount(post.id);
+
   return (
-    <div className="card bg-base-300" key={post.id}>
+    <div className="card card-compact bg-base-300" key={post.id}>
-      <figure className="card-image h-96">
+      <figure className="h-96">
         {post.beerImages.length > 0 && (
           <Image
             src={post.beerImages[0].path}
@@ -18,12 +24,31 @@ const BeerCard: FC<{ post: z.infer<typeof beerPostQueryResult> }> = ({ post }) =
         )}
       </figure>
 
-      <div className="card-body space-y-3">
+      <div className="card-body justify-between">
-        <div>
+        <div className="space-y-1">
-          <h2 className="text-3xl font-bold">
+          <Link href={`/beers/${post.id}`}>
-            <Link href={`/beers/${post.id}`}>{post.name}</Link>
+            <h2 className="link-hover link truncate text-2xl font-bold lg:text-3xl">
+              {post.name}
             </h2>
-          <h3 className="text-xl font-semibold">{post.brewery.name}</h3>
+          </Link>
+          <Link href={`/breweries/${post.brewery.id}`}>
+            <h3 className="text-md link-hover link truncate lg:text-xl">
+              {post.brewery.name}
+            </h3>
+          </Link>
+        </div>
+        <div>
+          <div>
+            <p className="text-md lg:text-xl">{post.type.name}</p>
+            <div className="space-x-3">
+              <span className="text-sm lg:text-lg">{post.abv}% ABV</span>
+              <span className="text-sm lg:text-lg">{post.ibu} IBU</span>
+            </div>
+          </div>
+          <div className="flex justify-between">
+            liked by {likeCount} users
+            {user && <BeerPostLikeButton beerPostId={post.id} mutateCount={mutate} />}
+          </div>
         </div>
       </div>
     </div>

src/components/BeerIndex/BeerPostLoadingCard.tsx

@@ -0,0 +1,26 @@
+import { FC } from 'react';
+
+const BeerPostLoadingCard: FC = () => {
+  return (
+    <div className="card bg-base-300">
+      <figure className="h-96 border-8 border-base-300 bg-base-300">
+        <div className="h-full w-full animate-pulse rounded-md bg-base-100" />
+      </figure>
+      <div className="card-body h-52">
+        <div className="flex animate-pulse space-x-4">
+          <div className="flex-1 space-y-4 py-1">
+            <div className="h-4 w-3/4 rounded bg-base-100" />
+            <div className="space-y-2">
+              <div className="h-4 rounded bg-base-100" />
+              <div className="h-4 w-5/6 rounded bg-base-100" />
+              <div className="h-4 w-5/6 rounded bg-base-100" />
+              <div className="h-4 rounded bg-base-100" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BeerPostLoadingCard;

src/hooks/useBeerPosts.ts

@@ -0,0 +1,62 @@
+import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import useSWRInfinite from 'swr/infinite';
+import { z } from 'zod';
+
+/**
+ * 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) {
+      throw new Error(response.statusText);
+    }
+
+    const json = await response.json();
+    const count = response.headers.get('X-Total-Count');
+
+    const parsed = APIResponseValidationSchema.safeParse(json);
+    if (!parsed.success) {
+      throw new Error('API response validation failed');
+    }
+
+    const parsedPayload = z.array(beerPostQueryResult).safeParse(parsed.data.payload);
+    if (!parsedPayload.success) {
+      throw new Error('API response validation failed');
+    }
+
+    const pageCount = Math.ceil(parseInt(count as string, 10) / pageSize);
+    return {
+      beerPosts: parsedPayload.data,
+      pageCount,
+    };
+  };
+
+  const { data, error, isLoading, setSize, size } = useSWRInfinite(
+    (index) => `/api/beers?pageNum=${index + 1}&pageSize=${pageSize}`,
+    fetcher,
+  );
+
+  const beerPosts = data?.flatMap((d) => d.beerPosts) ?? [];
+  const pageCount = data?.[0].pageCount ?? 0;
+  const isLoadingMore = size > 0 && data && typeof data[size - 1] === 'undefined';
+  const isAtEnd = !(size < data?.[0].pageCount!);
+
+  return {
+    beerPosts,
+    pageCount,
+    size,
+    setSize,
+    isLoading,
+    isLoadingMore,
+    isAtEnd,
+    error: error as unknown,
+  };
+};
+
+export default useBeerPosts;

src/pages/api/beers/index.ts

@@ -0,0 +1,54 @@
+import validateRequest from '@/config/nextConnect/middleware/validateRequest';
+import DBClient from '@/prisma/DBClient';
+import getAllBeerPosts from '@/services/BeerPost/getAllBeerPosts';
+
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import { NextApiRequest, NextApiResponse } from 'next';
+import { createRouter } from 'next-connect';
+import { z } from 'zod';
+
+interface GetBeerPostsRequest extends NextApiRequest {
+  query: {
+    pageNum: string;
+    pageSize: string;
+  };
+}
+
+const getBeerPosts = async (
+  req: GetBeerPostsRequest,
+  res: NextApiResponse<z.infer<typeof APIResponseValidationSchema>>,
+) => {
+  const pageNum = parseInt(req.query.pageNum, 10);
+  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',
+    statusCode: 200,
+    payload: beerPosts,
+    success: true,
+  });
+};
+
+const router = createRouter<
+  GetBeerPostsRequest,
+  NextApiResponse<z.infer<typeof APIResponseValidationSchema>>
+>();
+
+router.get(
+  validateRequest({
+    querySchema: z.object({
+      pageNum: z.string().regex(/^\d+$/),
+      pageSize: z.string().regex(/^\d+$/),
+    }),
+  }),
+  getBeerPosts,
+);
+
+const handler = router.handler();
+
+export default handler;

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

@@ -1,44 +1,47 @@
-import { GetServerSideProps, NextPage } from 'next';
+import { NextPage } from 'next';
-import getAllBeerPosts from '@/services/BeerPost/getAllBeerPosts';
-
-import { useRouter } from 'next/router';
-import DBClient from '@/prisma/DBClient';
 import Layout from '@/components/ui/Layout';
-import BeerIndexPaginationBar from '@/components/BeerIndex/BeerIndexPaginationBar';
 import BeerCard from '@/components/BeerIndex/BeerCard';
-import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
 import Head from 'next/head';
-import { z } from 'zod';
 import Link from 'next/link';
 import UserContext from '@/contexts/userContext';
-import { useContext } from 'react';
+import { MutableRefObject, useContext, useRef } from 'react';
 
-interface BeerPageProps {
+import { useInView } from 'react-intersection-observer';
-  initialBeerPosts: z.infer<typeof beerPostQueryResult>[];
+import Spinner from '@/components/ui/Spinner';
-  pageCount: number;
-}
 
-const BeerPage: NextPage<BeerPageProps> = ({ initialBeerPosts, pageCount }) => {
+import useBeerPosts from '@/hooks/useBeerPosts';
-  const router = useRouter();
+import BeerPostLoadingCard from '@/components/BeerIndex/BeerPostLoadingCard';
-  const { query } = router;
+import { FaArrowUp } from 'react-icons/fa';
 
+const BeerPage: NextPage = () => {
   const { user } = useContext(UserContext);
 
-  const pageNum = parseInt(query.page_num as string, 10) || 1;
+  const PAGE_SIZE = 2;
+
+  const { beerPosts, setSize, size, isLoading, isLoadingMore, isAtEnd } = useBeerPosts({
+    pageSize: PAGE_SIZE,
+  });
+
+  const { ref: lastBeerPostRef } = useInView({
+    onChange: (visible) => {
+      if (!visible || isAtEnd) return;
+      setSize(size + 1);
+    },
+  });
+
+  const pageRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
+
   return (
     <Layout>
       <Head>
         <title>Beer</title>
         <meta name="description" content="Beer posts" />
       </Head>
-      <div className="flex items-center justify-center bg-base-100">
+      <div className="flex items-center justify-center bg-base-100" ref={pageRef}>
-        <div className="my-10 flex w-10/12 flex-col space-y-4">
+        <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>
-              <h2 className="text-2xl font-bold">
-                Page {pageNum} of {pageCount}
-              </h2>
             </div>
             {!!user && (
               <div>
@@ -48,31 +51,61 @@ const BeerPage: NextPage<BeerPageProps> = ({ initialBeerPosts, pageCount }) => {
               </div>
             )}
           </header>
-          <div className="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
+          <div className="grid gap-6 xl:grid-cols-2">
-            {initialBeerPosts.map((post) => {
+            {!!beerPosts.length && !isLoading && (
-              return <BeerCard post={post} key={post.id} />;
+              <>
+                {beerPosts.map((beerPost, i) => {
+                  return (
+                    <div
+                      key={beerPost.id}
+                      ref={beerPosts.length === i + 1 ? lastBeerPostRef : undefined}
+                    >
+                      <BeerCard post={beerPost} />
+                    </div>
+                  );
                 })}
+              </>
+            )}
+            {(isLoading || isLoadingMore) && (
+              <>
+                {Array.from({ length: PAGE_SIZE }, (_, i) => (
+                  <BeerPostLoadingCard key={i} />
+                ))}
+              </>
+            )}
           </div>
-          <div className="flex justify-center">
+
-            <BeerIndexPaginationBar pageNum={pageNum} pageCount={pageCount} />
+          {(isLoading || isLoadingMore) && (
+            <div className="flex h-32 w-full items-center justify-center">
+              <Spinner size="sm" />
             </div>
+          )}
+
+          {isAtEnd && !isLoading && (
+            <div className="flex h-20 items-center justify-center text-center">
+              <div
+                className="tooltip tooltip-bottom"
+                data-tip="Scroll back to top of page."
+              >
+                <button
+                  type="button"
+                  className="btn-ghost btn-sm btn"
+                  aria-label="Scroll back to top of page."
+                  onClick={() => {
+                    pageRef.current?.scrollIntoView({
+                      behavior: 'smooth',
+                    });
+                  }}
+                >
+                  <FaArrowUp />
+                </button>
+              </div>
+            </div>
+          )}
         </div>
       </div>
     </Layout>
   );
 };
 
-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 {
-    props: { initialBeerPosts: JSON.parse(JSON.stringify(beerPosts)), pageCount },
-  };
-};
-
 export default BeerPage;

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 };
 

src/styles/globals.css

@@ -3,5 +3,5 @@
 @tailwind utilities;
 
 .card {
-    @apply shadow-md
+    @apply shadow-md card-compact bg-base-300
 }

tailwind.config.js

@@ -12,7 +12,7 @@ const darkTheme = {
     warning: 'hsl(50, 98%, 50%)',
     'primary-content': 'hsl(0, 0%, 98%)',
     'error-content': 'hsl(0, 0%, 98%)',
-    'base-100': 'hsl(190, 4%, 9%)',
+    'base-100': 'hsl(190, 4%, 11%)',
     'base-200': 'hsl(190, 4%, 8%)',
     'base-300': 'hsl(190, 4%, 5%)',
   },
@@ -28,11 +28,11 @@ const pastelTheme = {
     info: 'hsl(163, 40%, 79%)',
     success: 'hsl(93, 27%, 73%)',
     warning: 'hsl(40, 76%, 73%)',
-    'primary-content': 'hsl(0, 0%, 12%)',
+    'primary-content': 'hsl(0, 0%, 0%)',
-    'error-content': 'hsl(0, 0%, 12%)',
+    'error-content': 'hsl(0, 0%, 0%)',
-    'base-100': 'hsl(0, 0%, 85%)',
+    'base-100': 'hsl(0, 0%, 94%)',
-    'base-200': 'hsl(0, 0%, 82%)',
+    'base-200': 'hsl(0, 0%, 90%)',
-    'base-300': 'hsl(0, 0%, 78%)',
+    'base-300': 'hsl(0, 0%, 85%)',
   },
 };