From c361e4ee7f628b73375b93ab92a3cd895771b42c Mon Sep 17 00:00:00 2001 From: Sasha Date: Thu, 23 Feb 2023 11:39:36 +0100 Subject: [PATCH] use useStoreMessages hook --- examples/web-chat/package-lock.json | 48 ++++---- examples/web-chat/src/App.tsx | 163 +++++----------------------- 2 files changed, 54 insertions(+), 157 deletions(-) diff --git a/examples/web-chat/package-lock.json b/examples/web-chat/package-lock.json index 6609293..66dcddd 100644 --- a/examples/web-chat/package-lock.json +++ b/examples/web-chat/package-lock.json @@ -450,9 +450,9 @@ } }, "node_modules/@babel/helper-module-transforms": { - "version": "7.21.0", - "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.21.0.tgz", - "integrity": "sha512-eD/JQ21IG2i1FraJnTMbUarAUkA7G988ofehG5MDCRXaUU91rEBJuCeSoou2Sk1y4RbLYXzqEg1QLwEmRU4qcQ==", + "version": "7.21.2", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.21.2.tgz", + "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/types": "^7.21.0" + "@babel/traverse": "^7.21.2", + "@babel/types": "^7.21.2" }, "engines": { "node": ">=6.9.0" @@ -692,9 +692,9 @@ } }, "node_modules/@babel/parser": { - "version": "7.21.1", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.1.tgz", - "integrity": "sha512-JzhBFpkuhBNYUY7qs+wTzNmyCWUHEaAFpQQD2YfU1rPL38/L43Wvid0fFkiOCnHvsGncRZgEPyGnltABLcVDTg==", + "version": "7.21.2", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.2.tgz", + "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", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.20.11.tgz", - "integrity": "sha512-S8e1f7WQ7cimJQ51JkAaDrEtohVEitXjgCGAS2N8S31Y42E+kWwfSz83LYz57QdBm7q9diARVqanIaH2oVgQnw==", + "version": "7.21.2", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.21.2.tgz", + "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", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.21.0.tgz", - "integrity": "sha512-Xdt2P1H4LKTO8ApPfnO1KmzYMFpp7D/EinoXzLYN/cHcBNrVCAkAtGUcXnHXrl/VGktureU6fkQrHSBE2URfoA==", + "version": "7.21.2", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.21.2.tgz", + "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/types": "^7.21.0", + "@babel/parser": "^7.21.2", + "@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", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.0.tgz", - "integrity": "sha512-uR7NWq2VNFnDi7EYqiRz2Jv/VQIu38tu64Zy8TX2nQFQ6etJ9V/Rr2msW8BS132mum2rL645qpDrLtAJtVpuow==", + "version": "7.21.2", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.2.tgz", + "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", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.307.tgz", - "integrity": "sha512-n54V0t4LyHM2oQiAOmD3qC2peB+orUktXORSnWxqtv3uEMSoUcsq+hoMpU08VEJCNbfgBtzy169P0TcrLuq53A==", + "version": "1.4.308", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.308.tgz", + "integrity": "sha512-qyTx2aDFjEni4UnRWEME9ubd2Xc9c0zerTUl/ZinvD4QPsF0S7kJTV/Es/lPCTkNX6smyYar+z/n8Cl6pFr8yQ==", "dev": true }, "node_modules/email-addresses": { diff --git a/examples/web-chat/src/App.tsx b/examples/web-chat/src/App.tsx index 690ae54..51ec1f0 100644 --- a/examples/web-chat/src/App.tsx +++ b/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 { Protocols, LightNode } from "@waku/interfaces"; -import { DecodedMessage, Decoder } from "@waku/core/lib/message/version_0"; +import { LightNode } from "@waku/interfaces"; +import { 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> @@ -62,143 +66,42 @@ const usePersistentNick = (): [ return [nick, setNick]; }; -const useFilterMessages = (waku: undefined | LightNode): Message[] => { - const [messages, setMessages] = useState([]); - - 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); - 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([]); - - 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(); + const { node } = useWaku(); const [nick, setNick] = usePersistentNick(); - const msgs = useFilterMessages(waku); - const messages = useStoreMessages(waku); - console.log(msgs, messages); + const { messages } = useFilterMessages({ + node, + decoder: ChatDecoder, + }); + const { messages: storeMessages } = useStoreMessages({ + node, + decoder: ChatDecoder, + options: { + pageSize: 5, + pageDirection: PageDirection.FORWARD, + timeFilter: { + startTime, + endTime, + }, + }, + }); + + console.log(messages, storeMessages); return (
- + { - 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() {
); } - -const isMessageDefined = ( - msg: DecodedMessage | undefined -): msg is DecodedMessage => { - return !!msg; -};