Comment tree rerender Rerender fix

src/components/Article/Comment.tsx

@@ -5,20 +5,19 @@ import { Show, createMemo, createSignal, For } from 'solid-js'
 import { clsx } from 'clsx'
 import type { Author, Reaction } from '../../graphql/types.gen'
 import { t } from '../../utils/intl'
-import { deleteReaction } from '../../stores/zine/reactions'
+import { createReaction, deleteReaction } from '../../stores/zine/reactions'
 import MD from './MD'
 import { formatDate } from '../../utils'
 import { SharePopup } from './SharePopup'
 import stylesHeader from '../Nav/Header.module.scss'
 import Userpic from '../Author/Userpic'
-import { apiClient } from '../../utils/apiClient'
 import { useSession } from '../../context/session'
+import { ReactionKind } from '../../graphql/types.gen'
 
 type Props = {
-  level: number
   comment: Reaction
   compact?: boolean
-  reactions: Reaction[]
+  reactions?: Reaction[]
 }
 
 export const Comment = (props: Props) => {
@@ -41,20 +40,24 @@ export const Comment = (props: Props) => {
   const compose = (event) => setPostMessageText(event.target.value)
   const handleCreate = async (event) => {
     event.preventDefault()
-    // await createReaction({
-    await apiClient.createReaction({
-      kind: 7,
-      replyTo: props.comment.id,
-      body: postMessageText(),
-      shout: comment().shout.id
-    })
+    try {
+      await createReaction({
+        kind: ReactionKind.Comment,
+        replyTo: props.comment.id,
+        body: postMessageText(),
+        shout: comment().shout.id
+      })
+      setIsReplyVisible(false)
+    } catch (error) {
+      console.log('!!! err:', error)
+    }
   }
   const formattedDate = createMemo(() =>
     formatDate(new Date(comment()?.createdAt), { hour: 'numeric', minute: 'numeric' })
   )
 
   return (
-    <li class={clsx(styles.comment, { [styles[`commentLevel${props.level}`]]: Boolean(props.level) })}>
+    <li class={styles.comment}>
       <Show when={!!body()}>
         <div class={styles.commentContent}>
           <Show
@@ -93,7 +96,7 @@ export const Comment = (props: Props) => {
               </div>
             </div>
           </Show>
-
+          <div style={{ color: 'red' }}>{comment().id}</div>
           <div
             class={styles.commentBody}
             contenteditable={canEdit()}
@@ -170,11 +173,13 @@ export const Comment = (props: Props) => {
           </Show>
         </div>
       </Show>
-      <ul>
-        <For each={props.reactions.filter((r) => r.replyTo === props.comment.id)}>
-          {(reaction) => <Comment reactions={props.reactions} comment={reaction} level={props.level + 1} />}
-        </For>
-      </ul>
+      <Show when={props.reactions}>
+        <ul>
+          <For each={props.reactions.filter((r) => r.replyTo === props.comment.id)}>
+            {(reaction) => <Comment reactions={props.reactions} comment={reaction} />}
+          </For>
+        </ul>
+      </Show>
     </li>
   )
 }

src/components/Article/CommentsTree.tsx

@@ -21,11 +21,12 @@ export const CommentsTree = (props: { shoutSlug: string }) => {
   const { session } = useSession()
   const { sortedReactions, loadReactionsBy } = useReactionsStore()
   const reactions = createMemo<Reaction[]>(() =>
-    sortedReactions()
-      .sort(commentsOrder() === 'rating' ? byStat('rating') : byCreated)
-      .filter((r) => r.shout.slug === props.shoutSlug)
+    sortedReactions().sort(commentsOrder() === 'rating' ? byStat('rating') : byCreated)
   )
 
+  createEffect(() => {
+    console.log('!!! sortedReactions():', sortedReactions())
+  })
   const loadMore = async () => {
     try {
       const page = getCommentsPage()
@@ -49,24 +50,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 />}>
@@ -103,7 +86,7 @@ export const CommentsTree = (props: { shoutSlug: string }) => {
 
         <ul class={styles.comments}>
           <For each={reactions().filter((r) => !r.replyTo)}>
-            {(reaction) => <Comment level={0} reactions={reactions()} comment={reaction} />}
+            {(reaction) => <Comment reactions={reactions()} comment={reaction} />}
           </For>
         </ul>
 

src/components/Author/Card.tsx

@@ -36,11 +36,13 @@ export const AuthorCard = (props: AuthorCardProps) => {
     actions: { loadSession }
   } = useSession()
 
+  if (!props.author) return false // FIXME: с сервера должен приходить автор реакции (ApiClient.CreateReaction)
+
   const [isSubscribing, setIsSubscribing] = createSignal(false)
 
-  const subscribed = createMemo<boolean>(
-    () => session()?.news?.authors?.some((u) => u === props.author.slug) || false
-  )
+  const subscribed = createMemo<boolean>(() => {
+    return session()?.news?.authors?.some((u) => u === props.author.slug) || false
+  })
 
   const subscribe = async (really = true) => {
     setIsSubscribing(true)

src/components/Topic/Card.tsx

@@ -8,12 +8,9 @@ import { follow, unfollow } from '../../stores/zine/common'
 import { getLogger } from '../../utils/logger'
 import { clsx } from 'clsx'
 import { useSession } from '../../context/session'
-import { StatMetrics } from '../_shared/StatMetrics'
 import { ShowOnlyOnClient } from '../_shared/ShowOnlyOnClient'
 import { Icon } from '../_shared/Icon'
 
-const log = getLogger('TopicCard')
-
 interface TopicProps {
   topic: Topic
   compact?: boolean

src/graphql/mutation/reaction-create.ts

@@ -6,19 +6,10 @@ export default gql`
       error
       reaction {
         id
-        createdBy {
-          slug
-          name
-          userpic
-        }
         body
         kind
         range
         createdAt
-        shout {
-          id
-          slug
-        }
         replyTo
       }
     }

src/graphql/types.gen.ts

@@ -498,7 +498,7 @@ export type ReactionBy = {
 
 export type ReactionInput = {
   body?: InputMaybe<Scalars['String']>
-  kind: Scalars['Int']
+  kind: ReactionKind
   range?: InputMaybe<Scalars['String']>
   replyTo?: InputMaybe<Scalars['Int']>
   shout: Scalars['Int']

src/stores/zine/reactions.ts

@@ -23,9 +23,16 @@ export const loadReactionsBy = async ({
   setSortedReactions(data)
   return { hasMore }
 }
-export const createReaction = async (reaction: ReactionInput) => {
-  const { reaction: r } = await apiClient.createReaction(reaction)
-  return r
+
+export const createReaction = async (input: ReactionInput) => {
+  try {
+    const reaction = await apiClient.createReaction(input)
+    console.log('!!! reaction:', reaction)
+    reaction.shout = { slug: input.shout }
+    setSortedReactions((prev) => [...prev, reaction])
+  } catch (error) {
+    console.error('[createReaction]', error)
+  }
 }
 export const updateReaction = async (reaction: Reaction) => {
   const { reaction: r } = await apiClient.updateReaction({ reaction })

src/utils/apiClient.ts

@@ -230,11 +230,10 @@ export const apiClient = {
     console.debug('createArticle response:', response)
     return response.data.createShout
   },
-  createReaction: async (reaction) => {
-    //TODO: add ReactionInput Type after debug
-    const response = await privateGraphQLClient.mutation(reactionCreate, { reaction }).toPromise()
-    console.log('!!! response:', response)
-    return response.data
+  createReaction: async (input: ReactionInput) => {
+    const response = await privateGraphQLClient.mutation(reactionCreate, { reaction: input }).toPromise()
+    console.debug('[createReaction]:', response.data)
+    return response.data.createReaction.reaction
   },
 
   // CUDL