Nested comments

src/components/Article/Comment.tsx

@@ -1,4 +1,5 @@
 import styles from './Comment.module.scss'
+import type { JSX } from 'solid-js/jsx-runtime'
 import { Icon } from '../_shared/Icon'
 import { AuthorCard } from '../Author/Card'
 import { Show, createMemo, createSignal } from 'solid-js'
@@ -12,13 +13,13 @@ 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
   comment: Partial<Point>
   canEdit?: boolean
   compact?: boolean
+  children?: JSX.Element[]
 }) => {
   const [isReplyVisible, setIsReplyVisible] = createSignal(false)
 
@@ -35,7 +36,6 @@ export default (props: {
   )
 
   return (
-    <CommentWrapper level={props.level}>
     <li class={clsx(styles.comment, { [styles[`commentLevel${props.level}`]]: Boolean(props.level) })}>
       <Show when={!!body()}>
         <div class={styles.commentContent}>
@@ -144,7 +144,9 @@ export default (props: {
           </Show>
         </div>
       </Show>
+      <Show when={props.children}>
+        <ul>{props.children}</ul>
+      </Show>
     </li>
-    </CommentWrapper>
   )
 }

src/components/Article/CommentWrapper.tsx

@@ -1,71 +0,0 @@
-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

@@ -10,6 +10,10 @@ import { clsx } from 'clsx'
 import { byCreated, byStat } from '../../utils/sortby'
 import { Loading } from '../Loading'
 
+type NestedReaction = {
+  children: Reaction[]
+} & Reaction
+
 const ARTICLE_COMMENTS_PAGE_SIZE = 50
 const MAX_COMMENT_LEVEL = 6
 
@@ -103,16 +107,16 @@ export const CommentsTree = (props: { shoutSlug: string }) => {
         </div>
 
         <ul>
-          <For each={reactions().reverse()}>
+          <For each={nestComments(reactions().reverse())}>
-            {(reaction: Reaction) => (
+            {(reaction: NestedReaction) => (
-              <>
-                {JSON.stringify(getCommentLevel(reaction))}
               <Comment
                 comment={reaction}
                 level={getCommentLevel(reaction)}
-                  canEdit={reaction.createdBy?.slug === session()?.user?.slug}
+                canEdit={reaction?.createdBy?.slug === session()?.user?.slug}
+                children={(reaction.children || []).map((r) => {
+                  return <Comment comment={r} />
+                })}
               />
-              </>
             )}
           </For>
         </ul>