use useStoreMessages hook

examples/web-chat/package-lock.json

@@ -450,9 +450,9 @@
       }
     },
     "node_modules/@babel/helper-module-transforms": {
-      "version": "7.21.0",
+      "version": "7.21.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.21.0.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.21.2.tgz",
-      "integrity": "sha512-eD/JQ21IG2i1FraJnTMbUarAUkA7G988ofehG5MDCRXaUU91rEBJuCeSoou2Sk1y4RbLYXzqEg1QLwEmRU4qcQ==",
+      "integrity": "sha512-79yj2AR4U/Oqq/WOV7Lx6hUjau1Zfo4cI+JLAVYeMV5XIlbOhmjEk5ulbTc9fMpmlojzZHkUUxAiK+UKn+hNQQ==",
       "dev": true,
       "dependencies": {
         "@babel/helper-environment-visitor": "^7.18.9",
@@ -461,8 +461,8 @@
         "@babel/helper-split-export-declaration": "^7.18.6",
         "@babel/helper-validator-identifier": "^7.19.1",
         "@babel/template": "^7.20.7",
-        "@babel/traverse": "^7.21.0",
+        "@babel/traverse": "^7.21.2",
-        "@babel/types": "^7.21.0"
+        "@babel/types": "^7.21.2"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -692,9 +692,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.21.1",
+      "version": "7.21.2",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.1.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.2.tgz",
-      "integrity": "sha512-JzhBFpkuhBNYUY7qs+wTzNmyCWUHEaAFpQQD2YfU1rPL38/L43Wvid0fFkiOCnHvsGncRZgEPyGnltABLcVDTg==",
+      "integrity": "sha512-URpaIJQwEkEC2T9Kn+Ai6Xe/02iNaVCuT/PtoRz3GPVJVDpPd7mLo+VddTbhCRU9TXqW5mSrQfXZyi8kDKOVpQ==",
       "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -1537,12 +1537,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-modules-commonjs": {
-      "version": "7.20.11",
+      "version": "7.21.2",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.20.11.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.21.2.tgz",
-      "integrity": "sha512-S8e1f7WQ7cimJQ51JkAaDrEtohVEitXjgCGAS2N8S31Y42E+kWwfSz83LYz57QdBm7q9diARVqanIaH2oVgQnw==",
+      "integrity": "sha512-Cln+Yy04Gxua7iPdj6nOV96smLGjpElir5YwzF0LBPKoPlLDNJePNlrGGaybAJkd0zKRnOVXOgizSqPYMNYkzA==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-module-transforms": "^7.20.11",
+        "@babel/helper-module-transforms": "^7.21.2",
         "@babel/helper-plugin-utils": "^7.20.2",
         "@babel/helper-simple-access": "^7.20.2"
       },
@@ -2111,19 +2111,19 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.21.0",
+      "version": "7.21.2",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.21.0.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.21.2.tgz",
-      "integrity": "sha512-Xdt2P1H4LKTO8ApPfnO1KmzYMFpp7D/EinoXzLYN/cHcBNrVCAkAtGUcXnHXrl/VGktureU6fkQrHSBE2URfoA==",
+      "integrity": "sha512-ts5FFU/dSUPS13tv8XiEObDu9K+iagEKME9kAbaP7r0Y9KtZJZ+NGndDvWoRAYNpeWafbpFeki3q9QoMD6gxyw==",
       "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.18.6",
-        "@babel/generator": "^7.21.0",
+        "@babel/generator": "^7.21.1",
         "@babel/helper-environment-visitor": "^7.18.9",
         "@babel/helper-function-name": "^7.21.0",
         "@babel/helper-hoist-variables": "^7.18.6",
         "@babel/helper-split-export-declaration": "^7.18.6",
-        "@babel/parser": "^7.21.0",
+        "@babel/parser": "^7.21.2",
-        "@babel/types": "^7.21.0",
+        "@babel/types": "^7.21.2",
         "debug": "^4.1.0",
         "globals": "^11.1.0"
       },
@@ -2132,9 +2132,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.21.0",
+      "version": "7.21.2",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.0.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.2.tgz",
-      "integrity": "sha512-uR7NWq2VNFnDi7EYqiRz2Jv/VQIu38tu64Zy8TX2nQFQ6etJ9V/Rr2msW8BS132mum2rL645qpDrLtAJtVpuow==",
+      "integrity": "sha512-3wRZSs7jiFaB8AjxiiD+VqN5DTG2iRvJGQ+qYFrs/654lg6kGTQWIOFjlBo5RaXuAZjBmP3+OQH4dmhqiiyYxw==",
       "dependencies": {
         "@babel/helper-string-parser": "^7.19.4",
         "@babel/helper-validator-identifier": "^7.19.1",
@@ -10021,9 +10021,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.307",
+      "version": "1.4.308",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.307.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.308.tgz",
-      "integrity": "sha512-n54V0t4LyHM2oQiAOmD3qC2peB+orUktXORSnWxqtv3uEMSoUcsq+hoMpU08VEJCNbfgBtzy169P0TcrLuq53A==",
+      "integrity": "sha512-qyTx2aDFjEni4UnRWEME9ubd2Xc9c0zerTUl/ZinvD4QPsF0S7kJTV/Es/lPCTkNX6smyYar+z/n8Cl6pFr8yQ==",
       "dev": true
     },
     "node_modules/email-addresses": {

examples/web-chat/src/App.tsx

@@ -8,12 +8,11 @@ import { WakuContext } from "./WakuContext";
 import { ThemeProvider } from "@livechat/ui-kit";
 import { generate } from "server-name-generator";
 import { Message } from "./Message";
-import { waitForRemotePeer } from "@waku/core";
+import { LightNode } from "@waku/interfaces";
-import { Protocols, LightNode } from "@waku/interfaces";
+import { Decoder } from "@waku/core/lib/message/version_0";
-import { DecodedMessage, Decoder } from "@waku/core/lib/message/version_0";
 import { PageDirection } from "@waku/interfaces";
 
-import { useWaku } from "@waku/react";
+import { useWaku, useFilterMessages, useStoreMessages } from "@waku/react";
 
 const themes = {
   AuthorName: {
@@ -47,6 +46,11 @@ const themes = {
 export const ChatContentTopic = "/toy-chat/2/huilong/proto";
 const ChatDecoder = new Decoder(ChatContentTopic);
 
+const startTime = new Date();
+// Only retrieve a week of history
+startTime.setTime(Date.now() - 1000 * 60 * 60 * 24 * 7);
+const endTime = new Date();
+
 const usePersistentNick = (): [
   string,
   React.Dispatch<React.SetStateAction<string>>
@@ -62,143 +66,42 @@ const usePersistentNick = (): [
   return [nick, setNick];
 };
 
-const useFilterMessages = (waku: undefined | LightNode): Message[] => {
-  const [messages, setMessages] = useState<Message[]>([]);
-
-  const appendMessages = (newMessages: Message[]) => {
-    if (!newMessages || !newMessages.length) {
-      return;
-    }
-
-    setMessages((prev) => [...prev, ...newMessages]);
-  };
-
-  useEffect(() => {
-    if (!waku) return;
-
-    const handleIncomingMessage = (wakuMsg: DecodedMessage) => {
-      console.log("Message received: ", wakuMsg);
-      const msg = Message.fromWakuMessage(wakuMsg);
-      if (msg) {
-        appendMessages([msg]);
-      }
-    };
-
-    let unsubscribe: undefined | (() => Promise<void>);
-    waku.filter.subscribe([ChatDecoder], handleIncomingMessage).then(
-      (_unsubscribe) => {
-        console.log("subscribed to ", ChatContentTopic);
-        unsubscribe = _unsubscribe;
-      },
-      (e) => {
-        console.error("Failed to subscribe", e);
-      }
-    );
-
-    return function cleanUp() {
-      if (!waku) return;
-      if (typeof unsubscribe === "undefined") return;
-      unsubscribe().then(
-        () => {
-          console.log("unsubscribed to ", ChatContentTopic);
-        },
-        (e) => console.error("Failed to unsubscribe", e)
-      );
-    };
-  }, [waku]);
-
-  return messages;
-};
-
-const useStoreMessages = (waku: undefined | LightNode): Message[] => {
-  const [messages, setMessages] = useState<Message[]>([]);
-
-  const appendMessages = (newMessages: Message[]) => {
-    if (!newMessages || !newMessages.length) {
-      return;
-    }
-
-    setMessages((prev) => [...prev, ...newMessages]);
-  };
-
-  useEffect(() => {
-    if (!waku) return;
-
-    const retrieveMessages = async () => {
-      await waitForRemotePeer(waku, [
-        Protocols.Store,
-        Protocols.Filter,
-        Protocols.LightPush,
-      ]);
-      console.log(`Retrieving archived messages`);
-
-      try {
-        const startTime = new Date();
-        // Only retrieve a week of history
-        startTime.setTime(Date.now() - 1000 * 60 * 60 * 24 * 7);
-
-        const endTime = new Date();
-
-        try {
-          for await (const messagesPromises of waku.store.queryGenerator(
-            [ChatDecoder],
-            {
-              pageSize: 5,
-              pageDirection: PageDirection.FORWARD,
-              timeFilter: {
-                startTime,
-                endTime,
-              },
-            }
-          )) {
-            const wakuMessages = await Promise.all(messagesPromises);
-
-            const messages: Message[] = [];
-            wakuMessages
-              .filter(isMessageDefined)
-              .map((wakuMsg) => Message.fromWakuMessage(wakuMsg))
-              .forEach((message) => {
-                if (message) {
-                  messages.push(message);
-                }
-              });
-            appendMessages(messages);
-          }
-        } catch (e) {
-          console.log("Failed to retrieve messages", e);
-        }
-      } catch (e) {
-        console.log(`Error encountered when retrieving archived messages`, e);
-      }
-    };
-
-    retrieveMessages();
-  }, [waku]);
-
-  return messages;
-};
-
 export default function App() {
-  const { node: waku } = useWaku<LightNode>();
+  const { node } = useWaku<LightNode>();
 
   const [nick, setNick] = usePersistentNick();
 
-  const msgs = useFilterMessages(waku);
+  const { messages } = useFilterMessages({
-  const messages = useStoreMessages(waku);
+    node,
-  console.log(msgs, messages);
+    decoder: ChatDecoder,
+  });
+  const { messages: storeMessages } = useStoreMessages({
+    node,
+    decoder: ChatDecoder,
+    options: {
+      pageSize: 5,
+      pageDirection: PageDirection.FORWARD,
+      timeFilter: {
+        startTime,
+        endTime,
+      },
+    },
+  });
+
+  console.log(messages, storeMessages);
 
   return (
     <div
       className="chat-app"
       style={{ height: "100vh", width: "100vw", overflow: "hidden" }}
     >
-      <WakuContext.Provider value={{ waku: waku }}>
+      <WakuContext.Provider value={{ waku: node }}>
         <ThemeProvider theme={themes}>
           <Room
             nick={nick}
-            messages={[...messages, ...msgs]}
+            messages={[]}
             commandHandler={(input: string) => {
-              handleCommand(input, waku, setNick).then(
+              handleCommand(input, node, setNick).then(
                 ({ command, response }) => {
                   const commandMessages = response.map((msg) => {
                     return Message.fromUtf8String(command, msg);
@@ -213,9 +116,3 @@ export default function App() {
     </div>
   );
 }
-
-const isMessageDefined = (
-  msg: DecodedMessage | undefined
-): msg is DecodedMessage => {
-  return !!msg;
-};