Rewrote beer by id page comments to load on client

components/BeerById/BeerPostCommentsSection.tsx

@@ -1,37 +1,64 @@
+/* eslint-disable no-nested-ternary */
 import UserContext from '@/contexts/userContext';
-import BeerCommentQueryResult from '@/services/BeerComment/schema/BeerCommentQueryResult';
 
 import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
-import { useRouter } from 'next/router';
+
 import { FC, useContext } from 'react';
 import { z } from 'zod';
+import useBeerPostComments from '@/hooks/useBeerPostComments';
+import { useRouter } from 'next/router';
 import BeerCommentForm from './BeerCommentForm';
 import BeerCommentsPaginationBar from './BeerPostCommentsPaginationBar';
 import CommentCard from './CommentCard';
 
 interface BeerPostCommentsSectionProps {
   beerPost: z.infer<typeof beerPostQueryResult>;
-  comments: z.infer<typeof BeerCommentQueryResult>[];
-  commentsPageCount: number;
 }
 
-const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({
-  beerPost,
+const CommentLoadingCard = () => {
+  return (
+    <div className="card-body h-64">
+      <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-gray-400" />
+          <div className="space-y-2">
+            <div className="h-4 rounded bg-gray-400" />
+            <div className="h-4 w-5/6 rounded bg-gray-400" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
 
-  comments,
-  commentsPageCount,
-}) => {
+const NoCommentsCard = () => {
+  return (
+    <div className="card bg-base-300">
+      <div className="card-body h-64">
+        <div className="flex h-full flex-col items-center justify-center">
+          <span className="text-lg font-bold">No comments yet.</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost }) => {
   const { user } = useContext(UserContext);
   const router = useRouter();
-
   const commentsPageNum = parseInt(router.query.comments_page as string, 10) || 1;
 
+  const { comments, commentsPageCount, isLoading, mutate } = useBeerPostComments({
+    id: beerPost.id,
+    pageNum: commentsPageNum,
+    pageSize: 5,
+  });
   return (
     <div className="w-full space-y-3 md:w-[60%]">
       <div className="card h-96 bg-base-300">
         <div className="card-body h-full">
           {user ? (
-            <BeerCommentForm beerPost={beerPost} />
+            <BeerCommentForm beerPost={beerPost} mutate={mutate} />
           ) : (
             <div className="flex h-full flex-col items-center justify-center">
               <span className="text-lg font-bold">Log in to leave a comment.</span>
@@ -39,10 +66,11 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({
           )}
         </div>
       </div>
-      {comments.length ? (
+
+      {comments && !!commentsPageCount && !isLoading && (
         <div className="card bg-base-300 pb-6">
           {comments.map((comment) => (
-            <CommentCard key={comment.id} comment={comment} beerPostId={beerPost.id} />
+            <CommentCard key={comment.id} comment={comment} mutate={mutate} />
           ))}
 
           <BeerCommentsPaginationBar
@@ -51,11 +79,15 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({
             beerPost={beerPost}
           />
         </div>
-      ) : (
-        <div className="card items-center bg-base-300">
-          <div className="card-body">
-            <span className="text-lg font-bold">No comments yet.</span>
-          </div>
+      )}
+
+      {!comments?.length && !isLoading && <NoCommentsCard />}
+
+      {isLoading && (
+        <div className="card bg-base-300">
+          {Array.from({ length: 5 }).map((_, i) => (
+            <CommentLoadingCard key={i} />
+          ))}
         </div>
       )}
     </div>