resolve conversation

src/components/Article/Comment.module.scss

@@ -3,7 +3,6 @@
   margin: 0 -2.4rem 1.5em;
   padding: 0.8rem 2.4rem;
   transition: background-color 0.3s;
-  border: 1px solid red;
 
   &:hover {
     background-color: #f6f6f6;
@@ -33,26 +32,6 @@
   }
 }
 
-//.commentLevel1 {
-//  margin-left: 3.2rem;
-//}
-//
-//.commentLevel2 {
-//  margin-left: 6.4rem;
-//}
-//
-//.commentLevel3 {
-//  margin-left: 9.6rem;
-//}
-//
-//.commentLevel4 {
-//  margin-left: 12.8rem;
-//}
-//
-//.commentLevel5 {
-//  margin-left: 16rem;
-//}
-
 .commentControls {
   @include font-size(1.2rem);
   margin-bottom: 0.5em;

src/components/Article/CommentsTree.tsx

@@ -56,15 +56,16 @@ export const CommentsTree = (props: { shoutSlug: string }) => {
 
   function nestComments(commentList) {
     const commentMap = {}
-    commentList.forEach((comment) => (commentMap[comment.id] = comment))
     commentList.forEach((comment) => {
-      if (comment.replyTo !== null) {
+      commentMap[comment.id] = comment
+      if (comment.replyTo) {
+        if (!comment.replyTo) return
         const parent = commentMap[comment.replyTo]
         ;(parent.children = parent.children || []).push(comment)
       }
     })
     return commentList.filter((comment) => {
-      return comment.replyTo === null
+      return !comment.replyTo
     })
   }