[WiP] revert tree comments

src/components/Article/Comment.module.scss

@@ -9,11 +9,32 @@
     margin-bottom: 0;
   }
 
-  $levels: 0, 1, 2, 3, 4;
-  $padding: 1rem;
-  @each $level in $levels {
-    &.commentLevel-#{level} {
-      padding-left: $padding * $level;
+  .comment {
+    &:before,
+    &:after {
+      content: '';
+      left: 0;
+      position: absolute;
+    }
+
+    &:before {
+      border-bottom: 2px solid #ccc;
+      border-left: 2px solid #ccc;
+      border-radius: 0 0 0 1.2rem;
+      top: -1rem;
+      height: 2.4rem;
+      width: 1.2rem;
+    }
+
+    &:after {
+      background: #ccc;
+      height: 100%;
+      top: 0;
+      width: 2px;
+    }
+
+    &:last-child:after {
+      display: none;
     }
   }
 

src/components/Article/Comment.tsx

@@ -13,6 +13,7 @@ import { SharePopup } from './SharePopup'
 import stylesHeader from '../Nav/Header.module.scss'
 import Userpic from '../Author/Userpic'
 import { apiClient } from '../../utils/apiClient'
+import { ReactionKind } from '../../graphql/types.gen'
 
 type Props = {
   level?: number
@@ -41,20 +42,18 @@ export default (props: Props) => {
     event.preventDefault()
     // await createReaction({
     await apiClient.createReaction({
+      kind: 7,
       replyTo: props.parent,
       body: postMessageText(),
-      shout: comment().shout.slug,
-      kind: 7
+      shout: comment().shout.id
     })
   }
   const formattedDate = createMemo(() =>
     formatDate(new Date(comment()?.createdAt), { hour: 'numeric', minute: 'numeric' })
   )
 
-  console.log('!!! lvl:', props.level)
   return (
-    <li class={clsx(styles.comment, { [styles[`commentLevel-${props.level}`]]: props.level })}>
-      {props.level}
+    <li class={clsx(styles.comment, { [styles[`commentLevel${props.level}`]]: Boolean(props.level) })}>
       <Show when={!!body()}>
         <div class={styles.commentContent}>
           <Show
@@ -170,6 +169,9 @@ export default (props: Props) => {
           </Show>
         </div>
       </Show>
+      <Show when={props.children}>
+        <ul>{props.children}</ul>
+      </Show>
     </li>
   )
 }

src/components/Article/CommentsTree.tsx

@@ -11,7 +11,7 @@ import { byCreated, byStat } from '../../utils/sortby'
 import { Loading } from '../Loading'
 
 type NestedReaction = {
-  children: Reaction[]
+  children: Reaction[] | []
 } & Reaction
 
 const ARTICLE_COMMENTS_PAGE_SIZE = 50
@@ -53,6 +53,24 @@ export const CommentsTree = (props: { shoutSlug: string }) => {
   }
   onMount(async () => await loadMore())
 
+  const nestComments = (commentList) => {
+    const commentMap = {}
+    commentList.forEach((comment) => {
+      commentMap[comment.id] = comment
+      if (comment.replyTo !== null) {
+        const parent = commentMap[comment.replyTo] ?? []
+        ;(parent.children = parent.children || []).push(comment)
+      }
+    })
+    return commentList.filter((comment) => {
+      return !comment.replyTo
+    })
+  }
+
+  createEffect(() => {
+    console.log('!!! re:', nestComments(reactions()))
+  })
+
   return (
     <>
       <Show when={!isCommentsLoading()} fallback={<Loading />}>
@@ -88,13 +106,16 @@ export const CommentsTree = (props: { shoutSlug: string }) => {
         </div>
 
         <ul class={styles.comments}>
-          <For each={reactions().reverse()}>
+          <For each={nestComments(reactions().reverse())}>
             {(reaction: NestedReaction) => (
               <Comment
                 comment={reaction}
                 parent={reaction.id}
                 level={getCommentLevel(reaction)}
                 canEdit={reaction?.createdBy?.slug === session()?.user?.slug}
+                children={(reaction.children || []).map((r) => {
+                  return <Comment comment={r} parent={reaction.id} />
+                })}
               />
             )}
           </For>

src/utils/apiClient.ts

@@ -231,7 +231,9 @@ export const apiClient = {
     return response.data.createShout
   },
   createReaction: async (reaction) => {
-    const response = await privateGraphQLClient.mutation(reactionCreate, { reaction: reaction }).toPromise()
+    //TODO: add ReactionInput Type after debug
+    const response = await privateGraphQLClient.mutation(reactionCreate, { reaction }).toPromise()
+    console.log('!!! response:', response)
     return response.data
   },