From 801a3c8ad3b406392a0807c19b12e3185f212a9e Mon Sep 17 00:00:00 2001
From: Aaron William Po <apo2@uwo.ca>
Date: Sun, 2 Apr 2023 22:10:04 -0400
Subject: [PATCH] Refactor comment cards out of comment section

---
 .../BeerById/BeerPostCommentsSection.tsx      | 48 +++++--------------
 .../{CommentCard.tsx => CommentCardBody.tsx}  |  4 +-
 .../BeerById/CommentLoadingCardBody.tsx       | 17 +++++++
 components/BeerById/NoCommentsCard.tsx        | 13 +++++
 4 files changed, 44 insertions(+), 38 deletions(-)
 rename components/BeerById/{CommentCard.tsx => CommentCardBody.tsx} (97%)
 create mode 100644 components/BeerById/CommentLoadingCardBody.tsx
 create mode 100644 components/BeerById/NoCommentsCard.tsx

diff --git a/components/BeerById/BeerPostCommentsSection.tsx b/components/BeerById/BeerPostCommentsSection.tsx
index 7ece7ae..ae45599 100644
--- a/components/BeerById/BeerPostCommentsSection.tsx
+++ b/components/BeerById/BeerPostCommentsSection.tsx
@@ -9,49 +9,25 @@ import useBeerPostComments from '@/hooks/useBeerPostComments';
 import { useRouter } from 'next/router';
 import BeerCommentForm from './BeerCommentForm';
 import BeerCommentsPaginationBar from './BeerPostCommentsPaginationBar';
-import CommentCard from './CommentCard';
+import CommentCardBody from './CommentCardBody';
+import NoCommentsCard from './NoCommentsCard';
+import CommentLoadingCardBody from './CommentLoadingCardBody';
 
 interface BeerPostCommentsSectionProps {
   beerPost: z.infer<typeof beerPostQueryResult>;
 }
 
-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>
-  );
-};
-
-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 { id } = beerPost;
+  const pageNum = parseInt(router.query.comments_page as string, 10) || 1;
+  const pageSize = 5;
 
   const { comments, commentsPageCount, isLoading, mutate } = useBeerPostComments({
-    id: beerPost.id,
-    pageNum: commentsPageNum,
-    pageSize: 5,
+    id,
+    pageNum,
+    pageSize,
   });
   return (
     <div className="w-full space-y-3 md:w-[60%]">
@@ -70,11 +46,11 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost })
       {comments && !!commentsPageCount && !isLoading && (
         <div className="card bg-base-300 pb-6">
           {comments.map((comment) => (
-            <CommentCard key={comment.id} comment={comment} mutate={mutate} />
+            <CommentCardBody key={comment.id} comment={comment} mutate={mutate} />
           ))}
 
           <BeerCommentsPaginationBar
-            commentsPageNum={commentsPageNum}
+            commentsPageNum={pageNum}
             commentsPageCount={commentsPageCount}
             beerPost={beerPost}
           />
@@ -86,7 +62,7 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost })
       {isLoading && (
         <div className="card bg-base-300">
           {Array.from({ length: 5 }).map((_, i) => (
-            <CommentLoadingCard key={i} />
+            <CommentLoadingCardBody key={i} />
           ))}
         </div>
       )}
diff --git a/components/BeerById/CommentCard.tsx b/components/BeerById/CommentCardBody.tsx
similarity index 97%
rename from components/BeerById/CommentCard.tsx
rename to components/BeerById/CommentCardBody.tsx
index 23e25fa..fd27e5b 100644
--- a/components/BeerById/CommentCard.tsx
+++ b/components/BeerById/CommentCardBody.tsx
@@ -55,7 +55,7 @@ const CommentCardDropdown: React.FC<{
   );
 };
 
-const CommentCard: React.FC<{
+const CommentCardBody: React.FC<{
   comment: z.infer<typeof BeerCommentQueryResult>;
 
   mutate: KeyedMutator<{
@@ -112,4 +112,4 @@ const CommentCard: React.FC<{
   );
 };
 
-export default CommentCard;
+export default CommentCardBody;
diff --git a/components/BeerById/CommentLoadingCardBody.tsx b/components/BeerById/CommentLoadingCardBody.tsx
new file mode 100644
index 0000000..fa3c6e2
--- /dev/null
+++ b/components/BeerById/CommentLoadingCardBody.tsx
@@ -0,0 +1,17 @@
+const CommentLoadingCardBody = () => {
+  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-base-200" />
+          <div className="space-y-2">
+            <div className="h-4 rounded bg-base-200" />
+            <div className="h-4 w-5/6 rounded bg-base-200" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CommentLoadingCardBody;
diff --git a/components/BeerById/NoCommentsCard.tsx b/components/BeerById/NoCommentsCard.tsx
new file mode 100644
index 0000000..783bcd9
--- /dev/null
+++ b/components/BeerById/NoCommentsCard.tsx
@@ -0,0 +1,13 @@
+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>
+  );
+};
+
+export default NoCommentsCard;