From 4faafe89d5a65e62a4a72b02b666ad18c2f59bf5 Mon Sep 17 00:00:00 2001 From: ilya-bkv Date: Thu, 16 Nov 2023 17:20:05 +0300 Subject: [PATCH] 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 },