From 9592f7eab34d3973d0a3f52272fce641bc7c8df1 Mon Sep 17 00:00:00 2001 From: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com> Date: Mon, 29 Nov 2021 10:30:10 +0100 Subject: [PATCH] Add loading history in group chats (#139) --- packages/react-chat-example/src/index.tsx | 2 +- .../src/components/Chat/ChatMessages.tsx | 2 +- .../src/hooks/messenger/useLoadPrevDay.ts | 28 +++++++++----- .../src/hooks/messenger/useMessenger.ts | 24 +++++++----- .../src/hooks/useChatScrollHandle.ts | 7 ++-- packages/status-communities/src/groupChats.ts | 37 +++++++++++++++++++ 6 files changed, 76 insertions(+), 24 deletions(-) diff --git a/packages/react-chat-example/src/index.tsx b/packages/react-chat-example/src/index.tsx index 695fbcbc..9c49bd55 100644 --- a/packages/react-chat-example/src/index.tsx +++ b/packages/react-chat-example/src/index.tsx @@ -76,7 +76,7 @@ function DragDiv() { diff --git a/packages/react-chat/src/components/Chat/ChatMessages.tsx b/packages/react-chat/src/components/Chat/ChatMessages.tsx index dd958fe4..9bc40658 100644 --- a/packages/react-chat/src/components/Chat/ChatMessages.tsx +++ b/packages/react-chat/src/components/Chat/ChatMessages.tsx @@ -94,7 +94,7 @@ function ChatUiMessage({ export function ChatMessages() { const { messages, activeChannel, contacts } = useMessengerContext(); const ref = useRef(null); - const loadingMessages = useChatScrollHandle(messages, ref, activeChannel.id); + const loadingMessages = useChatScrollHandle(messages, ref, activeChannel); const shownMessages = useMemo( () => diff --git a/packages/react-chat/src/hooks/messenger/useLoadPrevDay.ts b/packages/react-chat/src/hooks/messenger/useLoadPrevDay.ts index a29c351a..ee84afcc 100644 --- a/packages/react-chat/src/hooks/messenger/useLoadPrevDay.ts +++ b/packages/react-chat/src/hooks/messenger/useLoadPrevDay.ts @@ -1,11 +1,12 @@ import { useCallback, useEffect, useRef, useState } from "react"; -import { Messenger } from "status-communities/dist/cjs"; +import { GroupChats, Messenger } from "status-communities/dist/cjs"; const _MS_PER_DAY = 1000 * 60 * 60 * 24; export function useLoadPrevDay( chatId: string, - messenger: Messenger | undefined + messenger: Messenger | undefined, + groupChats?: GroupChats ) { const loadingPreviousMessages = useRef<{ [chatId: string]: boolean; @@ -20,7 +21,7 @@ export function useLoadPrevDay( }, [chatId]); const loadPrevDay = useCallback( - async (id: string) => { + async (id: string, groupChat?: boolean) => { if (messenger) { const endTime = lastLoadTime.current[id] ?? new Date(); const startTime = new Date(endTime.getTime() - _MS_PER_DAY); @@ -31,16 +32,25 @@ export function useLoadPrevDay( if (!loadingPreviousMessages.current[id]) { loadingPreviousMessages.current[id] = true; setLoadingMessages(true); - const amountOfMessages = await messenger.retrievePreviousMessages( - id, - startTime, - endTime - ); + let amountOfMessages = 0; + if (groupChat && groupChats) { + amountOfMessages = await groupChats.retrievePreviousMessages( + id, + startTime, + endTime + ); + } else { + amountOfMessages = await messenger.retrievePreviousMessages( + id, + startTime, + endTime + ); + } lastLoadTime.current[id] = startTime; loadingPreviousMessages.current[id] = false; setLoadingMessages(false); if (amountOfMessages === 0) { - loadPrevDay(id); + loadPrevDay(id, groupChat); } } } diff --git a/packages/react-chat/src/hooks/messenger/useMessenger.ts b/packages/react-chat/src/hooks/messenger/useMessenger.ts index b3a112c0..72b1b910 100644 --- a/packages/react-chat/src/hooks/messenger/useMessenger.ts +++ b/packages/react-chat/src/hooks/messenger/useMessenger.ts @@ -30,7 +30,7 @@ export type MessengerType = { clearNotifications: (id: string) => void; mentions: { [chatId: string]: number }; clearMentions: (id: string) => void; - loadPrevDay: (id: string) => Promise; + loadPrevDay: (id: string, groupChat?: boolean) => Promise; loadingMessages: boolean; communityData: CommunityData | undefined; contacts: Contacts; @@ -109,7 +109,6 @@ export function useMessenger( clearMentions, } = useMessages(chatId, identity, contactsClass); const [community, setCommunity] = useState(undefined); - const { loadPrevDay, loadingMessages } = useLoadPrevDay(chatId, messenger); useEffect(() => { if (identity) { @@ -127,14 +126,6 @@ export function useMessenger( } }, [messenger, communityKey, addMessage, contactsClass]); - useEffect(() => { - if (messenger && community?.chats) { - Array.from(community?.chats.values()).forEach(({ id }) => - loadPrevDay(id) - ); - } - }, [messenger, community]); - const [channels, setChannels] = useState({}); const setChannel = useCallback((channel: ChannelData) => { @@ -201,6 +192,19 @@ export function useMessenger( channels ); + const { loadPrevDay, loadingMessages } = useLoadPrevDay( + chatId, + messenger, + groupChat + ); + useEffect(() => { + if (messenger && community?.chats) { + Array.from(community?.chats.values()).forEach(({ id }) => + loadPrevDay(id) + ); + } + }, [messenger, community]); + const sendMessage = useCallback( async (messageText?: string, image?: Uint8Array) => { if (activeChannel.type === "group") { diff --git a/packages/react-chat/src/hooks/useChatScrollHandle.ts b/packages/react-chat/src/hooks/useChatScrollHandle.ts index b3901d3c..6abafcee 100644 --- a/packages/react-chat/src/hooks/useChatScrollHandle.ts +++ b/packages/react-chat/src/hooks/useChatScrollHandle.ts @@ -1,12 +1,13 @@ import { useEffect, useState } from "react"; import { useMessengerContext } from "../contexts/messengerProvider"; +import { ChannelData } from "../models/ChannelData"; import { ChatMessage } from "../models/ChatMessage"; export function useChatScrollHandle( messages: ChatMessage[], ref: React.RefObject, - activeChannelId: string + activeChannel: ChannelData ) { const { loadPrevDay, loadingMessages } = useMessengerContext(); const [scrollOnBot, setScrollOnBot] = useState(true); @@ -23,7 +24,7 @@ export function useChatScrollHandle( (ref?.current?.clientHeight ?? 0) >= (ref?.current?.scrollHeight ?? 0) ) { setScrollOnBot(true); - loadPrevDay(activeChannelId); + loadPrevDay(activeChannel.id, activeChannel.type === "group"); } } }, [messages.length, loadingMessages]); @@ -32,7 +33,7 @@ export function useChatScrollHandle( const setScroll = () => { if (ref?.current) { if (ref.current.scrollTop <= 0) { - loadPrevDay(activeChannelId); + loadPrevDay(activeChannel.id, activeChannel.type === "group"); } if ( ref.current.scrollTop + ref.current.clientHeight == diff --git a/packages/status-communities/src/groupChats.ts b/packages/status-communities/src/groupChats.ts index d8ab36d3..266705d2 100644 --- a/packages/status-communities/src/groupChats.ts +++ b/packages/status-communities/src/groupChats.ts @@ -246,4 +246,41 @@ export class GroupChats { ); wakuMessages.forEach((msg) => this.waku.relay.send(msg)); } + + /** + * Retrieve previous messages from a Waku Store node for the given chat Id. + * + */ + public async retrievePreviousMessages( + chatId: string, + startTime: Date, + endTime: Date + ): Promise { + const chat = this.chats[chatId]; + + if (!chat) + throw `Failed to retrieve messages, chat is not joined: ${chatId}`; + + const _callback = (wakuMessages: WakuMessage[], member: string): void => { + wakuMessages.forEach((wakuMessage: WakuMessage) => + this.handleWakuChatMessage(wakuMessage, chat, member) + ); + }; + + const amountOfMessages: number[] = []; + + await Promise.all( + chat.members.map(async (member) => { + const topic = await getNegotiatedTopic(this.identity, member); + const msgLength = ( + await this.waku.store.queryHistory([topic], { + timeFilter: { startTime, endTime }, + callback: (msg) => _callback(msg, member), + }) + ).length; + amountOfMessages.push(msgLength); + }) + ); + return amountOfMessages.reduce((a, b) => a + b); + } }