[WIP] Chat creation

src/components/Inbox/DialogAvatar.module.scss

@@ -18,8 +18,14 @@
     border-radius: 50%;
     border: 3px solid #fff;
   }
+  > .imageHolder {
+    background-size: cover;
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    border-radius: 100%;
+  }
 
-  > img,
   > .letter {
     display: block;
     border-radius: 100%;

src/components/Inbox/DialogAvatar.tsx

@@ -40,7 +40,7 @@ const DialogAvatar = (props: Props) => {
       style={{ 'background-color': `${randomBg()}` }}
     >
       <Show when={props.url} fallback={() => <div class={styles.letter}>{nameFirstLetter}</div>}>
-        <img src={props.url} alt={props.name} />
+        <div class={styles.imageHolder} style={{ 'background-image': `url(${props.url})` }} />
       </Show>
     </div>
   )

src/components/Inbox/DialogCard.tsx

@@ -2,7 +2,7 @@ import styles from './DialogCard.module.scss'
 import DialogAvatar from './DialogAvatar'
 import type { Author, AuthResult } from '../../graphql/types.gen'
 import { useSession } from '../../context/session'
-import { createMemo } from 'solid-js'
+import { createEffect, createMemo, createSignal } from 'solid-js'
 import { apiClient } from '../../utils/apiClient'
 
 type DialogProps = {
@@ -10,25 +10,19 @@ type DialogProps = {
   message?: string
   counter?: number
   author?: Author
-}
-
-const createChat = async ({ title, members }: { title?: string; members?: string[] }): Promise<void> => {
-  await apiClient.createChat({ title, members })
+  ownSlug: Author['slug']
 }
 
 const DialogCard = (props: DialogProps) => {
-  const { session } = useSession()
-  const currentSession = createMemo<AuthResult>(() => session)
-
   const handleOpenChat = async () => {
     try {
       const initChat = await apiClient.createChat({
         title: 'test chat',
-        members: [props.author.slug, currentSession().user.slug]
+        members: [props.author.slug, props.ownSlug]
       })
-      // console.log('!!! test:', test)
+      console.debug('[initChat]', initChat.data)
     } catch (error) {
-      console.log('!!! errr:', error)
+      console.error(error)
     }
   }
 

src/components/Nav/Header.tsx

@@ -129,7 +129,7 @@ export const Header = (props: Props) => {
                 containerCssClass={styles.control}
                 trigger={<Icon name="share-outline" class={styles.icon} />}
               />
-              <a href="#comments" class={styles.control}>
+              <a href={'/inbox'} class={styles.control}>
                 <Icon name="comments-outline" class={styles.icon} />
               </a>
               <a href="#" class={styles.control} onClick={(event) => event.preventDefault()}>

src/components/Pages/InboxPage.tsx

@@ -4,7 +4,7 @@ import type { PageProps } from '../types'
 
 export const InboxPage = (props: PageProps) => {
   return (
-    <PageWrap>
+    <PageWrap hideFooter={true}>
       <InboxView />
     </PageWrap>
   )

src/components/Views/Inbox.tsx

@@ -1,22 +1,20 @@
 import { For, createSignal, Show, onMount, createEffect } from 'solid-js'
-import type { Author } from '../../graphql/types.gen'
+import { PageWrap } from '../_shared/PageWrap'
+import type { Author, Chat } from '../../graphql/types.gen'
 import { AuthorCard } from '../Author/Card'
 import { Icon } from '../_shared/Icon'
 import { Loading } from '../Loading'
 import DialogCard from '../Inbox/DialogCard'
 import Search from '../Inbox/Search'
-import { useAuthorsStore } from '../../stores/zine/authors'
+import { loadAllAuthors, useAuthorsStore } from '../../stores/zine/authors'
 import MarkdownIt from 'markdown-it'
-// const { session } = useAuthStore()
+import { useSession } from '../../context/session'
 
 import '../../styles/Inbox.scss'
 // Для моков
 import { createClient } from '@urql/core'
-import { findAndLoadGraphQLConfig } from '@graphql-codegen/cli'
-// import { useAuthStore } from '../../stores/auth'
-import { useSession } from '../../context/session'
-import { SVGNamespace } from 'solid-js/web'
 import Message from '../Inbox/Message'
+import { loadAuthorsBy, loadChats, setChats } from '../../stores/inbox'
 
 const md = new MarkdownIt({
   linkify: true
@@ -26,12 +24,6 @@ const client = createClient({
   url: 'https://graphqlzero.almansi.me/api'
 })
 
-// console.log('!!! session:', session)
-// interface InboxProps {
-//   chats?: Chat[]
-//   messages?: Message[]
-// }
-
 const messageQuery = `
 query Comments ($options: PageQueryOptions) {
   comments(options: $options) {
@@ -71,28 +63,26 @@ const postMessage = async (msg: string) => {
 export const InboxView = () => {
   const [messages, setMessages] = createSignal([])
   const [authors, setAuthors] = createSignal<Author[]>([])
+  const [cashedAuthors, setCashedAuthors] = createSignal<Author[]>([])
   const [postMessageText, setPostMessageText] = createSignal('')
   const [loading, setLoading] = createSignal<boolean>(false)
   const [currentSlug, setCurrentSlug] = createSignal<Author['slug'] | null>()
+  const [chats, setChats] = createSignal<Chat[] | []>([])
 
   const { session } = useSession()
-  const { authorEntities } = useAuthorsStore()
-  console.log('!!! loadAllAuthors:', authorEntities())
-
   createEffect(() => {
-    // setAuthors(authorEntities())
     console.log('!!! session():', session())
     setCurrentSlug(session()?.user?.slug)
+    console.log('!!! chats:', chats())
   })
 
   // Поиск по диалогам
   const getQuery = (query) => {
     if (query().length >= 2) {
       const match = userSearch(authors(), query())
-      console.log('!!! match:', match)
       setAuthors(match)
     } else {
-      // setAuthors(sortedAuthors())
+      setAuthors(cashedAuthors)
     }
   }
 
@@ -118,6 +108,14 @@ export const InboxView = () => {
       setLoading(false)
       chatWindow.scrollTop = chatWindow.scrollHeight
     }
+
+    try {
+      const response = await loadAuthorsBy({ days: 365 })
+      setAuthors(response as unknown as Author[])
+      setCashedAuthors(response as unknown as Author[])
+    } catch (error) {
+      console.log(error)
+    }
   })
 
   const handleSubmit = async () => {
@@ -139,6 +137,15 @@ export const InboxView = () => {
     formParent.dataset.replicatedValue = postMessageText()
   })
 
+  const handleGetChats = async () => {
+    try {
+      const response = await loadChats()
+      setChats(response as unknown as Chat[])
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
   return (
     <div class="messages container">
       <div class="row">
@@ -149,13 +156,15 @@ export const InboxView = () => {
               <li>
                 <strong>Все</strong>
               </li>
-              <li>Переписки</li>
+              <li onClick={handleGetChats}>Переписки</li>
               <li>Группы</li>
             </ul>
           </div>
           <div class="holder">
             <div class="dialogs">
-              <For each={authors()}>{(author) => <DialogCard author={author} online={true} />}</For>
+              <For each={authors()}>
+                {(author) => <DialogCard ownSlug={currentSlug()} author={author} online={true} />}
+              </For>
             </div>
           </div>
         </div>

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

@@ -0,0 +1,13 @@
+import { gql } from '@urql/core'
+
+export default gql`
+  mutation createMessage($chat: String!, $body: String!) {
+    createMessage(chat: $chat, body: $body) {
+      error
+      author {
+        slug
+        id
+      }
+    }
+  }
+`

src/stores/inbox.ts

@@ -1,4 +1,13 @@
 import { createSignal } from 'solid-js'
 import type { Chat } from '../graphql/types.gen'
+import { apiClient } from '../utils/apiClient'
 
 export const [chats, setChats] = createSignal<Chat[]>([])
+
+export const loadAuthorsBy = async (by?: any): Promise<void> => {
+  return await apiClient.getAuthorsBy({ by })
+}
+
+export const loadChats = async (): Promise<void> => {
+  return await apiClient.getChats({ limit: 0, offset: 50 })
+}

src/styles/Inbox.scss

@@ -7,7 +7,7 @@ main {
 
 // TODO: добавлять когда открыт чат
 body {
-  overflow: hidden;
+  //overflow: hidden;
 }
 
 .messages {

src/utils/apiClient.ts

@@ -28,7 +28,8 @@ import myChats from '../graphql/query/chats-load'
 import chatMessagesLoadBy from '../graphql/query/chat-messages-load-by'
 import authorBySlug from '../graphql/query/author-by-slug'
 import topicBySlug from '../graphql/query/topic-by-slug'
-import createChatQuery from '../graphql/mutation/create-chat'
+import createChat from '../graphql/mutation/create-chat'
+import createMessage from '../graphql/mutation/create-chat-message'
 import reactionsLoadBy from '../graphql/query/reactions-load-by'
 import { REACTIONS_AMOUNT_PER_PAGE } from '../stores/zine/reactions'
 import authorsLoadBy from '../graphql/query/authors-load-by'
@@ -196,7 +197,6 @@ export const apiClient = {
     if (response.error) {
       console.debug('[api-client] getAllAuthors', response.error)
     }
-    console.log('!!! getAllAuthors:', response.data)
     return response.data.authorsAll
   },
   getAuthor: async ({ slug }: { slug: string }): Promise<Author> => {
@@ -222,10 +222,13 @@ export const apiClient = {
   // CUDL
 
   createChat: async ({ title, members }) => {
-    return await privateGraphQLClient
-      .mutation(createChatQuery, { title: title, members: members })
-      .toPromise()
+    return await privateGraphQLClient.mutation(createChat, { title: title, members: members }).toPromise()
   },
+
+  createMessage: async ({ chat, body }) => {
+    return await privateGraphQLClient.mutation(createChat, { chat: chat, body: body }).toPromise()
+  },
+
   updateReaction: async ({ reaction }) => {
     const response = await privateGraphQLClient.mutation(reactionUpdate, { reaction }).toPromise()
 
@@ -236,10 +239,8 @@ export const apiClient = {
 
     return response.data.deleteReaction
   },
-
   getAuthorsBy: async ({ by, limit = 50, offset = 0 }) => {
     const resp = await publicGraphQLClient.query(authorsLoadBy, { by, limit, offset }).toPromise()
-    console.debug(resp)
     return resp.data.loadAuthorsBy
   },
   getShout: async (slug: string) => {
@@ -268,9 +269,9 @@ export const apiClient = {
   },
 
   // inbox
-
-  getChats: async (payload = {}) => {
-    const resp = await privateGraphQLClient.query(myChats, payload).toPromise()
+  getChats: async ({ limit, offset }) => {
+    const resp = await privateGraphQLClient.query(myChats, { limit, offset }).toPromise()
+    console.log('!!! resp.data.myChats:', resp)
     return resp.data.myChats
   },