refactor(components): rewrite CommentsList component

* use ApprovedCommentProps to make CommentData type
* add the author name of the parent on reply form heading
* add tests

1 files changed, 15 insertions, 1 deletions

diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index 449af8d..d35541a 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -17,6 +17,7 @@ import {
   Spinner,
   type MetaItemData,
   Time,
+  type CommentData,
 } from '../../components';
 import {
   getAllArticlesSlugs,
@@ -64,6 +65,19 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
     contentId: article?.id,
     fallback: comments,
   });
+
+  const getComments = (data?: SingleComment[]) =>
+    data?.map((comment): CommentData => {
+      return {
+        author: comment.meta.author,
+        content: comment.content,
+        id: comment.id,
+        isApproved: comment.approved,
+        publicationDate: comment.meta.date,
+        replies: getComments(comment.replies),
+      };
+    });
+
   const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
     title: article?.title ?? '',
     url: `${ROUTES.ARTICLE}/${slug}`,
@@ -313,7 +327,7 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
         bodyClassName={styles.body}
         breadcrumb={breadcrumbItems}
         breadcrumbSchema={breadcrumbSchema}
-        comments={commentsData}
+        comments={getComments(commentsData)}
         footerMeta={footerMeta}
         headerMeta={filteredHeaderMeta}
         id={id as number}