mirror of
https://github.com/logos-messaging/examples.waku.org.git
synced 2026-01-07 15:23:06 +00:00
use useStoreMessages hook
This commit is contained in:
Sasha
parent
a3a2f9ded0
commit
c361e4ee7f
48
examples/web-chat/package-lock.json
generated
48
examples/web-chat/package-lock.json
generated
@ -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": {
|
||||
|
||||
@ -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<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 = 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 (
|
||||
<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;
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user