diff --git a/src/components/Inbox/DialogAvatar.module.scss b/src/components/Inbox/DialogAvatar.module.scss index c442c24c..6c6c341a 100644 --- a/src/components/Inbox/DialogAvatar.module.scss +++ b/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%; diff --git a/src/components/Inbox/DialogAvatar.tsx b/src/components/Inbox/DialogAvatar.tsx index d0865ed9..e6609366 100644 --- a/src/components/Inbox/DialogAvatar.tsx +++ b/src/components/Inbox/DialogAvatar.tsx @@ -40,7 +40,7 @@ const DialogAvatar = (props: Props) => { style={{ 'background-color': `${randomBg()}` }} >
{nameFirstLetter}
}> - {props.name} +
) diff --git a/src/components/Inbox/DialogCard.tsx b/src/components/Inbox/DialogCard.tsx index 62958081..f4686fa4 100644 --- a/src/components/Inbox/DialogCard.tsx +++ b/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 => { - await apiClient.createChat({ title, members }) + ownSlug: Author['slug'] } const DialogCard = (props: DialogProps) => { - const { session } = useSession() - const currentSession = createMemo(() => 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) } } diff --git a/src/components/Nav/Header.tsx b/src/components/Nav/Header.tsx index 9a624fb7..8850e141 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 c9275fc3..7483bf3c 100644 --- a/src/components/Pages/InboxPage.tsx +++ b/src/components/Pages/InboxPage.tsx @@ -4,7 +4,7 @@ import type { PageProps } from '../types' export const InboxPage = (props: PageProps) => { return ( - + ) diff --git a/src/components/Views/Inbox.tsx b/src/components/Views/Inbox.tsx index 7d32e1f8..d32ff9dc 100644 --- a/src/components/Views/Inbox.tsx +++ b/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([]) + const [cashedAuthors, setCashedAuthors] = createSignal([]) const [postMessageText, setPostMessageText] = createSignal('') const [loading, setLoading] = createSignal(false) const [currentSlug, setCurrentSlug] = createSignal() + const [chats, setChats] = createSignal([]) 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 (
@@ -149,13 +156,15 @@ export const InboxView = () => {
  • Все
  • -
  • Переписки
  • +
  • Переписки
  • Группы
  • - {(author) => } + + {(author) => } +
    diff --git a/src/graphql/mutation/create-chat-message.ts b/src/graphql/mutation/create-chat-message.ts new file mode 100644 index 00000000..9fda159a --- /dev/null +++ b/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 + } + } + } +` diff --git a/src/stores/inbox.ts b/src/stores/inbox.ts index 72996b41..19e727da 100644 --- a/src/stores/inbox.ts +++ b/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([]) + +export const loadAuthorsBy = async (by?: any): Promise => { + return await apiClient.getAuthorsBy({ by }) +} + +export const loadChats = async (): Promise => { + return await apiClient.getChats({ limit: 0, offset: 50 }) +} diff --git a/src/styles/Inbox.scss b/src/styles/Inbox.scss index 9c38c20b..78cb5f16 100644 --- a/src/styles/Inbox.scss +++ b/src/styles/Inbox.scss @@ -7,7 +7,7 @@ main { // TODO: добавлять когда открыт чат body { - overflow: hidden; + //overflow: hidden; } .messages { diff --git a/src/utils/apiClient.ts b/src/utils/apiClient.ts index af5ef3c7..1bf66b1e 100644 --- a/src/utils/apiClient.ts +++ b/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 => { @@ -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 },