From 7deed83dbb8835727c743662bee776794d460e74 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 27 Dec 2021 11:12:47 +0100
Subject: chore: display comments as a tree

I was displaying comments without the parent/children link. Now, each
child is displayed under its parent. I also remove the reply button for
children to avoid too many child depth.
---
 src/components/Comment/Comment.tsx | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

(limited to 'src/components/Comment/Comment.tsx')

diff --git a/src/components/Comment/Comment.tsx b/src/components/Comment/Comment.tsx
index ad6875c..7214abe 100644
--- a/src/components/Comment/Comment.tsx
+++ b/src/components/Comment/Comment.tsx
@@ -6,16 +6,22 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import styles from './Comment.module.scss';
 
-const Comment = ({ comment }: { comment: CommentData }) => {
+const Comment = ({
+  comment,
+  isNested = false,
+}: {
+  comment: CommentData;
+  isNested?: boolean;
+}) => {
   const router = useRouter();
 
   const getCommentAuthor = () => {
     return comment.author.url ? (
       <Link href={comment.author.url}>
-        <a>{comment.author.name}</a>
+        <a className={styles.author}>{comment.author.name}</a>
       </Link>
     ) : (
-      <span>{comment.author.name}</span>
+      <span className={styles.author}>{comment.author.name}</span>
     );
   };
 
@@ -59,14 +65,16 @@ const Comment = ({ comment }: { comment: CommentData }) => {
             className={styles.body}
             dangerouslySetInnerHTML={{ __html: comment.content }}
           ></div>
-          <footer className={styles.footer}>
-            <Button clickHandler={() => ''}>{t`Reply`}</Button>
-          </footer>
+          {!isNested && (
+            <footer className={styles.footer}>
+              <Button clickHandler={() => ''}>{t`Reply`}</Button>
+            </footer>
+          )}
         </article>
         {comment.replies.length > 0 && (
           <ol className={styles.list}>
             {comment.replies.map((reply) => {
-              return <Comment key={reply.id} comment={reply} />;
+              return <Comment key={reply.id} comment={reply} isNested={true} />;
             })}
           </ol>
         )}
-- 
cgit v1.2.3