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/utils/helpers/format.ts | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

(limited to 'src/utils')

diff --git a/src/utils/helpers/format.ts b/src/utils/helpers/format.ts
index fc7f1c2..81bae9c 100644
--- a/src/utils/helpers/format.ts
+++ b/src/utils/helpers/format.ts
@@ -157,6 +157,34 @@ export const getFormattedComments = (rawComments: RawComment[]): Comment[] => {
   return formattedComments;
 };
 
+/**
+ * Create a comments tree with replies.
+ * @param comments - A flatten comments list.
+ * @returns An array of comments with replies.
+ */
+export const buildCommentsTree = (comments: Comment[]) => {
+  type CommentsHashTable = {
+    [key: string]: Comment;
+  };
+
+  const hashTable: CommentsHashTable = Object.create(null);
+  const commentsTree: Comment[] = [];
+
+  comments.forEach(
+    (comment) => (hashTable[comment.id] = { ...comment, replies: [] })
+  );
+
+  comments.forEach((comment) => {
+    if (!comment.parentId) {
+      commentsTree.push(hashTable[comment.id]);
+    } else {
+      hashTable[comment.parentId].replies.push(hashTable[comment.id]);
+    }
+  });
+
+  return commentsTree;
+};
+
 /**
  * Format an article from RawArticle to Article type.
  * @param rawPost - An article coming from WP GraphQL.
@@ -183,11 +211,12 @@ export const getFormattedPost = (rawPost: RawArticle): Article => {
   };
 
   const formattedComments = getFormattedComments(comments.nodes);
+  const commentsTree = buildCommentsTree(formattedComments);
 
   const formattedPost: Article = {
     author: author.node,
     commentCount,
-    comments: formattedComments,
+    comments: commentsTree,
     content: contentParts.afterMore,
     databaseId,
     dates,
-- 
cgit v1.2.3