webapp/src/context/inbox.tsx

100 lines
3.0 KiB
TypeScript
Raw Normal View History

2023-11-28 13:18:25 +00:00
import type { Chat, Message, MutationCreateMessageArgs } from '../graphql/schema/chat.gen'
2023-02-10 01:19:20 +00:00
import type { Accessor, JSX } from 'solid-js'
2023-11-28 15:36:00 +00:00
2023-11-28 13:18:25 +00:00
import { createContext, createSignal, useContext } from 'solid-js'
2023-11-28 15:36:00 +00:00
2023-11-28 13:18:25 +00:00
import { inboxClient } from '../graphql/client/chat'
2023-11-28 15:36:00 +00:00
import { loadMessages } from '../stores/inbox'
import { SSEMessage, useConnect } from './connect'
2022-11-24 15:39:31 +00:00
type InboxContextType = {
2022-12-17 03:27:00 +00:00
chats: Accessor<Chat[]>
messages?: Accessor<Message[]>
2022-11-24 15:39:31 +00:00
actions: {
2022-12-17 03:27:00 +00:00
createChat: (members: number[], title: string) => Promise<{ chat: Chat }>
loadChats: () => Promise<void>
getMessages?: (chatId: string) => Promise<void>
sendMessage?: (args: MutationCreateMessageArgs) => void
2022-11-24 15:39:31 +00:00
}
}
const InboxContext = createContext<InboxContextType>()
export function useInbox() {
return useContext(InboxContext)
}
export const InboxProvider = (props: { children: JSX.Element }) => {
2022-12-17 03:27:00 +00:00
const [chats, setChats] = createSignal<Chat[]>([])
const [messages, setMessages] = createSignal<Message[]>([])
2023-11-28 13:18:25 +00:00
const handleMessage = (sseMessage: SSEMessage) => {
2023-11-16 12:23:55 +00:00
console.log('[context.inbox]:', sseMessage)
2023-10-19 14:44:26 +00:00
// TODO: handle all action types: create update delete join left
2023-11-28 13:18:25 +00:00
if (sseMessage.entity === 'message') {
2023-11-16 12:23:55 +00:00
const relivedMessage = sseMessage.payload
setMessages((prev) => [...prev, relivedMessage])
2023-11-28 13:18:25 +00:00
} else if (sseMessage.entity === 'chat') {
2023-11-16 15:34:37 +00:00
const relivedChat = sseMessage.payload
setChats((prev) => [...prev, relivedChat])
2023-10-19 14:44:26 +00:00
}
2023-10-17 06:37:11 +00:00
}
2023-11-28 13:18:25 +00:00
const { addHandler } = useConnect()
addHandler(handleMessage)
2023-10-08 17:44:00 +00:00
2022-12-17 03:27:00 +00:00
const loadChats = async () => {
try {
2023-10-11 18:43:13 +00:00
const newChats = await inboxClient.loadChats({ limit: 50, offset: 0 })
2022-12-17 03:27:00 +00:00
setChats(newChats)
} catch (error) {
2023-10-15 12:09:31 +00:00
console.log('[loadChats]', error)
2022-12-17 03:27:00 +00:00
}
}
const getMessages = async (chatId: string) => {
if (!chatId) return
try {
const response = await loadMessages({ chat: chatId })
setMessages(response as unknown as Message[])
} catch (error) {
2023-10-13 21:39:08 +00:00
console.error('Error loading messages:', error)
2022-12-17 03:27:00 +00:00
}
}
2023-10-13 21:39:08 +00:00
const sendMessage = async (args: MutationCreateMessageArgs) => {
2022-12-17 03:27:00 +00:00
try {
2023-10-09 22:17:29 +00:00
const message = await inboxClient.createMessage(args)
2022-12-17 03:27:00 +00:00
setMessages((prev) => [...prev, message])
2023-11-17 09:00:00 +00:00
const currentChat = chats().find((chat) => chat.id === args.chat_id)
2022-12-17 03:27:00 +00:00
setChats((prev) => [
...prev.filter((c) => c.id !== currentChat.id),
2023-11-28 13:18:25 +00:00
{ ...currentChat, updated_at: message.created_at },
2022-12-17 03:27:00 +00:00
])
} catch (error) {
2023-10-13 21:39:08 +00:00
console.error('Error sending message:', error)
2022-12-17 03:27:00 +00:00
}
}
2022-11-24 15:39:31 +00:00
2022-12-02 11:11:45 +00:00
const createChat = async (members: number[], title: string) => {
2023-10-13 21:39:08 +00:00
try {
const chat = await inboxClient.createChat({ members, title })
setChats((prevChats) => [chat, ...prevChats])
return chat
} catch (error) {
console.error('Error creating chat:', error)
}
2022-11-24 15:39:31 +00:00
}
const actions = {
2022-12-17 03:27:00 +00:00
createChat,
loadChats,
getMessages,
2023-11-17 16:22:54 +00:00
sendMessage,
2022-11-24 15:39:31 +00:00
}
2022-11-27 05:49:48 +00:00
2022-12-17 03:27:00 +00:00
const value: InboxContextType = { chats, messages, actions }
2023-10-13 21:39:08 +00:00
2022-11-24 15:39:31 +00:00
return <InboxContext.Provider value={value}>{props.children}</InboxContext.Provider>
}