From e2387beaa3631694ef42042dc1ac20f949b4c560 Mon Sep 17 00:00:00 2001
From: Ryan Freeman <hello@ryanfreeman.dev>
Date: Sat, 5 Apr 2025 19:10:21 +0100
Subject: [PATCH] Update comments component

---
 components/ui/Comments.tsx | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/components/ui/Comments.tsx b/components/ui/Comments.tsx
index 249889a..a71bc75 100644
--- a/components/ui/Comments.tsx
+++ b/components/ui/Comments.tsx
@@ -52,13 +52,10 @@ Comments.ReplyButton = function ReplyButton({comment}: ReplyButton) {
     )
 }
 
-Comments.Comment = function Comment({comment, children, isReply = false}: {
+Comments.Comment = function Comment({comment, isReply = false}: {
     comment: Comment,
-    children?: ReactNode,
     isReply?: boolean
 }) {
-    const {data: session} = useSession()
-
     return (
         <>
             <article
@@ -78,7 +75,6 @@ Comments.Comment = function Comment({comment, children, isReply = false}: {
                     <Comments.ReplyButton comment={comment}/>
                 </div>
             </article>
-            {children}
         </>
     )
 }
@@ -96,11 +92,14 @@ Comments.List = function List({comments}: CommentsListProps) {
                         Comments
                     </h3>
                     {comments.map((comment) => (
-                        <Comments.Comment key={comment.id} comment={comment}>
-                            {comment.replies && comment.replies.map(reply => (
-                                <Comments.Comment key={reply.id} comment={reply} isReply={true}/>
-                            ))}
-                        </Comments.Comment>
+                        <React.Fragment key={comment.id}>
+                            <Comments.Comment comment={comment}/>
+                            {(typeof comment.replies !== 'undefined' && comment.replies.length > 0) ?
+                                comment.replies.map(reply => (
+                                    <Comments.Comment key={reply.id} comment={reply} isReply={true}/>
+                                )) : null
+                            }
+                        </React.Fragment>
                     ))}
                 </section>
             }