Send message from context

src/components/Inbox/Message.module.scss

@@ -21,6 +21,7 @@ $actionsWidth: 32px * 2;
       padding: 12px 16px;
       position: relative;
       z-index: 1;
+      word-wrap: break-word;
 
       p {
         margin: 0;

src/components/Views/Inbox.tsx

@@ -1,23 +1,22 @@
 import { For, createSignal, Show, onMount, createEffect, createMemo } from 'solid-js'
 import type { Author, Chat, Message as MessageType } from '../../graphql/types.gen'
-import { Icon } from '../_shared/Icon'
 import DialogCard from '../Inbox/DialogCard'
 import Search from '../Inbox/Search'
-import { useSession } from '../../context/session'
 import Message from '../Inbox/Message'
-import { loadRecipients, loadMessages } from '../../stores/inbox'
+import CreateModalContent from '../Inbox/CreateModalContent'
+import DialogHeader from '../Inbox/DialogHeader'
+import MessagesFallback from '../Inbox/MessagesFallback'
+import QuotedMessage from '../Inbox/QuotedMessage'
+import { Icon } from '../_shared/Icon'
+import { useSession } from '../../context/session'
+import { loadRecipients } from '../../stores/inbox'
 import { t } from '../../utils/intl'
 import { Modal } from '../Nav/Modal'
 import { showModal } from '../../stores/ui'
-import CreateModalContent from '../Inbox/CreateModalContent'
 import { useInbox } from '../../context/inbox'
-import DialogHeader from '../Inbox/DialogHeader'
-import { apiClient } from '../../utils/apiClient'
-import MessagesFallback from '../Inbox/MessagesFallback'
 import { useRouter } from '../../stores/router'
 import { clsx } from 'clsx'
 import styles from '../../styles/Inbox.module.scss'
-import QuotedMessage from '../Inbox/QuotedMessage'
 
 const userSearch = (array: Author[], keyword: string) => {
   const searchTerm = keyword.toLowerCase()
@@ -30,7 +29,7 @@ export const InboxView = () => {
   const {
     chats,
     messages,
-    actions: { loadChats, getMessages } // setListener
+    actions: { loadChats, getMessages, sendMessage }
   } = useInbox()
 
   // const [messages, setMessages] = createSignal<MessageType[]>([])
@@ -64,14 +63,6 @@ export const InboxView = () => {
     } finally {
       chatWindow.scrollTop = chatWindow.scrollHeight
     }
-    // try {
-    //   const response = await loadMessages({ chat: chat.id })
-    //   setMessages(response as unknown as MessageType[])
-    // } catch (error) {
-    //   console.error('[loadMessages]', error)
-    // } finally {
-    //   chatWindow.scrollTop = chatWindow.scrollHeight
-    // }
   }
 
   createEffect(() => {
@@ -89,21 +80,14 @@ export const InboxView = () => {
   })
 
   const handleSubmit = async () => {
-    try {
+    await sendMessage({
-      console.log('!!! post:')
+      body: postMessageText().toString(),
-      const post = await apiClient.createMessage({
+      chat: currentDialog().id.toString(),
-        body: postMessageText().toString(),
+      replyTo: messageToReply()?.id
-        chat: currentDialog().id.toString(),
+    })
-        replyTo: messageToReply()?.id
+    setPostMessageText('')
-      })
+    setMessageToReply(null)
-      // setMessages((prev) => [...prev, post.message])
+    chatWindow.scrollTop = chatWindow.scrollHeight
-      setPostMessageText('')
-      setMessageToReply(null)
-      chatWindow.scrollTop = chatWindow.scrollHeight
-      console.log('!!! messages:', messages())
-    } catch (error) {
-      console.error('[post message error]:', error)
-    }
   }
 
   let textareaParent // textarea autoresize ghost element

src/context/inbox.tsx

@@ -1,7 +1,7 @@
 import { Accessor, createMemo, JSX, onMount } from 'solid-js'
 import { createContext, createSignal, useContext } from 'solid-js'
 import { createChatClient } from '../graphql/privateGraphQLClient'
-import type { Chat, Message } from '../graphql/types.gen'
+import type { Chat, Message, MutationCreateMessageArgs } from '../graphql/types.gen'
 import { apiClient } from '../utils/apiClient'
 import newMessage from '../graphql/subs/new-message'
 import type { Client } from '@urql/core'
@@ -15,6 +15,7 @@ type InboxContextType = {
     createChat: (members: number[], title: string) => Promise<{ chat: Chat }>
     loadChats: () => Promise<void>
     getMessages?: (chatId: string) => Promise<void>
+    sendMessage?: (args: MutationCreateMessageArgs) => void
     unsubscribe: () => void
   }
 }
@@ -43,6 +44,7 @@ export const InboxProvider = (props: { children: JSX.Element }) => {
   }
 
   const getMessages = async (chatId: string) => {
+    if (!chatId) return
     try {
       const response = await loadMessages({ chat: chatId })
       setMessages(response as unknown as Message[])
@@ -51,6 +53,15 @@ export const InboxProvider = (props: { children: JSX.Element }) => {
     }
   }
 
+  const sendMessage = async (args) => {
+    try {
+      const post = await apiClient.createMessage(args)
+      setMessages((prev) => [...prev, post.message])
+    } catch (error) {
+      console.error('[post message error]:', error)
+    }
+  }
+
   const createChat = async (members: number[], title: string) => {
     const chat = await apiClient.createChat({ members, title })
     setChats((prevChats) => {
@@ -71,6 +82,7 @@ export const InboxProvider = (props: { children: JSX.Element }) => {
     createChat,
     loadChats,
     getMessages,
+    sendMessage,
     unsubscribe // TODO: call unsubscribe some time!
   }