From 8981bcb4b84d06590bada56351ed62004591e177 Mon Sep 17 00:00:00 2001
From: Aaron William Po <apo2@uwo.ca>
Date: Sun, 9 Apr 2023 11:25:10 -0400
Subject: [PATCH] Replace useSWR with useSWRInfinite to facilitate infinite
 scrolling

---
 components/BeerById/BeerCommentForm.tsx       |  10 +-
 .../BeerPostCommentsPaginationBar.tsx         |  54 --------
 .../BeerById/BeerPostCommentsSection.tsx      |  38 +++---
 components/BeerById/BeerPostLikeButton.tsx    |  11 +-
 components/BeerById/CommentCardBody.tsx       | 121 +++++++++---------
 components/ui/Navbar.tsx                      |   2 +-
 contexts/userContext.ts                       |   4 +-
 hooks/useBeerPostComments.ts                  |  21 ++-
 pages/beers/[id]/index.tsx                    |  42 +++---
 pages/user/current.tsx                        |   2 +-
 10 files changed, 128 insertions(+), 177 deletions(-)
 delete mode 100644 components/BeerById/BeerPostCommentsPaginationBar.tsx

diff --git a/components/BeerById/BeerCommentForm.tsx b/components/BeerById/BeerCommentForm.tsx
index 9164279..780ceb1 100644
--- a/components/BeerById/BeerCommentForm.tsx
+++ b/components/BeerById/BeerCommentForm.tsx
@@ -8,9 +8,9 @@ import { Rating } from 'react-daisyui';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import { z } from 'zod';
 
-import { KeyedMutator } from 'swr';
-import BeerCommentQueryResult from '@/services/BeerComment/schema/BeerCommentQueryResult';
+
 import { useRouter } from 'next/router';
+import useBeerPostComments from '@/hooks/useBeerPostComments';
 import Button from '../ui/forms/Button';
 import FormError from '../ui/forms/FormError';
 import FormInfo from '../ui/forms/FormInfo';
@@ -18,12 +18,10 @@ import FormLabel from '../ui/forms/FormLabel';
 import FormSegment from '../ui/forms/FormSegment';
 import FormTextArea from '../ui/forms/FormTextArea';
 
+
 interface BeerCommentFormProps {
   beerPost: z.infer<typeof beerPostQueryResult>;
-  mutate: KeyedMutator<{
-    comments: z.infer<typeof BeerCommentQueryResult>[];
-    pageCount: number;
-  }>;
+  mutate: ReturnType<typeof useBeerPostComments>['mutate']
 }
 
 const BeerCommentForm: FunctionComponent<BeerCommentFormProps> = ({
diff --git a/components/BeerById/BeerPostCommentsPaginationBar.tsx b/components/BeerById/BeerPostCommentsPaginationBar.tsx
deleted file mode 100644
index 7bfa8bb..0000000
--- a/components/BeerById/BeerPostCommentsPaginationBar.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { FC } from 'react';
-import Link from 'next/link';
-import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
-import { z } from 'zod';
-
-import { FaArrowLeft, FaArrowRight } from 'react-icons/fa';
-
-interface BeerCommentsPaginationBarProps {
-  commentsPageNum: number;
-  commentsPageCount: number;
-  beerPost: z.infer<typeof beerPostQueryResult>;
-}
-
-const BeerCommentsPaginationBar: FC<BeerCommentsPaginationBarProps> = ({
-  commentsPageNum,
-  commentsPageCount,
-  beerPost,
-}) => (
-  <div className="flex items-center justify-center" id="comments-pagination">
-    <div className="btn-group">
-      <Link
-        className={`btn-ghost btn ${
-          commentsPageNum === 1
-            ? 'btn-disabled pointer-events-none'
-            : 'pointer-events-auto'
-        }`}
-        href={{
-          pathname: `/beers/${beerPost.id}`,
-          query: { comments_page: commentsPageNum - 1 },
-        }}
-        scroll={false}
-      >
-        <FaArrowLeft />
-      </Link>
-      <button className="btn-ghost btn pointer-events-none">{commentsPageNum}</button>
-      <Link
-        className={`btn-ghost btn ${
-          commentsPageNum === commentsPageCount
-            ? 'btn-disabled pointer-events-none'
-            : 'pointer-events-auto'
-        }`}
-        href={{
-          pathname: `/beers/${beerPost.id}`,
-          query: { comments_page: commentsPageNum + 1 },
-        }}
-        scroll={false}
-      >
-        <FaArrowRight />
-      </Link>
-    </div>
-  </div>
-);
-
-export default BeerCommentsPaginationBar;
diff --git a/components/BeerById/BeerPostCommentsSection.tsx b/components/BeerById/BeerPostCommentsSection.tsx
index 1f9d167..a60559e 100644
--- a/components/BeerById/BeerPostCommentsSection.tsx
+++ b/components/BeerById/BeerPostCommentsSection.tsx
@@ -8,7 +8,7 @@ import { z } from 'zod';
 import useBeerPostComments from '@/hooks/useBeerPostComments';
 import { useRouter } from 'next/router';
 import BeerCommentForm from './BeerCommentForm';
-import BeerCommentsPaginationBar from './BeerPostCommentsPaginationBar';
+
 import CommentCardBody from './CommentCardBody';
 import NoCommentsCard from './NoCommentsCard';
 import CommentLoadingCardBody from './CommentLoadingCardBody';
@@ -22,13 +22,14 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost })
   const router = useRouter();
   const { id } = beerPost;
   const pageNum = parseInt(router.query.comments_page as string, 10) || 1;
