Resolve Conversation

src/components/Inbox/DialogAvatar.module.scss

@@ -18,7 +18,7 @@
     border-radius: 50%;
     border: 3px solid #fff;
   }
-  > .imageHolder {
+  .imageHolder {
     background-size: cover;
     width: 100%;
     height: 100%;
@@ -26,12 +26,12 @@
     border-radius: 100%;
   }
 
-  > .letter {
+  .letter {
     display: block;
     border-radius: 100%;
   }
 
-  > .letter {
+  .letter {
     margin-bottom: -2px;
     font-weight: 500;
     font-size: 18px;
@@ -43,7 +43,7 @@
     width: 24px;
     height: 24px;
 
-    > .letter {
+    .letter {
       font-size: 14px;
     }
   }

src/components/Inbox/DialogAvatar.tsx

@@ -36,7 +36,10 @@ const DialogAvatar = (props: Props) => {
 
   return (
     <div
-      class={clsx(styles.DialogAvatar, props.online && styles.online, `${styles[props.size]}`)}
+      class={clsx(styles.DialogAvatar, {
+        [styles.online]: props.online,
+        [styles.small]: props.size === 'small'
+      })}
       style={{ 'background-color': `${randomBg()}` }}
     >
       <Show when={props.url} fallback={() => <div class={styles.letter}>{nameFirstLetter}</div>}>

src/components/Inbox/DialogCard.module.scss

@@ -62,7 +62,7 @@
       height: 22px;
       line-height: 6px;
 
-      > span {
+      span {
         margin-bottom: -2px;
       }
     }

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={'/inbox'} class={styles.control}>
+              <a href={getPagePath(router, '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

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

src/components/Views/Inbox.tsx

@@ -1,24 +1,19 @@
 import { For, createSignal, Show, onMount, createEffect } from 'solid-js'
-import { PageWrap } from '../_shared/PageWrap'
+import type { Author } from '../../graphql/types.gen'
-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 { loadAllAuthors, useAuthorsStore } from '../../stores/zine/authors'
-import MarkdownIt from 'markdown-it'
 import { useSession } from '../../context/session'
 
 import '../../styles/Inbox.scss'
 // Для моков
 import { createClient } from '@urql/core'
 import Message from '../Inbox/Message'
-import { loadAuthorsBy, loadChats, chats, setChats } from '../../stores/inbox'
+import { loadAuthorsBy, loadChats } from '../../stores/inbox'
+import { t } from '../../utils/intl'
 
-const md = new MarkdownIt({
-  linkify: true
-})
 const OWNER_ID = '501'
 const client = createClient({
   url: 'https://graphqlzero.almansi.me/api'
@@ -63,7 +58,7 @@ const postMessage = async (msg: string) => {
 const handleGetChats = async () => {
   try {
     const response = await loadChats()
-    setChats(response as unknown as Chat[])
+    console.log('!!! response:', response)
   } catch (error) {
     console.log(error)
   }
@@ -79,9 +74,7 @@ export const InboxView = () => {
 
   const { session } = useSession()
   createEffect(() => {
-    console.log('!!! session():', session())
     setCurrentSlug(session()?.user?.slug)
-    console.log('!!! chats:', chats())
   })
 
   // Поиск по диалогам
@@ -90,7 +83,7 @@ export const InboxView = () => {
       const match = userSearch(authors(), query())
       setAuthors(match)
     } else {
-      setAuthors(cashedAuthors)
+      setAuthors(cashedAuthors())
     }
   }
 
@@ -153,10 +146,10 @@ export const InboxView = () => {
           <div class="chat-list__types">
             <ul>
               <li>
-                <strong>Все</strong>
+                <strong>{t('All')}</strong>
               </li>
-              <li onClick={handleGetChats}>Переписки</li>
+              <li onClick={handleGetChats}>{t('Conversations')}</li>
-              <li>Группы</li>
+              <li>{t('Groups')}</li>
             </ul>
           </div>
           <div class="holder">

src/graphql/query/chats-load.ts

@@ -5,21 +5,23 @@ export default gql`
     loadChats(limit: $limit, offset: $offset) {
       error
       chats {
-        title
+        id
-        description
-        updatedAt
         messages {
           id
-          author
           body
-          replyTo
+          author
-          createdAt
+        }
+        admins {
+          slug
+          name
         }
         users {
           slug
           name
-          userpic
         }
+        unread
+        description
+        updatedAt
       }
     }
   }

src/locales/ru.json

@@ -180,5 +180,8 @@
   "view": "просмотр",
   "zine": "журнал",
   "shout": "пост",
-  "discussion": "дискурс"
+  "discussion": "дискурс",
+  "Conversations": "Переписки",
+  "Groups": "Группы",
+  "All": "Все"
 }

src/stores/inbox.ts

@@ -1,9 +1,5 @@
-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 })
 }

src/styles/Inbox.scss

@@ -5,11 +5,6 @@ main {
   position: relative;
 }
 
-// TODO: добавлять когда открыт чат
-body {
-  //overflow: hidden;
-}
-
 .messages {
   top: 74px;
   height: calc(100% - 74px);
@@ -24,7 +19,7 @@ body {
   position: fixed;
   z-index: 9;
 
-  > .row {
+  .row {
     flex: 1;
   }
 
@@ -171,7 +166,7 @@ body {
   background: #fff;
   padding: 2px 0 12px 0;
 
-  > .wrapper {
+  .wrapper {
     border: 2px solid #cccccc;
     border-radius: 16px;
     padding: 4px;
@@ -179,7 +174,7 @@ body {
     flex-direction: row;
     align-items: center;
 
-    > .grow-wrap {
+    .grow-wrap {
       display: grid;
       width: 100%;
 
@@ -190,7 +185,7 @@ body {
         transition: height 1.3s ease-in-out;
       }
 
-      & > textarea {
+      & textarea {
         margin-bottom: 0;
         font-family: inherit;
         border: none;
@@ -207,7 +202,7 @@ body {
       }
 
       &::after,
-      & > textarea {
+      & textarea {
         /* Identical styling required!! */
         font-weight: 400;
         font-size: 14px;
@@ -218,7 +213,7 @@ body {
       }
     }
 
-    > button {
+    button {
       border: none;
       cursor: pointer;
       text-align: center;
@@ -232,7 +227,7 @@ body {
         }
       }
 
-      > .icon {
+      .icon {
         width: 100%;
         height: 100%;
         opacity: 0.2;

src/utils/apiClient.ts

@@ -4,7 +4,10 @@ import type {
   ShoutInput,
   Topic,
   Author,
-  LoadShoutsOptions
+  LoadShoutsOptions,
+  QueryLoadChatsArgs,
+  QueryLoadAuthorsByArgs,
+  QueryLoadMessagesByArgs
 } from '../graphql/types.gen'
 import { publicGraphQLClient } from '../graphql/publicGraphQLClient'
 import { getToken, privateGraphQLClient } from '../graphql/privateGraphQLClient'
@@ -29,7 +32,6 @@ 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 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'
@@ -239,8 +241,8 @@ export const apiClient = {
 
     return response.data.deleteReaction
   },
-  getAuthorsBy: async ({ by, limit = 50, offset = 0 }) => {
+  getAuthorsBy: async (options: QueryLoadAuthorsByArgs) => {
-    const resp = await publicGraphQLClient.query(authorsLoadBy, { by, limit, offset }).toPromise()
+    const resp = await publicGraphQLClient.query(authorsLoadBy, options).toPromise()
     return resp.data.loadAuthorsBy
   },
   getShout: async (slug: string) => {
@@ -262,30 +264,22 @@ export const apiClient = {
   },
   getReactionsBy: async ({ by, limit = REACTIONS_AMOUNT_PER_PAGE, offset = 0 }) => {
     const resp = await publicGraphQLClient.query(reactionsLoadBy, { by, limit, offset }).toPromise()
-    resp.error ?? console.error(resp.error)
+    if (resp.error) {
+      console.error(resp.error)
+      return
+    }
     return resp.data.loadReactionsBy
   },
 
   // inbox
-  getChats: async ({ limit, offset }) => {
+  getChats: async (options: QueryLoadChatsArgs) => {
-    const resp = await privateGraphQLClient.query(myChats, { limit, offset }).toPromise()
+    const resp = await privateGraphQLClient.query(myChats, options).toPromise()
-    console.log('!!! resp.data.myChats:', resp)
+    console.debug('[getChats]', resp)
     return resp.data.myChats
   },
 
-  getChatMessages: async ({
+  getChatMessages: async (options: QueryLoadMessagesByArgs) => {
-    chat,
+    const resp = await privateGraphQLClient.query(chatMessagesLoadBy, options).toPromise()
-    limit = 50,
-    offset = 0
-  }: {
-    chat: string
-    limit?: number
-    offset?: number
-  }) => {
-    const by = {
-      chat
-    }
-    const resp = await privateGraphQLClient.query(chatMessagesLoadBy, { by, offset, limit }).toPromise()
     return resp.data.loadChat
   }
 }

src/utils/config.ts

@@ -1,4 +1,4 @@
 export const isDev = import.meta.env.MODE === 'development'
 
-const defaultApiUrl = 'https://v2.discours.io'
+const defaultApiUrl = 'https://testapi.discours.io'
 export const apiBaseUrl = import.meta.env.PUBLIC_API_URL || defaultApiUrl