Fix and refactor messages (#111)

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<HTMLHeadingElement>(null);
-
+  const loadingMessages = useChatScrollHandle(messages, ref, activeChannelId);
-  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 { blockedUsers } = useBlockedUsers();
 
   const shownMessages = useMemo(() => {
     return messages.filter((message) => !blockedUsers.includes(message.sender));
-  }, [messages, blockedUsers, messages.length]);
+  }, [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]);
 
   const [image, setImage] = useState("");
   const [link, setLink] = useState("");

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 };
 }

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,

packages/react-chat/src/hooks/messenger/useMessenger.ts

@@ -58,14 +58,12 @@ export function useMessenger(
 
   const contacts = useMemo<Contact[]>(() => {
     const now = Date.now();
-    const newContacts: Contact[] = [];
+    return Object.entries(internalContacts).map(([id, clock]) => {
-    Object.entries(internalContacts).forEach(([id, clock]) => {
+      return {
-      newContacts.push({
         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) {
+    if (messenger && communityKey && contactsClass) {
-      createCommunity(communityKey, addMessage, messenger).then((e) => {
+      createCommunity(communityKey, addMessage, messenger).then((comm) => {
-        setCommunity(e);
+        setCommunity(comm);
       });
     }
   }, [messenger, communityKey, addMessage, contactsClass]);

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<HTMLHeadingElement>,
+  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;
+}