Replace useSWR with useSWRInfinite to facilitate infinite scrolling

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;