[WiP] messages update

src/components/Inbox/Message.tsx

@@ -1,12 +1,15 @@
-import { Show } from 'solid-js'
+import { createMemo, Show } from 'solid-js'
 import MarkdownIt from 'markdown-it'
 import { clsx } from 'clsx'
 import styles from './Message.module.scss'
 import DialogAvatar from './DialogAvatar'
+import { locale } from '../../stores/ui'
+import type { Message, ChatMember } from '../../graphql/types.gen'
 
 type Props = {
-  body: string
-  isOwn: boolean
+  content: Message
+  ownId: number
+  members: ChatMember[]
 }
 
 const md = new MarkdownIt({
@@ -14,18 +17,29 @@ const md = new MarkdownIt({
 })
 
 const Message = (props: Props) => {
+  const formattedTime = createMemo<string>(() => {
+    return new Date(props.content.createdAt * 1000).toLocaleTimeString(locale(), {
+      hour: 'numeric',
+      minute: 'numeric'
+    })
+  })
+
+  console.log('!!! props.ownId:', props.ownId)
+  // возвращать ID автора
+  const isOwn = props.ownId === Number(props.content.author)
+
   return (
-    <div class={clsx(styles.Message, props.isOwn && styles.own)}>
-      <Show when={!props.isOwn}>
+    <div class={clsx(styles.Message, isOwn && styles.own)}>
+      <Show when={!isOwn}>
         <div class={styles.author}>
           <DialogAvatar size="small" name={'Message Author'} />
           <div class={styles.name}>Message Author</div>
         </div>
       </Show>
       <div class={styles.body}>
-        <div innerHTML={md.render(props.body)} />
+        <div innerHTML={md.render(props.content.body)} />
       </div>
-      <div class={styles.time}>12:24</div>
+      <div class={styles.time}>{formattedTime()}</div>
     </div>
   )
 }

src/components/Views/Inbox.tsx

@@ -1,8 +1,6 @@
 import { For, createSignal, Show, onMount, createEffect, createMemo } from 'solid-js'
-import type { Author, Chat } from '../../graphql/types.gen'
-import { AuthorCard } from '../Author/Card'
+import type { Author, Chat, Message as MessageType } from '../../graphql/types.gen'
 import { Icon } from '../_shared/Icon'
-import { Loading } from '../Loading'
 import DialogCard from '../Inbox/DialogCard'
 import Search from '../Inbox/Search'
 import { useSession } from '../../context/session'
@@ -17,35 +15,7 @@ import { clsx } from 'clsx'
 import '../../styles/Inbox.scss'
 import { useInbox } from '../../context/inbox'
 import DialogHeader from '../Inbox/DialogHeader'
-
-const OWNER_ID = '501'
-const client = createClient({
-  url: 'https://graphqlzero.almansi.me/api'
-})
-
-const messageQuery = `
-query Comments ($options: PageQueryOptions) {
-  comments(options: $options) {
-    data {
-      id
-      body
-      email
-    }
-  }
-}
-`
-const newMessageQuery = `
-mutation postComment($messageBody: String!) {
-  createComment(
-    input: { body: $messageBody, email: "test@test.com", name: "User" }
-  ) {
-    id
-    body
-    name
-    email
-  }
-}
-`
+import { apiClient } from '../../utils/apiClient'
 
 const userSearch = (array: Author[], keyword: string) => {
   const searchTerm = keyword.toLowerCase()
@@ -54,24 +24,17 @@ const userSearch = (array: Author[], keyword: string) => {
   })
 }
 
-const postMessage = async (msg: string) => {
-  const response = await client.mutation(newMessageQuery, { messageBody: msg }).toPromise()
-  return response.data.createComment
-}
-
 export const InboxView = () => {
   const {
     chats,
     actions: { loadChats }
   } = useInbox()
-  const [messages, setMessages] = createSignal([])
+  const [messages, setMessages] = createSignal<MessageType[]>([])
   const [recipients, setRecipients] = createSignal<Author[]>([])
-  const [cashedRecipients, setCashedRecipients] = createSignal<Author[]>([])
   const [postMessageText, setPostMessageText] = createSignal('')
-  const [loading, setLoading] = createSignal<boolean>(false)
   const [sortByGroup, setSortByGroup] = createSignal<boolean>(false)
   const [sortByPerToPer, setSortByPerToPer] = createSignal<boolean>(false)
-  const [selectedChat, setSelectedChat] = createSignal<Chat>()
+  const [currentDialog, setCurrentDialog] = createSignal<Chat>()
   const { session } = useSession()
   const currentUserId = createMemo(() => session()?.user?.id)
 
@@ -87,24 +50,19 @@ export const InboxView = () => {
 
   let chatWindow
   const handleOpenChat = async (chat) => {
-    setLoading(true)
-    setSelectedChat(chat)
+    setCurrentDialog(chat)
     try {
       await loadMessages({ chat: chat.id })
     } catch (error) {
-      setLoading(false)
       console.error('[loadMessages]', error)
     } finally {
-      setLoading(false)
       chatWindow.scrollTop = chatWindow.scrollHeight
     }
   }
   onMount(async () => {
-    setLoading(true)
     try {
       const response = await loadRecipients({ days: 365 })
       setRecipients(response as unknown as Author[])
-      setCashedRecipients(response as unknown as Author[])
     } catch (error) {
       console.log(error)
     }
@@ -113,8 +71,11 @@ export const InboxView = () => {
 
   const handleSubmit = async () => {
     try {
-      const post = await postMessage(postMessageText())
-      setMessages((prev) => [...prev, post])
+      const post = await apiClient.createMessage({
+        body: postMessageText().toString(),
+        chat: currentDialog().id.toString()
+      })
+      setMessages((prev) => [...prev, post.message])
       setPostMessageText('')
       chatWindow.scrollTop = chatWindow.scrollHeight
     } catch (error) {
@@ -135,10 +96,6 @@ export const InboxView = () => {
     showModal('inviteToChat')
   }
 
-  createEffect(() => {
-    console.log('!!! chats():', chats())
-  })
-
   const chatsToShow = () => {
     if (sortByPerToPer()) {
       return chats().filter((chat) => chat.title.trim().length === 0)
@@ -149,6 +106,11 @@ export const InboxView = () => {
     }
   }
 
+  createEffect(() => {
+    console.log('!!! messages():', messages())
+    console.log('!!! currentDialog():', currentDialog())
+  })
+
   return (
     <div class="messages container">
       <Modal variant="narrow" name="inviteToChat">
@@ -211,18 +173,15 @@ export const InboxView = () => {
         </div>
 
         <div class="col-md-8 conversation">
-          <Show when={selectedChat()}>
-            <DialogHeader ownId={currentUserId()} chat={selectedChat()} />
+          <Show when={currentDialog()}>
+            <DialogHeader ownId={currentUserId()} chat={currentDialog()} />
           </Show>
 
           <div class="conversation__messages">
             <div class="conversation__messages-container" ref={chatWindow}>
-              <Show when={loading()}>
-                <Loading />
-              </Show>
               <For each={messages()}>
-                {(comment: { body: string; id: string; email: string }) => (
-                  <Message body={comment.body} isOwn={OWNER_ID === comment.id} />
+                {(message) => (
+                  <Message content={message} ownId={currentUserId()} members={currentDialog().members} />
                 )}
               </For>
 
@@ -240,6 +199,7 @@ export const InboxView = () => {
                   rows={1}
                   onInput={(event) => handleChangeMessage(event)}
                   placeholder="Написать сообщение"
+                  disabled={!currentDialog()?.id}
                 />
               </div>
               <button type="submit" disabled={postMessageText().length === 0} onClick={handleSubmit}>

src/graphql/mutation/create-chat-message.ts

@@ -4,10 +4,13 @@ export default gql`
   mutation createMessage($chat: String!, $body: String!) {
     createMessage(chat: $chat, body: $body) {
       error
-      author {
-        slug
+      message {
         id
-        chat
+        body
+        author
+        createdAt
+        replyTo
+        updatedAt
       }
     }
   }

src/utils/apiClient.ts

@@ -283,13 +283,14 @@ export const apiClient = {
 
   createMessage: async (options: MutationCreateMessageArgs) => {
     const resp = await privateGraphQLClient.mutation(createMessage, options).toPromise()
+    console.log('!!! resp:', resp)
     return resp.data.createMessage
   },
 
   getChatMessages: async (options: QueryLoadMessagesByArgs) => {
     const resp = await privateGraphQLClient.query(chatMessagesLoadBy, options).toPromise()
-    console.log('!!! resp:', resp)
-    return resp.data
+    console.log('[getChatMessages]', resp)
+    return resp.data.loadMessagesBy.messages
   },
 
   getRecipients: async (options: QueryLoadRecipientsArgs) => {