Load last day messages (#43)

packages/react-chat/src/components/Chat.tsx

@@ -29,6 +29,8 @@ export function Chat({ theme, community }: ChatProps) {
     sendMessage,
     notifications,
     clearNotifications,
+    loadNextDay,
+    lastMessage,
   } = useMessenger(
     activeChannel.name,
     channels.map((channel) => channel.name)
@@ -59,6 +61,8 @@ export function Chat({ theme, community }: ChatProps) {
           showMembers={showMembers}
           community={community}
           showCommunity={!showChannels}
+          loadNextDay={() => loadNextDay(activeChannel.name)}
+          lastMessage={lastMessage}
         />
       ) : (
         <Loading>Connecting to waku</Loading>

packages/react-chat/src/components/Chat/ChatBody.tsx

@@ -28,6 +28,8 @@ interface ChatBodyProps {
   notifications: { [id: string]: number };
   setActiveChannel: (val: ChannelData) => void;
   activeChannelId: number;
+  loadNextDay: () => void;
+  lastMessage: Date;
 }
 
 export function ChatBody({
@@ -42,6 +44,8 @@ export function ChatBody({
   notifications,
   setActiveChannel,
   activeChannelId,
+  loadNextDay,
+  lastMessage,
 }: ChatBodyProps) {
   const narrow = useNarrow();
   const [showChannelsList, setShowChannelsList] = useState(false);
@@ -90,7 +94,9 @@ export function ChatBody({
       </ChatTopbar>
       {!showChannelsList && !showMembersList && (
         <>
-          {" "}
+          <button onClick={loadNextDay}>
+            Last message date {lastMessage.toDateString()}
+          </button>{" "}
           {messages.length > 0 ? (
             <ChatMessages messages={messages} theme={theme} />
           ) : (

packages/react-chat/src/components/Chat/ChatMessages.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import styled from "styled-components";
 
 import { ChatMessage } from "../../models/ChatMessage";
@@ -14,13 +14,34 @@ type ChatMessagesProps = {
 };
 
 export function ChatMessages({ messages, theme }: ChatMessagesProps) {
+  const [scrollOnBot, setScrollOnBot] = useState(false);
   const ref = useRef<HTMLHeadingElement>(null);
   const today = useMemo(() => new Date().getDay(), []);
   useEffect(() => {
-    if (ref && ref.current) {
+    if (ref && ref.current && scrollOnBot) {
       ref.current.scrollTop = ref.current.scrollHeight;
     }
-  }, [messages, messages.length]);
+  }, [messages, messages.length, scrollOnBot]);
+
+  useEffect(() => {
+    const setScroll = () => {
+      if (ref && ref.current) {
+        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]);
+
   return (
     <MessagesWrapper ref={ref}>
       {messages.map((message, idx) => {

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

@@ -37,6 +37,9 @@ export function useMessenger(chatId: string, chatIdList: string[]) {
   const [notifications, setNotifications] = useState<{
     [chatId: string]: number;
   }>({});
+  const [lastLoadTime, setLastLoadTime] = useState<{
+    [chatId: string]: Date;
+  }>({});
 
   const clearNotifications = useCallback((id: string) => {
     setNotifications((prevNotifications) => {
@@ -111,10 +114,20 @@ export function useMessenger(chatId: string, chatIdList: string[]) {
 
       Promise.all(
         chatIdList.map(async (id) => {
+          const today = new Date();
+          const yesterday = new Date();
+          yesterday.setDate(today.getDate() - 1);
+          yesterday.setHours(0, 0, 0, 0);
+          setLastLoadTime((prev) => {
+            return {
+              ...prev,
+              [id]: yesterday,
+            };
+          });
           await messenger.retrievePreviousMessages(
             id,
-            new Date(0),
+            yesterday,
-            new Date(),
+            today,
             (messages) => messages.forEach((msg) => addNewMessage(msg, id))
           );
           clearNotifications(id);
@@ -126,6 +139,29 @@ export function useMessenger(chatId: string, chatIdList: string[]) {
     createMessenger();
   }, []);
 
+  const loadNextDay = useCallback(
+    (id: string) => {
+      console.log(id);
+      if (messenger) {
+        const endTime = lastLoadTime[id];
+        const startTime = new Date();
+        startTime.setDate(endTime.getDate() - 1);
+        startTime.setHours(0, 0, 0, 0);
+
+        messenger.retrievePreviousMessages(id, startTime, endTime, (messages) =>
+          messages.forEach((msg) => addNewMessage(msg, id))
+        );
+        setLastLoadTime((prev) => {
+          return {
+            ...prev,
+            [id]: startTime,
+          };
+        });
+      }
+    },
+    [lastLoadTime, messenger]
+  );
+
   const sendMessage = useCallback(
     async (messageText: string) => {
       await messenger?.sendMessage(messageText, chatId);
@@ -149,5 +185,7 @@ export function useMessenger(chatId: string, chatIdList: string[]) {
     sendMessage,
     notifications,
     clearNotifications,
+    loadNextDay,
+    lastMessage: lastLoadTime[chatId],
   };
 }