[WiP] init & test

src/components/Article/Comment.module.scss

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

src/components/Article/Comment.tsx

@@ -12,6 +12,7 @@ import { formatDate } from '../../utils'
 import { SharePopup } from './SharePopup'
 import stylesHeader from '../Nav/Header.module.scss'
 import Userpic from '../Author/Userpic'
+import CommentWrapper from './CommentWrapper'
 
 export default (props: {
   level?: number
@@ -34,7 +35,8 @@ export default (props: {
   )
 
   return (
-    <div class={clsx(styles.comment, { [styles[`commentLevel${props.level}`]]: Boolean(props.level) })}>
+    <CommentWrapper level={props.level}>
+      <li class={clsx(styles.comment, { [styles[`commentLevel${props.level}`]]: Boolean(props.level) })}>
         <Show when={!!body()}>
           <div class={styles.commentContent}>
             <Show
@@ -142,6 +144,7 @@ export default (props: {
             </Show>
           </div>
         </Show>
-    </div>
+      </li>
+    </CommentWrapper>
   )
 }

src/components/Article/CommentWrapper.tsx

@@ -0,0 +1,71 @@
+import type { JSX } from 'solid-js/jsx-runtime'
+import { Switch, Match } from 'solid-js'
+
+type Props = {
+  level?: number
+  children: JSX.Element
+}
+
+const CommentWrapper = (props: Props) => {
+  return (
+    <Switch fallback={props.children}>
+      <Match when={props.level === 1}>
+        <ul>{props.children}</ul>
+      </Match>
+      <Match when={props.level === 2}>
+        <ul>
+          <li>
+            <ul>{props.children}</ul>
+          </li>
+        </ul>
+      </Match>
+      <Match when={props.level === 3}>
+        <ul>
+          <li>
+            <ul>
+              <li>
+                <ul>{props.children}</ul>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </Match>
+      <Match when={props.level === 4}>
+        <ul>
+          <li>
+            <ul>
+              <li>
+                <ul>
+                  <li>
+                    <ul>{props.children}</ul>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </Match>
+      <Match when={props.level === 5}>
+        <ul>
+          <li>
+            <ul>
+              <li>
+                <ul>
+                  <li>
+                    <ul>
+                      <li>
+                        <ul>{props.children}</ul>
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </Match>
+    </Switch>
+  )
+}
+
+export default CommentWrapper

src/components/Article/CommentsTree.tsx

@@ -1,4 +1,4 @@
-import { For, Show, createMemo, createSignal, onMount } from 'solid-js'
+import { For, Show, createMemo, createSignal, onMount, createEffect } from 'solid-js'
 import { useSession } from '../../context/session'
 import Comment from './Comment'
 import { t } from '../../utils/intl'
@@ -49,6 +49,25 @@ export const CommentsTree = (props: { shoutSlug: string }) => {
     return level
   }
   onMount(async () => await loadMore())
+
+  function nestComments(commentList) {
+    const commentMap = {}
+    commentList.forEach((comment) => (commentMap[comment.id] = comment))
+    commentList.forEach((comment) => {
+      if (comment.replyTo !== null) {
+        const parent = commentMap[comment.replyTo]
+        ;(parent.children = parent.children || []).push(comment)
+      }
+    })
+    return commentList.filter((comment) => {
+      return comment.replyTo === null
+    })
+  }
+
+  createEffect(() => {
+    console.log('!!! reactions():', nestComments(reactions()))
+  })
+
   return (
     <>
       <Show when={!isCommentsLoading()} fallback={<Loading />}>
@@ -83,15 +102,20 @@ export const CommentsTree = (props: { shoutSlug: string }) => {
           </ul>
         </div>
 
+        <ul>
           <For each={reactions().reverse()}>
             {(reaction: Reaction) => (
+              <>
+                {JSON.stringify(getCommentLevel(reaction))}
                 <Comment
                   comment={reaction}
                   level={getCommentLevel(reaction)}
                   canEdit={reaction.createdBy?.slug === session()?.user?.slug}
                 />
+              </>
             )}
           </For>
+        </ul>
 
         <Show when={isLoadMoreButtonVisible()}>
           <button onClick={loadMore}>{t('Load more')}</button>