-  const pageSize = 5;
+  const PAGE_SIZE = 6;
 
-  const { comments, commentsPageCount, isLoading, mutate } = useBeerPostComments({
-    id,
-    pageNum,
-    pageSize,
-  });
+  const { comments, isLoading, mutate, setSize, size, isLoadingMore } =
+    useBeerPostComments({
+      id,
+      pageNum,
+      pageSize: PAGE_SIZE,
+    });
 
   return (
     <div className="w-full space-y-3 md:w-[60%]">
@@ -44,17 +45,20 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost })
         </div>
       </div>
 
-      {comments && !!comments.length && !!commentsPageCount && !isLoading && (
+      {comments && !!comments.length && !isLoading && (
         <div className="card bg-base-300 pb-6">
           {comments.map((comment) => (
             <CommentCardBody key={comment.id} comment={comment} mutate={mutate} />
           ))}
 
-          <BeerCommentsPaginationBar
-            commentsPageNum={pageNum}
-            commentsPageCount={commentsPageCount}
-            beerPost={beerPost}
-          />
+          {isLoadingMore &&
+            Array.from({ length: PAGE_SIZE }).map((_, i) => (
+              <CommentLoadingCardBody key={i} />
+            ))}
+
+          <button type="button" onClick={() => setSize(size + 1)}>
+            load more
+          </button>
         </div>
       )}
 
@@ -62,15 +66,9 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost })
 
       {isLoading && (
         <div className="card bg-base-300 pb-6">
-          {Array.from({ length: pageSize }).map((_, i) => (
+          {Array.from({ length: PAGE_SIZE }).map((_, i) => (
             <CommentLoadingCardBody key={i} />
           ))}
-
-          <BeerCommentsPaginationBar
-            commentsPageNum={pageNum}
-            commentsPageCount={20}
-            beerPost={beerPost}
-          />
         </div>
       )}
     </div>
diff --git a/components/BeerById/BeerPostLikeButton.tsx b/components/BeerById/BeerPostLikeButton.tsx
index 07311ad..68e4285 100644
--- a/components/BeerById/BeerPostLikeButton.tsx
+++ b/components/BeerById/BeerPostLikeButton.tsx
@@ -2,11 +2,13 @@ import useCheckIfUserLikesBeerPost from '@/hooks/useCheckIfUserLikesBeerPost';
 import sendLikeRequest from '@/requests/sendLikeRequest';
 import { FC, useEffect, useState } from 'react';
 import { FaThumbsUp, FaRegThumbsUp } from 'react-icons/fa';
-import { KeyedMutator } from 'swr';
+
+
+import useGetLikeCount from '@/hooks/useGetLikeCount';
 
 const BeerPostLikeButton: FC<{
   beerPostId: string;
-  mutateCount: KeyedMutator<number>;
+  mutateCount: ReturnType<typeof useGetLikeCount>['mutate'];
 }> = ({ beerPostId, mutateCount }) => {
   const { isLiked, mutate: mutateLikeStatus } = useCheckIfUserLikesBeerPost(beerPostId);
   const [loading, setLoading] = useState(true);
@@ -30,9 +32,8 @@ const BeerPostLikeButton: FC<{
   return (
     <button
       type="button"
-      className={`btn gap-2 rounded-2xl ${
-        !isLiked ? 'btn-ghost outline' : 'btn-primary'
-      }`}
+      className={`btn gap-2 rounded-2xl ${!isLiked ? 'btn-ghost outline' : 'btn-primary'
+        }`}
       onClick={() => {
         handleLike();
       }}
diff --git a/components/BeerById/CommentCardBody.tsx b/components/BeerById/CommentCardBody.tsx
index d9864d0..21a7a3b 100644
--- a/components/BeerById/CommentCardBody.tsx
+++ b/components/BeerById/CommentCardBody.tsx
@@ -1,22 +1,21 @@
 import UserContext from '@/contexts/userContext';
+import useBeerPostComments from '@/hooks/useBeerPostComments';
 import useTimeDistance from '@/hooks/useTimeDistance';
 import BeerCommentQueryResult from '@/services/BeerComment/schema/BeerCommentQueryResult';
 import format from 'date-fns/format';
 import Link from 'next/link';
-import { useContext } from 'react';
+import { FC, useContext } from 'react';
 import { Rating } from 'react-daisyui';
 
 import { FaEllipsisH } from 'react-icons/fa';
-import { KeyedMutator } from 'swr';
 import { z } from 'zod';
 
-const CommentCardDropdown: React.FC<{
+interface CommentCardProps {
   comment: z.infer<typeof BeerCommentQueryResult>;
-  mutate: KeyedMutator<{
-    comments: z.infer<typeof BeerCommentQueryResult>[];
-    pageCount: number;
-  }>;
-}> = ({ comment, mutate }) => {
+  mutate: ReturnType<typeof useBeerPostComments>['mutate'];
+}
+
+const CommentCardDropdown: FC<CommentCardProps> = ({ comment, mutate }) => {
   const { user } = useContext(UserContext);
 
   const isCommentOwner = user?.id === comment.postedBy.id;
@@ -42,72 +41,70 @@ const CommentCardDropdown: React.FC<{
         tabIndex={0}
         className="dropdown-content menu rounded-box w-52 bg-base-100 p-2 shadow"
       >
-        {isCommentOwner ? (
-          <li>
+        <li>
+
+
+          {isCommentOwner ? (
+
             <button onClick={handleDelete}>Delete</button>
-          </li>
-        ) : (
-          <li>
+
+          ) : (
+
             <button>Report</button>
-          </li>
-        )}
+
+          )}
+        </li>
       </ul>
     </div>
   );
 };
 
-const CommentCardBody: React.FC<{
-  comment: z.infer<typeof BeerCommentQueryResult>;
+const CommentCardBody: FC<CommentCardProps>
+  = ({ comment, mutate }) => {
+    const { user } = useContext(UserContext);
 
-  mutate: KeyedMutator<{
-    comments: z.infer<typeof BeerCommentQueryResult>[];
-    pageCount: number;
-  }>;
-}> = ({ comment, mutate }) => {
-  const { user } = useContext(UserContext);
+    const timeDistance = useTimeDistance(new Date(comment.createdAt));
 
-  const timeDistance = useTimeDistance(new Date(comment.createdAt));
+    return (
+      <div className="card-body animate-in fade-in-10">
+        <div className="flex flex-col justify-between sm:flex-row">
+          <div>
+            <h3 className="font-semibold sm:text-2xl">
+              <Link href={`/users/${comment.postedBy.id}`} className="link-hover link">
+                {comment.postedBy.username}
+              </Link>
+            </h3>
+            <h4 className="italic">
+              posted{' '}
+              <time
+                className="tooltip tooltip-bottom"
+                data-tip={format(new Date(comment.createdAt), 'MM/dd/yyyy')}
+              >
+                {timeDistance}
+              </time>{' '}
+              ago
+            </h4>
+          </div>
 
-  return (
-    <div className="card-body animate-in fade-in-10">
-      <div className="flex flex-col justify-between sm:flex-row">
-        <div>
-          <h3 className="font-semibold sm:text-2xl">
-            <Link href={`/users/${comment.postedBy.id}`} className="link-hover link">
-              {comment.postedBy.username}
-            </Link>
-          </h3>
-          <h4 className="italic">
-            posted{' '}
-            <time
-              className="tooltip tooltip-bottom"
-              data-tip={format(new Date(comment.createdAt), 'MM/dd/yyyy')}
-            >
-              {timeDistance}
-            </time>{' '}
-            ago
-          </h4>
+          {user && <CommentCardDropdown comment={comment} mutate={mutate} />}
         </div>
 
-        {user && <CommentCardDropdown comment={comment} mutate={mutate} />}
+        <div className="space-y-1">
+          <Rating value={comment.rating}>
+            {Array.from({ length: 5 }).map((val, index) => (
+              <Rating.Item
+                name="rating-1"
+                className="mask mask-star cursor-default"
+                disabled
+                aria-disabled
+                key={index}
+              />
+            ))}
+          </Rating>
+          <p>{comment.content}</p>
+        </div>
       </div>
-
-      <div className="space-y-1">
-        <Rating value={comment.rating}>
-          {Array.from({ length: 5 }).map((val, index) => (
-            <Rating.Item
-              name="rating-1"
-              className="mask mask-star cursor-default"
-              disabled
-              aria-disabled
-              key={index}
-            />
-          ))}
-        </Rating>
-        <p>{comment.content}</p>
-      </div>
-    </div>
-  );
-};
+    );
+  };
 
 export default CommentCardBody;
diff --git a/components/ui/Navbar.tsx b/components/ui/Navbar.tsx
index 47ebece..8a10573 100644
--- a/components/ui/Navbar.tsx
+++ b/components/ui/Navbar.tsx
@@ -68,7 +68,7 @@ const Navbar = () => {
         </ul>
       </div>
       <div className="flex-none lg:hidden">
-        <div className="dropdown-end dropdown">
+        <div className="dropdown dropdown-end">
           <label tabIndex={0} className="btn-ghost btn-circle btn">
             <span className="w-10 rounded-full">
               <svg
diff --git a/contexts/userContext.ts b/contexts/userContext.ts
index 4cdd555..cc6a1f6 100644
--- a/contexts/userContext.ts
+++ b/contexts/userContext.ts
@@ -1,13 +1,13 @@
+import  useUser  from '@/hooks/useUser';
 import GetUserSchema from '@/services/User/schema/GetUserSchema';
 import { createContext } from 'react';
-import { KeyedMutator } from 'swr';
 import { z } from 'zod';
 
 const UserContext = createContext<{
   user?: z.infer<typeof GetUserSchema>;
   error?: unknown;
   isLoading: boolean;
-  mutate?: KeyedMutator<z.infer<typeof GetUserSchema>>;
+  mutate?: ReturnType<typeof useUser>['mutate']
 }>({ isLoading: true });
 
 export default UserContext;
diff --git a/hooks/useBeerPostComments.ts b/hooks/useBeerPostComments.ts
index bbcac7b..690eef6 100644
--- a/hooks/useBeerPostComments.ts
+++ b/hooks/useBeerPostComments.ts
@@ -1,7 +1,7 @@
 import BeerCommentQueryResult from '@/services/BeerComment/schema/BeerCommentQueryResult';
 import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
 import { z } from 'zod';
-import useSWR from 'swr';
+import useSWRInfinite from 'swr/infinite';
 
 interface UseBeerPostCommentsProps {
   pageNum: number;
@@ -20,9 +20,9 @@ interface UseBeerPostCommentsProps {
  *   a boolean indicating if the request is currently loading, and a function to mutate
  *   the data.
  */
-const useBeerPostComments = ({ pageNum, id, pageSize }: UseBeerPostCommentsProps) => {
-  const { data, error, isLoading, mutate } = useSWR(
-    `/api/beers/${id}/comments?page_num=${pageNum}&page_size=${pageSize}`,
+const useBeerPostComments = ({ id, pageSize }: UseBeerPostCommentsProps) => {
+  const { data, error, isLoading, mutate, size, setSize } = useSWRInfinite(
+    (index) => `/api/beers/${id}/comments?page_num=${index + 1}&page_size=${pageSize}`,
     async (url) => {
       const response = await fetch(url);
       const json = await response.json();
@@ -33,6 +33,7 @@ const useBeerPostComments = ({ pageNum, id, pageSize }: UseBeerPostCommentsProps
         throw new Error(parsed.error.message);
       }
       const parsedPayload = z
+
         .array(BeerCommentQueryResult)
         .safeParse(parsed.data.payload);
 
@@ -44,12 +45,20 @@ const useBeerPostComments = ({ pageNum, id, pageSize }: UseBeerPostCommentsProps
       return { comments: parsedPayload.data, pageCount };
     },
   );
+
+  const comments = data?.flatMap((d) => d.comments) ?? [];
+
+  const isLoadingMore =
+    isLoading || (size > 0 && data && typeof data[size - 1] === 'undefined');
+
   return {
-    comments: data?.comments,
-    commentsPageCount: data?.pageCount,
+    comments,
     isLoading,
     error: error as undefined,
     mutate,
+    size,
+    setSize,
+    isLoadingMore,
   };
 };
 
diff --git a/pages/beers/[id]/index.tsx b/pages/beers/[id]/index.tsx
index 877f50f..53bdcb7 100644
--- a/pages/beers/[id]/index.tsx
+++ b/pages/beers/[id]/index.tsx
@@ -25,35 +25,37 @@ interface BeerPageProps {
 
 const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost, beerRecommendations }) => {
   return (
-    <Layout>
+    <>
       <Head>
         <title>{beerPost.name}</title>
         <meta name="description" content={beerPost.description} />
       </Head>
-      <div>
-        {beerPost.beerImages[0] && (
-          <Image
-            alt={beerPost.beerImages[0].alt}
-            src={beerPost.beerImages[0].path}
-            height={1080}
-            width={1920}
-            className="h-[42rem] w-full object-cover"
-          />
-        )}
+      <Layout>
+        <div>
+          {beerPost.beerImages[0] && (
+            <Image
+              alt={beerPost.beerImages[0].alt}
+              src={beerPost.beerImages[0].path}
+              height={1080}
+              width={1920}
+              className="h-[42rem] w-full object-cover"
+            />
+          )}
 
-        <div className="my-12 flex w-full items-center justify-center ">
-          <div className="w-11/12 space-y-3 xl:w-9/12">
-            <BeerInfoHeader beerPost={beerPost} />
-            <div className="mt-4 flex flex-col space-y-3 md:flex-row md:space-x-3 md:space-y-0">
-              <BeerPostCommentsSection beerPost={beerPost} />
-              <div className="md:w-[40%]">
-                <BeerRecommendations beerRecommendations={beerRecommendations} />
+          <div className="my-12 flex w-full items-center justify-center ">
+            <div className="w-11/12 space-y-3 xl:w-9/12">
+              <BeerInfoHeader beerPost={beerPost} />
+              <div className="mt-4 flex flex-col space-y-3 md:flex-row md:space-x-3 md:space-y-0">
+                <BeerPostCommentsSection beerPost={beerPost} />
+                <div className="md:w-[40%]">
+                  <BeerRecommendations beerRecommendations={beerRecommendations} />
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-    </Layout>
+      </Layout>
+    </>
   );
 };
 
diff --git a/pages/user/current.tsx b/pages/user/current.tsx
index 0acf079..7f690ae 100644
--- a/pages/user/current.tsx
+++ b/pages/user/current.tsx
@@ -13,7 +13,7 @@ const ProtectedPage: NextPage = () => {
 
   const isMorning = currentTime > 4 && currentTime < 12;
   const isAfternoon = currentTime > 12 && currentTime < 18;
-  const isEvening = currentTime > 18 && currentTime < 24 || currentTime <4
+  const isEvening = (currentTime > 18 && currentTime < 24) || currentTime < 4;
 
   return (
     <Layout>