From 6a94474732801b081f99afec2efb78564ebf31e5 Mon Sep 17 00:00:00 2001 From: ilya-bkv Date: Thu, 24 Nov 2022 09:52:31 +0300 Subject: [PATCH] Resolve Conversation --- src/components/Inbox/DialogAvatar.module.scss | 8 ++--- src/components/Inbox/DialogAvatar.tsx | 5 ++- src/components/Inbox/DialogCard.module.scss | 2 +- src/components/Nav/Header.tsx | 2 +- src/components/Pages/InboxPage.tsx | 3 +- src/components/Views/Inbox.tsx | 23 +++++------- src/graphql/query/chats-load.ts | 16 +++++---- src/locales/ru.json | 5 ++- src/stores/inbox.ts | 4 --- src/styles/Inbox.scss | 19 ++++------ src/utils/apiClient.ts | 36 ++++++++----------- src/utils/config.ts | 2 +- 12 files changed, 55 insertions(+), 70 deletions(-) diff --git a/src/components/Inbox/DialogAvatar.module.scss b/src/components/Inbox/DialogAvatar.module.scss index 6c6c341a..626aa88a 100644 --- a/src/components/Inbox/DialogAvatar.module.scss +++ b/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; } } diff --git a/src/components/Inbox/DialogAvatar.tsx b/src/components/Inbox/DialogAvatar.tsx index e6609366..fd0ebdc0 100644 --- a/src/components/Inbox/DialogAvatar.tsx +++ b/src/components/Inbox/DialogAvatar.tsx @@ -36,7 +36,10 @@ const DialogAvatar = (props: Props) => { return (
{nameFirstLetter}
}> diff --git a/src/components/Inbox/DialogCard.module.scss b/src/components/Inbox/DialogCard.module.scss index 723c344e..a3b62656 100644 --- a/src/components/Inbox/DialogCard.module.scss +++ b/src/components/Inbox/DialogCard.module.scss @@ -62,7 +62,7 @@ height: 22px; line-height: 6px; - > span { + span { margin-bottom: -2px; } } diff --git a/src/components/Nav/Header.tsx b/src/components/Nav/Header.tsx index 8850e141..d90cd6df 100644 --- a/src/components/Nav/Header.tsx +++ b/src/components/Nav/Header.tsx @@ -129,7 +129,7 @@ export const Header = (props: Props) => { containerCssClass={styles.control} trigger={} /> - + event.preventDefault()}> diff --git a/src/components/Pages/InboxPage.tsx b/src/components/Pages/InboxPage.tsx index 7483bf3c..67a01ab3 100644 --- a/src/components/Pages/InboxPage.tsx +++ b/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 ( diff --git a/src/components/Views/Inbox.tsx b/src/components/Views/Inbox.tsx index 07fe378b..3b6feccd 100644 --- a/src/components/Views/Inbox.tsx +++ b/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, Chat } from '../../graphql/types.gen' +import type { Author } 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 = () => {
  • - Все + {t('All')}
    • -
  • Переписки
    • -
  • Группы
    • +
  • {t('Conversations')}
    • +
  • {t('Groups')}
diff --git a/src/graphql/query/chats-load.ts b/src/graphql/query/chats-load.ts index de9b8610..343742eb 100644 --- a/src/graphql/query/chats-load.ts +++ b/src/graphql/query/chats-load.ts @@ -5,21 +5,23 @@ export default gql` loadChats(limit: $limit, offset: $offset) { error chats { - title - description - updatedAt + id messages { id - author body - replyTo - createdAt + author + } + admins { + slug + name } users { slug name - userpic } + unread + description + updatedAt } } } diff --git a/src/locales/ru.json b/src/locales/ru.json index d65efc8b..9d544a05 100644 --- a/src/locales/ru.json +++ b/src/locales/ru.json @@ -180,5 +180,8 @@ "view": "просмотр", "zine": "журнал", "shout": "пост", - "discussion": "дискурс" + "discussion": "дискурс", + "Conversations": "Переписки", + "Groups": "Группы", + "All": "Все" } diff --git a/src/stores/inbox.ts b/src/stores/inbox.ts index 19e727da..58f541fb 100644 --- a/src/stores/inbox.ts +++ b/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([]) - export const loadAuthorsBy = async (by?: any): Promise => { return await apiClient.getAuthorsBy({ by }) } diff --git a/src/styles/Inbox.scss b/src/styles/Inbox.scss index 78cb5f16..57709423 100644 --- a/src/styles/Inbox.scss +++ b/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; diff --git a/src/utils/apiClient.ts b/src/utils/apiClient.ts index 49733097..29decbfb 100644 --- a/src/utils/apiClient.ts +++ b/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 }) => { - const resp = await publicGraphQLClient.query(authorsLoadBy, { by, limit, offset }).toPromise() + getAuthorsBy: async (options: QueryLoadAuthorsByArgs) => { + 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 }) => { - const resp = await privateGraphQLClient.query(myChats, { limit, offset }).toPromise() - console.log('!!! resp.data.myChats:', resp) + getChats: async (options: QueryLoadChatsArgs) => { + const resp = await privateGraphQLClient.query(myChats, options).toPromise() + console.debug('[getChats]', resp) return resp.data.myChats }, - getChatMessages: async ({ - chat, - limit = 50, - offset = 0 - }: { - chat: string - limit?: number - offset?: number - }) => { - const by = { - chat - } - const resp = await privateGraphQLClient.query(chatMessagesLoadBy, { by, offset, limit }).toPromise() + getChatMessages: async (options: QueryLoadMessagesByArgs) => { + const resp = await privateGraphQLClient.query(chatMessagesLoadBy, options).toPromise() return resp.data.loadChat } } diff --git a/src/utils/config.ts b/src/utils/config.ts index 91249ba8..428dcddb 100644 --- a/src/utils/config.ts +++ b/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