init inbox context

src/components/Inbox/DialogCard.tsx

@@ -25,6 +25,7 @@ const DialogCard = (props: DialogProps) => {
   }
 
   return (
+    //DialogCardView - подумать
     <div class={styles.DialogCard} onClick={handleOpenChat}>
       <div class={styles.avatar}>
         <DialogAvatar name={props.author.name} url={props.author.userpic} online={props.online} />

src/components/Pages/InboxPage.tsx

@@ -1,10 +1,16 @@
 import { PageWrap } from '../_shared/PageWrap'
 import { InboxView } from '../Views/Inbox'
+import { InboxProvider } from '../../context/inbox'
+import { ShowOnlyOnClient } from '../_shared/ShowOnlyOnClient'
 
 export const InboxPage = () => {
   return (
     <PageWrap hideFooter={true}>
+      <ShowOnlyOnClient>
+        <InboxProvider>
           <InboxView />
+        </InboxProvider>
+      </ShowOnlyOnClient>
     </PageWrap>
   )
 }

src/components/Views/Inbox.tsx

@@ -11,6 +11,7 @@ import Message from '../Inbox/Message'
 import { loadRecipients, loadChats } from '../../stores/inbox'
 import { t } from '../../utils/intl'
 import '../../styles/Inbox.scss'
+import { useInbox } from '../../context/inbox'
 
 const OWNER_ID = '501'
 const client = createClient({
@@ -56,7 +57,7 @@ const postMessage = async (msg: string) => {
 const handleGetChats = async () => {
   try {
     const response = await loadChats()
-    console.log('!!! response:', response)
+    console.log('!!! handleGetChats:', response)
   } catch (error) {
     console.log(error)
   }
@@ -68,14 +69,8 @@ export const InboxView = () => {
   const [cashedRecipients, setCashedRecipients] = createSignal<Author[]>([])
   const [postMessageText, setPostMessageText] = createSignal('')
   const [loading, setLoading] = createSignal<boolean>(false)
-  const [currentSlug, setCurrentSlug] = createSignal<Author['slug'] | null>()
-
   const { session } = useSession()
-  createEffect(() => {
+  const currentSlug = createMemo(() => session()?.user?.slug)
-    console.log('!!! session:', session())
-    setCurrentSlug(session()?.user?.slug)
-  })
-  console.log('!!! currentSlug:', currentSlug())
 
   // Поиск по диалогам
   const getQuery = (query) => {
@@ -112,7 +107,6 @@ export const InboxView = () => {
 
     try {
       const response = await loadRecipients({ days: 365 })
-      console.log('!!! response:', response)
       setRecipients(response as unknown as Author[])
       setCashedRecipients(response as unknown as Author[])
     } catch (error) {
@@ -139,6 +133,10 @@ export const InboxView = () => {
     formParent.dataset.replicatedValue = postMessageText()
   })
 
+  // FIXME: прописать типы
+  // const { chatEntitieies, actions: { createCaht }} = useInbox()
+  // const { actions: { createCaht }} = useInbox()
+
   return (
     <div class="messages container">
       <div class="row">

src/context/inbox.tsx

@@ -0,0 +1,36 @@
+import type { JSX } from 'solid-js'
+import { createContext, useContext } from 'solid-js'
+import type { Message, Chat } from '../graphql/types.gen'
+import { apiClient } from '../utils/apiClient'
+import { createStore } from 'solid-js/store'
+
+type InboxContextType = {
+  chatEntities: { [chatId: string]: Message[] }
+  actions: {
+    createChat: (memberSlugs: string[], title?: string) => Promise<void>
+  }
+}
+
+const InboxContext = createContext<InboxContextType>()
+
+export function useInbox() {
+  return useContext(InboxContext)
+}
+
+export const InboxProvider = (props: { children: JSX.Element }) => {
+  const [chatEntities, setChatEntities] = createStore({})
+
+  const createChat = async (memberSlugs: string[], title?: string) => {
+    // @ts-ignore FIXME: вывести типы
+    const chat = await apiClient.createChat({ string, title })
+
+    // @ts-ignore FIXME: вывести типы
+    setChatEntities(chat.id, chat)
+  }
+
+  const actions = {
+    createChat
+  }
+  const value: InboxContextType = { chatEntities, actions }
+  return <InboxContext.Provider value={value}>{props.children}</InboxContext.Provider>
+}