From 6c9e930a0364c0361a4545b5f454f9ed5a30991f Mon Sep 17 00:00:00 2001 From: ilya-bkv Date: Wed, 15 Nov 2023 16:57:24 +0300 Subject: [PATCH 1/4] - Remove Bearer - change chat endpoint --- src/context/notifications.tsx | 2 +- src/graphql/privateGraphQLClient.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/context/notifications.tsx b/src/context/notifications.tsx index 3c519752..f0476e43 100644 --- a/src/context/notifications.tsx +++ b/src/context/notifications.tsx @@ -96,7 +96,7 @@ export const NotificationsProvider = (props: { children: JSX.Element }) => { if (isAuthenticated()) { loadNotifications() - await fetchEventSource('https://connect.discours.io', { + await fetchEventSource('https://chat.discours.io/connect', { method: 'GET', headers: { 'Content-Type': 'application/json', diff --git a/src/graphql/privateGraphQLClient.ts b/src/graphql/privateGraphQLClient.ts index b39305ac..375001e1 100644 --- a/src/graphql/privateGraphQLClient.ts +++ b/src/graphql/privateGraphQLClient.ts @@ -38,7 +38,7 @@ const options: ClientOptions = { if (!token) { console.error('[privateGraphQLClient] fetchOptions: token is null!') } - const headers = { Authorization: 'Bearer ' + token } + const headers = { Authorization: token } return { headers } }, exchanges From e1a3c881e1738f0d1918984cf0bc1934ae255981 Mon Sep 17 00:00:00 2001 From: ilya-bkv Date: Thu, 16 Nov 2023 15:23:55 +0300 Subject: [PATCH 2/4] Render new messages (WIP) --- src/components/Views/Inbox.tsx | 38 ++++++++++++++++++++++++++++------ src/context/inbox.tsx | 14 ++++++------- 2 files changed, 39 insertions(+), 13 deletions(-) diff --git a/src/components/Views/Inbox.tsx b/src/components/Views/Inbox.tsx index 438c1d26..f4136f90 100644 --- a/src/components/Views/Inbox.tsx +++ b/src/components/Views/Inbox.tsx @@ -1,4 +1,4 @@ -import { For, createSignal, Show, onMount, createEffect, createMemo } from 'solid-js' +import { For, createSignal, Show, onMount, createEffect, createMemo, on } from 'solid-js' import type { Author, Chat, Message as MessageType } from '../../graphql/types.gen' import DialogCard from '../Inbox/DialogCard' import Search from '../Inbox/Search' @@ -50,6 +50,11 @@ export const InboxView = () => { const { session } = useSession() const currentUserId = createMemo(() => session()?.user.id) const { changeSearchParam, searchParams } = useRouter() + + const messagesContainerRef: { current: HTMLDivElement } = { + current: null + } + // Поиск по диалогам const getQuery = (query) => { if (query().length >= 2) { @@ -60,8 +65,6 @@ export const InboxView = () => { } } - let chatWindow - const handleOpenChat = async (chat: Chat) => { setCurrentDialog(chat) changeSearchParam({ @@ -72,7 +75,10 @@ export const InboxView = () => { } catch (error) { console.error('[getMessages]', error) } finally { - chatWindow.scrollTop = chatWindow.scrollHeight + messagesContainerRef.current.scroll({ + top: messagesContainerRef.current.scrollHeight, + behavior: 'instant' + }) } } @@ -108,7 +114,7 @@ export const InboxView = () => { }) setClear(true) setMessageToReply(null) - chatWindow.scrollTop = chatWindow.scrollHeight + messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight setClear(false) } @@ -152,6 +158,26 @@ export const InboxView = () => { return messages().find((message) => message.id === messageId) } + createEffect( + on( + () => messages(), + () => { + if (!messagesContainerRef.current) { + return + } + if (messagesContainerRef.current.scrollTop >= messagesContainerRef.current.scrollHeight) { + //TODO: show new message arrow - bubble + return + } + messagesContainerRef.current.scroll({ + top: messagesContainerRef.current.scrollHeight, + behavior: 'smooth' + }) + } + ), + { defer: true } + ) + return (
@@ -232,7 +258,7 @@ export const InboxView = () => { >
-
+
(messagesContainerRef.current = el)}> {(message) => ( { actions: { setMessageHandler } } = useNotifications() - const handleMessage = (m) => { - console.log('[context.inbox]:', m) + const handleMessage = (sseMessage) => { + console.log('[context.inbox]:', sseMessage) // TODO: handle all action types: create update delete join left - if (['create', 'update', 'delete'].includes(m.action)) { - const msg = m.payload - setMessages((mmm) => [msg, ...mmm]) - } else if (['left', 'join'].includes(m.action)) { + if (['create', 'update', 'delete'].includes(sseMessage.action)) { + const relivedMessage = sseMessage.payload + setMessages((prev) => [...prev, relivedMessage]) + } else if (['left', 'join'].includes(sseMessage.action)) { // TODO: set chat members - console.debug(m) + console.debug(sseMessage) } } From 4faafe89d5a65e62a4a72b02b666ad18c2f59bf5 Mon Sep 17 00:00:00 2001 From: ilya-bkv Date: Thu, 16 Nov 2023 17:20:05 +0300 Subject: [PATCH 3/4] Render new messages --- public/locales/en/translation.json | 3 +- public/locales/ru/translation.json | 3 +- src/components/Inbox/DialogCard.tsx | 29 ++++++++-------- src/components/Inbox/Message.tsx | 2 +- src/components/Views/Inbox.tsx | 51 ++++++++++++++++++++--------- src/context/inbox.tsx | 1 - src/styles/Inbox.module.scss | 19 +++++++++++ src/utils/apiClient.ts | 1 - 8 files changed, 72 insertions(+), 37 deletions(-) diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index d6eb744b..4ee390c4 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -452,5 +452,6 @@ "video": "video", "view": "view", "viewsWithCount": "{count} {count, plural, one {view} other {views}}", - "yesterday": "yesterday" + "yesterday": "yesterday", + "To new messages": "To new messages" } diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json index 3640e6a3..1d1877dd 100644 --- a/public/locales/ru/translation.json +++ b/public/locales/ru/translation.json @@ -476,5 +476,6 @@ "video": "видео", "view": "просмотр", "viewsWithCount": "{count} {count, plural, one {просмотр} few {просмотрa} other {просмотров}}", - "yesterday": "вчера" + "yesterday": "вчера", + "To new messages": "К новым сообщениям" } diff --git a/src/components/Inbox/DialogCard.tsx b/src/components/Inbox/DialogCard.tsx index 52465089..fbc6a179 100644 --- a/src/components/Inbox/DialogCard.tsx +++ b/src/components/Inbox/DialogCard.tsx @@ -1,4 +1,4 @@ -import { Show, Switch, Match, createMemo } from 'solid-js' +import { Show, Switch, Match, createMemo, createEffect } from 'solid-js' import DialogAvatar from './DialogAvatar' import type { ChatMember } from '../../graphql/types.gen' import GroupDialogAvatar from './GroupDialogAvatar' @@ -41,23 +41,20 @@ const DialogCard = (props: DialogProps) => { })} onClick={props.onClick} > - - -
- } - > - - - } - > + + +
+ } + > + + +
+ = 3}>
- +
diff --git a/src/components/Inbox/Message.tsx b/src/components/Inbox/Message.tsx index c9a9df00..2e35c071 100644 --- a/src/components/Inbox/Message.tsx +++ b/src/components/Inbox/Message.tsx @@ -25,7 +25,7 @@ export const Message = (props: Props) => { return (
- +
{user.name}
diff --git a/src/components/Views/Inbox.tsx b/src/components/Views/Inbox.tsx index f4136f90..baab56ce 100644 --- a/src/components/Views/Inbox.tsx +++ b/src/components/Views/Inbox.tsx @@ -19,6 +19,7 @@ import { clsx } from 'clsx' import styles from '../../styles/Inbox.module.scss' import { useLocalize } from '../../context/localize' import SimplifiedEditor from '../Editor/SimplifiedEditor' +import { Popover } from '../_shared/Popover' type InboxSearchParams = { initChat: string @@ -47,6 +48,7 @@ export const InboxView = () => { const [currentDialog, setCurrentDialog] = createSignal() const [messageToReply, setMessageToReply] = createSignal(null) const [isClear, setClear] = createSignal(false) + const [isScrollToNewVisible, setIsScrollToNewVisible] = createSignal(false) const { session } = useSession() const currentUserId = createMemo(() => session()?.user.id) const { changeSearchParam, searchParams } = useRouter() @@ -82,20 +84,6 @@ export const InboxView = () => { } } - /* - createEffect(() => { - setInterval(async () => { - if (!currentDialog()) return - try { - await getMessages(currentDialog().id) - } catch (error) { - console.error('[getMessages]', error) - } finally { - chatWindow.scrollTop = chatWindow.scrollHeight - } - }, 2000) - }) - */ onMount(async () => { try { const response = await loadRecipients({ days: 365 }) @@ -166,7 +154,6 @@ export const InboxView = () => { return } if (messagesContainerRef.current.scrollTop >= messagesContainerRef.current.scrollHeight) { - //TODO: show new message arrow - bubble return } messagesContainerRef.current.scroll({ @@ -177,6 +164,24 @@ export const InboxView = () => { ), { defer: true } ) + const handleScrollMessageContainer = () => { + console.log('!!! AAAA:') + if ( + messagesContainerRef.current.scrollHeight - messagesContainerRef.current.scrollTop > + messagesContainerRef.current.clientHeight * 1.5 + ) { + setIsScrollToNewVisible(true) + } else { + setIsScrollToNewVisible(false) + } + } + const handleScrollToNew = () => { + messagesContainerRef.current.scroll({ + top: messagesContainerRef.current.scrollHeight, + behavior: 'smooth' + }) + setIsScrollToNewVisible(false) + } return (
@@ -247,6 +252,7 @@ export const InboxView = () => {
{ >
-
(messagesContainerRef.current = el)}> + + + {(triggerRef: (el) => void) => ( +
+ +
+ )} + + +
(messagesContainerRef.current = el)} + onScroll={handleScrollMessageContainer} + > {(message) => ( { const loadChats = async () => { try { const newChats = await inboxClient.loadChats({ limit: 50, offset: 0 }) - console.log('!!! newChats:', newChats) setChats(newChats) } catch (error) { console.log('[loadChats]', error) diff --git a/src/styles/Inbox.module.scss b/src/styles/Inbox.module.scss index eb229baf..822602b0 100644 --- a/src/styles/Inbox.module.scss +++ b/src/styles/Inbox.module.scss @@ -114,6 +114,25 @@ main { overflow: auto; position: relative; + .scrollToNew { + osition: absolute; + z-index: 2; + bottom: 8px; + overflow: hidden; + right: 0; + width: 40px; + padding: 1rem; + border: 2px solid var(--black-100); + border-radius: 50%; + height: 40px; + cursor: pointer; + background: var(--background-color); + + .icon { + rotate: 90deg; + } + } + .messagesContainer { left: 0; height: 100%; diff --git a/src/utils/apiClient.ts b/src/utils/apiClient.ts index 4cb2f618..dfbe4249 100644 --- a/src/utils/apiClient.ts +++ b/src/utils/apiClient.ts @@ -383,7 +383,6 @@ export const apiClient = { export const inboxClient = { loadChats: async (options: QueryLoadChatsArgs): Promise => { const resp = await privateInboxGraphQLClient.query(myChats, options).toPromise() - console.log('!!! resp:', resp) return resp.data.loadChats.chats }, From 7948fc3ccf6314e7fcd4e402c4ac65cf9e921b37 Mon Sep 17 00:00:00 2001 From: ilya-bkv Date: Thu, 16 Nov 2023 17:27:22 +0300 Subject: [PATCH 4/4] remove logs --- src/components/Views/Inbox.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Views/Inbox.tsx b/src/components/Views/Inbox.tsx index baab56ce..f77a4249 100644 --- a/src/components/Views/Inbox.tsx +++ b/src/components/Views/Inbox.tsx @@ -165,7 +165,6 @@ export const InboxView = () => { { defer: true } ) const handleScrollMessageContainer = () => { - console.log('!!! AAAA:') if ( messagesContainerRef.current.scrollHeight - messagesContainerRef.current.scrollTop > messagesContainerRef.current.clientHeight * 1.5