Use callback option in web-chat

examples/web-chat/src/App.tsx

@@ -45,6 +45,29 @@ const themes = {
 
 export const ChatContentTopic = 'dingpu';
 
+async function retrieveStoreMessages(
+  waku: Waku,
+  peerId: PeerId,
+  setArchivedMessages: (value: ChatMessage[]) => void
+): Promise<number> {
+  const callback = (wakuMessages: WakuMessage[]): void => {
+    const messages = wakuMessages
+      .map((wakuMsg) => wakuMsg.payload)
+      .filter((payload) => !!payload)
+      .map((payload) => ChatMessage.decode(payload as Uint8Array));
+    setArchivedMessages(messages);
+  };
+
+  const res = await waku.store.queryHistory({
+    peerId,
+    contentTopics: [ChatContentTopic],
+    pageSize: 5,
+    callback,
+  });
+
+  return res ? res.length : 0;
+}
+
 export default function App() {
   let [newMessages, setNewMessages] = useState<ChatMessage[]>([]);
   let [archivedMessages, setArchivedMessages] = useState<ChatMessage[]>([]);
@@ -61,6 +84,7 @@ export default function App() {
       }
     };
 
+    // TODO: Split this
     const handleProtocolChange = async (
       waku: Waku,
       { peerId, protocols }: { peerId: PeerId; protocols: string[] }
@@ -68,18 +92,12 @@ export default function App() {
       if (protocols.includes(StoreCodec)) {
         console.log(`${peerId.toB58String()}: retrieving archived messages}`);
         try {
-          const response = await waku.store.queryHistory({
+          const length = await retrieveStoreMessages(
+            waku,
             peerId,
-            contentTopics: [ChatContentTopic],
-          });
-          console.log(`${peerId.toB58String()}: messages retrieved:`, response);
-          if (response) {
-            const messages = response
-              .map((wakuMsg) => wakuMsg.payload)
-              .filter((payload) => !!payload)
-              .map((payload) => ChatMessage.decode(payload as Uint8Array));
-            setArchivedMessages(messages);
-          }
+            setArchivedMessages
+          );
+          console.log(`${peerId.toB58String()}: messages retrieved:`, length);
         } catch (e) {
           console.log(
             `${peerId.toB58String()}: error encountered when retrieving archived messages`,

examples/web-chat/src/ChatList.tsx

@@ -14,10 +14,11 @@ interface Props {
 
 export default function ChatList(props: Props) {
   const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [groupedMessages, setGroupedMessages] = useState<ChatMessage[][]>([]);
   let updatedMessages;
 
   if (IsThereNewMessages(props.newMessages, messages)) {
-    updatedMessages = messages.slice().concat(props.newMessages);
+    updatedMessages = messages.concat(props.newMessages);
     if (IsThereNewMessages(props.archivedMessages, updatedMessages)) {
       updatedMessages = copyMergeUniqueReplace(
         props.archivedMessages,
@@ -34,11 +35,11 @@ export default function ChatList(props: Props) {
   }
 
   if (updatedMessages) {
+    setGroupedMessages(groupMessagesBySender(updatedMessages));
     setMessages(updatedMessages);
   }
 
-  const messagesGroupedBySender = groupMessagesBySender(messages).map(
-    (currentMessageGroup) => (
+  const renderedGroupedMessages = groupedMessages.map((currentMessageGroup) => (
     <MessageGroup onlyFirstWithMeta>
       {currentMessageGroup.map((currentMessage) => (
         <Message
@@ -54,12 +55,11 @@ export default function ChatList(props: Props) {
         </Message>
       ))}
     </MessageGroup>
-    )
-  );
+  ));
 
   return (
     <MessageList active containScrollInSubtree>
-      {messagesGroupedBySender}
+      {renderedGroupedMessages}
       <AlwaysScrollToBottom newMessages={props.newMessages} />
     </MessageList>
   );