[WiP] createReaction debug

src/components/Article/Comment.tsx

@@ -41,10 +41,10 @@ export default (props: Props) => {
     event.preventDefault()
     // await createReaction({
     await apiClient.createReaction({
-      kind: 7,
       replyTo: props.parent,
       body: postMessageText(),
-      shout: comment().shout.slug
+      shout: comment().shout.slug,
+      kind: 7
     })
   }
   const formattedDate = createMemo(() =>
@@ -168,9 +168,6 @@ export default (props: Props) => {
           </Show>
         </div>
       </Show>
-      <Show when={props.children}>
-        <ul>{props.children}</ul>
-      </Show>
     </li>
   )
 }

src/components/Article/CommentsTree.tsx

@@ -53,24 +53,6 @@ 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 />}>
@@ -106,16 +88,13 @@ export const CommentsTree = (props: { shoutSlug: string }) => {
         </div>
 
         <ul class={styles.comments}>
-          <For each={nestComments(reactions().reverse())}>
+          <For each={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

@@ -230,9 +230,8 @@ export const apiClient = {
     console.debug('createArticle response:', response)
     return response.data.createShout
   },
-  createReaction: async (input: ReactionInput) => {
+  createReaction: async (reaction) => {
-    const response = await privateGraphQLClient.mutation(reactionCreate, { reaction: input }).toPromise()
+    const response = await privateGraphQLClient.mutation(reactionCreate, { reaction: reaction }).toPromise()
-    console.log('!!! response:', response)
     return response.data
   },