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,32 +35,31 @@ export default function ChatList(props: Props) {
   }
 
   if (updatedMessages) {
+    setGroupedMessages(groupMessagesBySender(updatedMessages));
     setMessages(updatedMessages);
   }
 
-  const messagesGroupedBySender = groupMessagesBySender(messages).map(
-    (currentMessageGroup) => (
-      <MessageGroup onlyFirstWithMeta>
-        {currentMessageGroup.map((currentMessage) => (
-          <Message
-            key={
-              currentMessage.timestamp.valueOf() +
-              currentMessage.nick +
-              currentMessage.payloadAsUtf8
-            }
-            authorName={currentMessage.nick}
-            date={formatDisplayDate(currentMessage)}
-          >
-            <MessageText>{currentMessage.payloadAsUtf8}</MessageText>
-          </Message>
-        ))}
-      </MessageGroup>
-    )
-  );
+  const renderedGroupedMessages = groupedMessages.map((currentMessageGroup) => (
+    <MessageGroup onlyFirstWithMeta>
+      {currentMessageGroup.map((currentMessage) => (
+        <Message
+          key={
+            currentMessage.timestamp.valueOf() +
+            currentMessage.nick +
+            currentMessage.payloadAsUtf8
+          }
+          authorName={currentMessage.nick}
+          date={formatDisplayDate(currentMessage)}
+        >
+          <MessageText>{currentMessage.payloadAsUtf8}</MessageText>
+        </Message>
+      ))}
+    </MessageGroup>
+  ));
 
   return (
     <MessageList active containScrollInSubtree>
-      {messagesGroupedBySender}
+      {renderedGroupedMessages}
       <AlwaysScrollToBottom newMessages={props.newMessages} />
     </MessageList>
   );