From d1d8d7e70c6d378dc868f3f2e9c48ceae1fbe400 Mon Sep 17 00:00:00 2001
From: hyifeng <chaojun@opensquare.network>
Date: Fri, 29 Mar 2024 11:57:18 +0800
Subject: [PATCH] Fix nested comments from polkassembly to subsquare, #4063
 (#4065)

---
 .../next-common/components/comment/item.js    | 29 ++++++++-------
 packages/next-common/hooks/usePostComments.js | 35 ++++++++++++++++---
 2 files changed, 48 insertions(+), 16 deletions(-)

diff --git a/packages/next-common/components/comment/item.js b/packages/next-common/components/comment/item.js
index 2f57e3c9e9..c6ac0a5149 100644
--- a/packages/next-common/components/comment/item.js
+++ b/packages/next-common/components/comment/item.js
@@ -18,6 +18,7 @@ import Tooltip from "../tooltip";
 import CommentItemTemplate from "./itemTemplate";
 import { useIsUniversalPostComments } from "next-common/hooks/usePostComments";
 import { CommentProvider, useComment } from "./context";
+import PolkassemblyCommentItem from "./polkassemblyCommentItem";
 
 function jumpToAnchor(anchorId) {
   var anchorElement = document.getElementById(anchorId);
@@ -174,18 +175,22 @@ function CommentItemImpl({
           setIsEdit={setIsEdit}
         />
       }
-      renderReplyItem={(reply) => (
-        <CommentItem
-          key={reply._id}
-          data={reply}
-          replyToCommentId={replyToCommentId}
-          isSecondLevel
-          updateTopLevelComment={updateTopLevelComment || updateComment}
-          scrollToTopLevelCommentBottom={
-            scrollToTopLevelCommentBottom || scrollToCommentBottom
-          }
-        />
-      )}
+      renderReplyItem={(reply) =>
+        reply.comment_source === "polkassembly" ? (
+          <PolkassemblyCommentItem key={reply.id} data={reply} isSecondLevel />
+        ) : (
+          <CommentItem
+            key={reply._id}
+            data={reply}
+            replyToCommentId={replyToCommentId}
+            isSecondLevel
+            updateTopLevelComment={updateTopLevelComment || updateComment}
+            scrollToTopLevelCommentBottom={
+              scrollToTopLevelCommentBottom || scrollToCommentBottom
+            }
+          />
+        )
+      }
     />
   );
 }
diff --git a/packages/next-common/hooks/usePostComments.js b/packages/next-common/hooks/usePostComments.js
index 4db69093bb..d48cc2090f 100644
--- a/packages/next-common/hooks/usePostComments.js
+++ b/packages/next-common/hooks/usePostComments.js
@@ -7,11 +7,38 @@ import dayjs from "dayjs";
 import { useDetailType } from "next-common/context/page";
 import { detailPageCategory } from "next-common/utils/consts/business/category";
 import { PolkassemblyChains } from "next-common/utils/polkassembly";
+import { cloneDeep } from "lodash-es";
 
 function getShouldReadPolkassemblyComments(chain) {
   return PolkassemblyChains.includes(chain);
 }
 
+function mergeComments(polkassemblyComments, subsquareComments) {
+  const filteredPolkassemblyComments = [];
+  const newSubsquareComments = cloneDeep(subsquareComments);
+  for (const polkaItem of polkassemblyComments ?? []) {
+    const subsquareItem = newSubsquareComments.find(
+      (item) => item._id === polkaItem.id,
+    );
+    if (subsquareItem) {
+      subsquareItem.replies = subsquareItem.replies || [];
+      subsquareItem.replies.push(
+        ...polkaItem.replies.map((r) => ({
+          ...r,
+          comment_source: "polkassembly",
+        })),
+      );
+    } else {
+      filteredPolkassemblyComments.push(polkaItem);
+    }
+  }
+
+  return [
+    ...(filteredPolkassemblyComments ?? []),
+    ...(newSubsquareComments ?? []),
+  ].sort((a, b) => dayjs(a.createdAt).unix() - dayjs(b.createdAt).unix());
+}
+
 export function usePostCommentsData() {
   const comments = useComments();
   const chain = useChain();
@@ -27,10 +54,10 @@ export function usePostCommentsData() {
       if (!polkassemblyPostData.loadingComments) {
         const data = { ...comments };
 
-        data.items = [
-          ...(polkassemblyPostData.comments ?? []),
-          ...(comments.items ?? []),
-        ].sort((a, b) => dayjs(a.createdAt).unix() - dayjs(b.createdAt).unix());
+        data.items = mergeComments(
+          polkassemblyPostData.comments,
+          comments.items,
+        );
 
         setCommentsData(data);
       }