diff --git a/packages/react-chat/src/components/Chat/ChatMessages.tsx b/packages/react-chat/src/components/Chat/ChatMessages.tsx index d82f64f2..9a0365a4 100644 --- a/packages/react-chat/src/components/Chat/ChatMessages.tsx +++ b/packages/react-chat/src/components/Chat/ChatMessages.tsx @@ -1,8 +1,8 @@ -import React, { useEffect, useMemo, useRef, useState } from "react"; +import React, { useMemo, useRef, useState } from "react"; import styled from "styled-components"; import { useBlockedUsers } from "../../contexts/blockedUsersProvider"; -import { useMessengerContext } from "../../contexts/messengerProvider"; +import { useChatScrollHandle } from "../../hooks/useChatScrollHandle"; import { ChatMessage } from "../../models/ChatMessage"; import { equalDate } from "../../utils"; import { ContactMenu } from "../Form/ContactMenu"; @@ -74,55 +74,14 @@ type ChatMessagesProps = { }; export function ChatMessages({ messages, activeChannelId }: ChatMessagesProps) { - const { loadPrevDay, loadingMessages } = useMessengerContext(); - - const [scrollOnBot, setScrollOnBot] = useState(true); const ref = useRef(null); - - useEffect(() => { - if (ref && ref.current && scrollOnBot) { - ref.current.scrollTop = ref.current.scrollHeight; - } - }, [messages, messages.length, scrollOnBot]); - - useEffect(() => { - if (!loadingMessages) { - if ( - (ref?.current?.clientHeight ?? 0) >= (ref?.current?.scrollHeight ?? 0) - ) { - setScrollOnBot(true); - loadPrevDay(activeChannelId); - } - } - }, [messages, messages.length, loadingMessages]); + const loadingMessages = useChatScrollHandle(messages, ref, activeChannelId); const { blockedUsers } = useBlockedUsers(); const shownMessages = useMemo(() => { return messages.filter((message) => !blockedUsers.includes(message.sender)); - }, [messages, blockedUsers, messages.length]); - - useEffect(() => { - const setScroll = () => { - if (ref && ref.current) { - if (ref.current.scrollTop <= 0) { - loadPrevDay(activeChannelId); - } - if ( - ref.current.scrollTop + ref.current.clientHeight == - ref.current.scrollHeight - ) { - setScrollOnBot(true); - } else { - if (scrollOnBot == true) { - setScrollOnBot(false); - } - } - } - }; - ref.current?.addEventListener("scroll", setScroll); - return () => ref.current?.removeEventListener("scroll", setScroll); - }, [ref, scrollOnBot]); + }, [blockedUsers, messages.length]); const [image, setImage] = useState(""); const [link, setLink] = useState(""); diff --git a/packages/react-chat/src/hooks/messenger/useLoadPrevDay.ts b/packages/react-chat/src/hooks/messenger/useLoadPrevDay.ts index 7600428c..a29c351a 100644 --- a/packages/react-chat/src/hooks/messenger/useLoadPrevDay.ts +++ b/packages/react-chat/src/hooks/messenger/useLoadPrevDay.ts @@ -27,7 +27,7 @@ export function useLoadPrevDay( const timeDiff = Math.floor( (new Date().getTime() - endTime.getTime()) / _MS_PER_DAY ); - if (timeDiff < 30) { + if (timeDiff < 28) { if (!loadingPreviousMessages.current[id]) { loadingPreviousMessages.current[id] = true; setLoadingMessages(true); @@ -46,7 +46,7 @@ export function useLoadPrevDay( } } }, - [lastLoadTime, messenger] + [messenger] ); return { loadingMessages, loadPrevDay }; } diff --git a/packages/react-chat/src/hooks/messenger/useMessages.ts b/packages/react-chat/src/hooks/messenger/useMessages.ts index 3d94357e..4bf212e7 100644 --- a/packages/react-chat/src/hooks/messenger/useMessages.ts +++ b/packages/react-chat/src/hooks/messenger/useMessages.ts @@ -20,9 +20,7 @@ export function useMessages(chatId: string, contacts?: Contacts) { (msg: ApplicationMetadataMessage, id: string, date: Date) => { const newMessage = ChatMessage.fromMetadataMessage(msg, date); if (newMessage) { - if (contacts) { - contacts.addContact(newMessage.sender); - } + contacts?.addContact(newMessage.sender); setMessages((prev) => { return { ...prev, diff --git a/packages/react-chat/src/hooks/messenger/useMessenger.ts b/packages/react-chat/src/hooks/messenger/useMessenger.ts index fe6b09ee..de25855b 100644 --- a/packages/react-chat/src/hooks/messenger/useMessenger.ts +++ b/packages/react-chat/src/hooks/messenger/useMessenger.ts @@ -58,14 +58,12 @@ export function useMessenger( const contacts = useMemo(() => { const now = Date.now(); - const newContacts: Contact[] = []; - Object.entries(internalContacts).forEach(([id, clock]) => { - newContacts.push({ + return Object.entries(internalContacts).map(([id, clock]) => { + return { id, online: clock > now - 301000, - }); + }; }); - return newContacts; }, [internalContacts]); const { addMessage, clearNotifications, notifications, messages } = @@ -82,9 +80,9 @@ export function useMessenger( }, [identity]); useEffect(() => { - if (messenger && contactsClass && communityKey) { - createCommunity(communityKey, addMessage, messenger).then((e) => { - setCommunity(e); + if (messenger && communityKey && contactsClass) { + createCommunity(communityKey, addMessage, messenger).then((comm) => { + setCommunity(comm); }); } }, [messenger, communityKey, addMessage, contactsClass]); diff --git a/packages/react-chat/src/hooks/useChatScrollHandle.ts b/packages/react-chat/src/hooks/useChatScrollHandle.ts new file mode 100644 index 00000000..b3901d3c --- /dev/null +++ b/packages/react-chat/src/hooks/useChatScrollHandle.ts @@ -0,0 +1,55 @@ +import { useEffect, useState } from "react"; + +import { useMessengerContext } from "../contexts/messengerProvider"; +import { ChatMessage } from "../models/ChatMessage"; + +export function useChatScrollHandle( + messages: ChatMessage[], + ref: React.RefObject, + activeChannelId: string +) { + const { loadPrevDay, loadingMessages } = useMessengerContext(); + const [scrollOnBot, setScrollOnBot] = useState(true); + + useEffect(() => { + if (ref && ref.current && scrollOnBot) { + ref.current.scrollTop = ref.current.scrollHeight; + } + }, [messages.length, scrollOnBot]); + + useEffect(() => { + if (!loadingMessages) { + if ( + (ref?.current?.clientHeight ?? 0) >= (ref?.current?.scrollHeight ?? 0) + ) { + setScrollOnBot(true); + loadPrevDay(activeChannelId); + } + } + }, [messages.length, loadingMessages]); + + useEffect(() => { + const setScroll = () => { + if (ref?.current) { + if (ref.current.scrollTop <= 0) { + loadPrevDay(activeChannelId); + } + if ( + ref.current.scrollTop + ref.current.clientHeight == + ref.current.scrollHeight + ) { + if (scrollOnBot === false) { + setScrollOnBot(true); + } + } else { + if (scrollOnBot === true) { + setScrollOnBot(false); + } + } + } + }; + ref.current?.addEventListener("scroll", setScroll); + return () => ref.current?.removeEventListener("scroll", setScroll); + }, [ref, scrollOnBot]); + return loadingMessages; +}