Create chat

src/components/Inbox/DialogAvatar.tsx

@@ -18,10 +18,10 @@ const colors = [
   '#ca6702',
   '#ae2012',
   '#9b2226',
-  '#668CFF',
-  '#C34CFE',
-  '#E699FF',
-  '#6633FF'
+  '#668cff',
+  '#c34cfe',
+  '#e699ff',
+  '#6633ff'
 ]
 
 const getById = (letter: string) =>

src/components/Inbox/DialogCard.tsx

@@ -2,6 +2,11 @@ import './DialogCard.module.scss'
 import styles from './DialogCard.module.scss'
 import DialogAvatar from './DialogAvatar'
 import type { Author } from '../../graphql/types.gen'
+import { useAuthStore } from '../../stores/auth'
+import { createEffect, createSignal } from 'solid-js'
+import { apiClient } from '../../utils/apiClient'
+
+const { session } = useAuthStore()
 
 type Props = {
   online?: boolean
@@ -9,9 +14,30 @@ type Props = {
   counter?: number
 } & Author
 
+const createChat = async ({ title, members }: { title?: string; members?: string[] }): Promise<void> => {
+  await apiClient.createChat({ title, members })
+}
+
 const DialogCard = (props: Props) => {
+  const [currentUser, setCurrentUser] = createSignal(undefined)
+  createEffect(() => {
+    setCurrentUser(session()?.user?.slug)
+  })
+
+  const handleOpenChat = async () => {
+    try {
+      const test = await apiClient.createChat({
+        title: 'test chat',
+        members: [props.slug, currentUser()]
+      })
+      console.log('!!! test:', test)
+    } catch (err) {
+      console.log('!!! errr:', err)
+    }
+  }
+
   return (
-    <div class={styles.DialogCard} onClick={handleGoToChat}>
+    <div class={styles.DialogCard} onClick={handleOpenChat}>
       <div class={styles.avatar}>
         <DialogAvatar name={props.name} url={props.userpic} online={props.online} />
       </div>

src/components/Views/Inbox.tsx

@@ -6,17 +6,20 @@ import { Loading } from '../Loading'
 import DialogCard from '../Inbox/DialogCard'
 import Search from '../Inbox/Search'
 import { useAuthorsStore } from '../../stores/zine/authors'
+// const { session } = useAuthStore()
 
 import '../../styles/Inbox.scss'
 // Для моков
 import { createClient } from '@urql/core'
 import { findAndLoadGraphQLConfig } from '@graphql-codegen/cli'
+import { useAuthStore } from '../../stores/auth'
 
 const OWNER_ID = '501'
 const client = createClient({
   url: 'https://graphqlzero.almansi.me/api'
 })
 
+// console.log('!!! session:', session)
 // interface InboxProps {
 //   chats?: Chat[]
 //   messages?: Message[]
@@ -58,6 +61,7 @@ export const InboxView = () => {
   const [authors, setAuthors] = createSignal<Author[]>([])
   const [postMessageText, setPostMessageText] = createSignal('')
   const [loading, setLoading] = createSignal<boolean>(false)
+
   const { sortedAuthors } = useAuthorsStore()
 
   createEffect(() => {

src/graphql/mutation/create-chat.ts

@@ -0,0 +1,12 @@
+import { gql } from '@urql/core'
+
+export default gql`
+  mutation CreateChat($title: String, $members: [String]!) {
+    createChat(title: $title, members: $members) {
+      error
+      chat {
+        id
+      }
+    }
+  }
+`

src/utils/apiClient.ts

@@ -29,6 +29,7 @@ import authorsBySlugs from '../graphql/query/authors-by-slugs'
 import incrementView from '../graphql/mutation/increment-view'
 import myChats from '../graphql/query/im-chats'
 import loadChat from '../graphql/query/im-load-messages'
+import CreateChat from '../graphql/mutation/create-chat'
 
 const FEED_SIZE = 50
 
@@ -326,6 +327,10 @@ export const apiClient = {
   incrementView: async ({ articleSlug }) => {
     await privateGraphQLClient.mutation(incrementView, { shout: articleSlug })
   },
+  createChat: async ({ title, members }) => {
+    return await privateGraphQLClient.mutation(CreateChat, { title: title, members: members }).toPromise()
+  },
+
   getChats: async (payload = {}) => {
     const resp = await privateGraphQLClient.query(myChats, payload).toPromise()
     return resp.data.myChats