[WiP] createReaction debug

src/components/Article/Comment.tsx

@@ -2,26 +2,30 @@ 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'
+import { Show, createMemo, createSignal, createEffect } from 'solid-js'
 import { clsx } from 'clsx'
 import type { Author, Reaction as Point } from '../../graphql/types.gen'
 import { t } from '../../utils/intl'
-// import { createReaction, updateReaction, deleteReaction } from '../../stores/zine/reactions'
+import { createReaction, updateReaction, deleteReaction } from '../../stores/zine/reactions'
 import MD from './MD'
-import { deleteReaction } from '../../stores/zine/reactions'
 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'
 
-export default (props: {
+type Props = {
   level?: number
   comment: Partial<Point>
   canEdit?: boolean
   compact?: boolean
   children?: JSX.Element[]
-}) => {
+  parent?: number
+}
+
+export default (props: Props) => {
   const [isReplyVisible, setIsReplyVisible] = createSignal(false)
+  const [postMessageText, setPostMessageText] = createSignal('')
 
   const comment = createMemo(() => props.comment)
   const body = createMemo(() => (comment().body || '').trim())
@@ -31,6 +35,18 @@ export default (props: {
       deleteReaction(comment().id)
     }
   }
+
+  const compose = (event) => setPostMessageText(event.target.value)
+  const handleCreate = async (event) => {
+    event.preventDefault()
+    // await createReaction({
+    await apiClient.createReaction({
+      kind: 7,
+      replyTo: props.parent,
+      body: postMessageText(),
+      shout: comment().shout.slug
+    })
+  }
   const formattedDate = createMemo(() =>
     formatDate(new Date(comment()?.createdAt), { hour: 'numeric', minute: 'numeric' })
   )
@@ -131,13 +147,21 @@ export default (props: {
             </div>
 
             <Show when={isReplyVisible()}>
-              <form class={styles.replyForm}>
-                <textarea name="reply" id="reply" rows="5" />
+              <form class={styles.replyForm} onSubmit={(event) => handleCreate(event)}>
+                <textarea
+                  value={postMessageText()}
+                  rows={1}
+                  onInput={(event) => compose(event)}
+                  placeholder="Написать сообщение"
+                />
+
                 <div class={styles.replyFormControls}>
                   <button class="button button--light" onClick={() => setIsReplyVisible(false)}>
                     {t('cancel')}
                   </button>
-                  <button class="button">{t('Send')}</button>
+                  <button type="submit" class="button">
+                    {t('Send')}
+                  </button>
                 </div>
               </form>
             </Show>

src/components/Article/CommentsTree.tsx

@@ -34,7 +34,6 @@ export const CommentsTree = (props: { shoutSlug: string }) => {
     try {
       const page = getCommentsPage()
       setIsCommentsLoading(true)
-
       const { hasMore } = await loadReactionsBy({
         by: { shout: props.shoutSlug, comment: true },
         limit: ARTICLE_COMMENTS_PAGE_SIZE,
@@ -68,6 +67,10 @@ export const CommentsTree = (props: { shoutSlug: string }) => {
     })
   }
 
+  createEffect(() => {
+    console.log('!!! re:', nestComments(reactions()))
+  })
+
   return (
     <>
       <Show when={!isCommentsLoading()} fallback={<Loading />}>
@@ -107,10 +110,11 @@ export const CommentsTree = (props: { shoutSlug: string }) => {
             {(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} />
+                  return <Comment comment={r} parent={reaction.id} />
                 })}
               />
             )}

src/graphql/mutation/reaction-create.ts

@@ -15,17 +15,11 @@ export default gql`
         kind
         range
         createdAt
-        shout
-        replyTo {
+        shout {
           id
-          createdBy {
           slug
-            userpic
-            name
-          }
-          body
-          kind
         }
+        replyTo
       }
     }
   }

src/graphql/types.gen.ts

@@ -146,7 +146,7 @@ export type Message = {
   chatId: Scalars['String']
   createdAt: Scalars['Int']
   id: Scalars['Int']
-  replyTo?: Maybe<Scalars['String']>
+  replyTo?: Maybe<Scalars['Int']>
   seen?: Maybe<Scalars['Boolean']>
   updatedAt?: Maybe<Scalars['Int']>
 }

src/stores/zine/reactions.ts

@@ -1,4 +1,4 @@
-import type { Reaction } from '../../graphql/types.gen'
+import type { Reaction, ReactionInput } from '../../graphql/types.gen'
 import { apiClient } from '../../utils/apiClient'
 import { createSignal } from 'solid-js'
 // TODO: import { roomConnect } from '../../utils/p2p'
@@ -23,8 +23,8 @@ export const loadReactionsBy = async ({
   setSortedReactions(data)
   return { hasMore }
 }
-export const createReaction = async (reaction: Reaction) => {
-  const { reaction: r } = await apiClient.createReaction({ reaction })
+export const createReaction = async (reaction: ReactionInput) => {
+  const { reaction: r } = await apiClient.createReaction(reaction)
   return r
 }
 export const updateReaction = async (reaction: Reaction) => {

src/utils/apiClient.ts

@@ -12,7 +12,8 @@ import type {
   MutationCreateMessageArgs,
   QueryLoadRecipientsArgs,
   User,
-  ProfileInput
+  ProfileInput,
+  ReactionInput
 } from '../graphql/types.gen'
 import { publicGraphQLClient } from '../graphql/publicGraphQLClient'
 import { getToken, privateGraphQLClient } from '../graphql/privateGraphQLClient'
@@ -229,16 +230,16 @@ export const apiClient = {
     console.debug('createArticle response:', response)
     return response.data.createShout
   },
-  createReaction: async ({ reaction }) => {
-    const response = await privateGraphQLClient.mutation(reactionCreate, { reaction }).toPromise()
-    console.debug('[api-client] [api] create reaction mutation called')
-    return response.data.createReaction
+  createReaction: async (input: ReactionInput) => {
+    const response = await privateGraphQLClient.mutation(reactionCreate, { reaction: input }).toPromise()
+    console.log('!!! response:', response)
+    return response.data
   },
 
   // CUDL
 
-  updateReaction: async ({ reaction }) => {
-    const response = await privateGraphQLClient.mutation(reactionUpdate, { reaction }).toPromise()
+  updateReaction: async (reaction) => {
+    const response = await privateGraphQLClient.mutation(reactionUpdate, reaction).toPromise()
 
     return response.data.createReaction
   },