Refactor retrieving messages and timestamp (#51)

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

@@ -83,7 +83,7 @@ export function useMessenger(chatId: string, chatIdList: string[]) {
   );
 
   const addNewMessage = useCallback(
-    (msg: ApplicationMetadataMessage, id: string) => {
+    (msg: ApplicationMetadataMessage, id: string, date: Date) => {
       if (
         msg.signer &&
         (msg.chatMessage?.text || msg.chatMessage?.image) &&
@@ -94,13 +94,37 @@ export function useMessenger(chatId: string, chatIdList: string[]) {
         if (msg.chatMessage?.image) {
           img = uintToImgUrl(msg.chatMessage?.image.payload);
         }
-        const date = new Date(msg.chatMessage.clock);
         addNewMessageRaw(msg.signer, content, date, id, img);
       }
     },
     [addNewMessageRaw]
   );
 
+  const loadNextDay = useCallback(
+    (id: string) => {
+      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,
+          () => undefined
+        );
+        setLastLoadTime((prev) => {
+          return {
+            ...prev,
+            [id]: startTime,
+          };
+        });
+      }
+    },
+    [lastLoadTime, messenger]
+  );
+
   useEffect(() => {
     const createMessenger = async () => {
       const identity = Identity.generate();
@@ -124,29 +148,19 @@ export function useMessenger(chatId: string, chatIdList: string[]) {
       });
 
       await Promise.all(
-        chatIdList.map(async (id) => await messenger.joinChat(id))
-      );
-
-      Promise.all(
         chatIdList.map(async (id) => {
-          const today = new Date();
+          await messenger.joinChat(id);
-          const yesterday = new Date();
-          yesterday.setDate(today.getDate() - 1);
-          yesterday.setHours(0, 0, 0, 0);
           setLastLoadTime((prev) => {
             return {
               ...prev,
-              [id]: yesterday,
+              [id]: new Date(),
             };
           });
-          await messenger.retrievePreviousMessages(
+          messenger.addObserver(
-            id,
+            (msg, date) => addNewMessage(msg, id, date),
-            yesterday,
+            id
-            today,
-            (messages) => messages.forEach((msg) => addNewMessage(msg, id))
           );
           clearNotifications(id);
-          messenger.addObserver((msg) => addNewMessage(msg, id), id);
         })
       );
       setMessenger(messenger);
@@ -154,40 +168,22 @@ export function useMessenger(chatId: string, chatIdList: string[]) {
     createMessenger();
   }, []);
 
-  const loadNextDay = useCallback(
+  useEffect(() => {
-    (id: string) => {
     if (messenger) {
-        const endTime = lastLoadTime[id];
+      chatIdList.forEach(loadNextDay);
-        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,
-          };
-        });
     }
-    },
+  }, [messenger]);
-    [lastLoadTime, messenger]
-  );
 
   const sendMessage = useCallback(
     async (messageText: string, image?: Uint8Array) => {
-      let mediaContent = undefined;
+      const mediaContent = image
-      if (image) {
+        ? {
-        mediaContent = {
             image,
             imageType: 1,
             contentType: 1,
-        };
           }
+        : undefined;
       await messenger?.sendMessage(messageText, chatId, mediaContent);
-
       addNewMessageRaw(
         messenger?.identity.publicKey ?? new Uint8Array(),
         messageText,