logos-messaging/examples.waku.org
1
0
Fork 0
mirror of https://github.com/logos-messaging/examples.waku.org.git synced 2026-01-09 00:03:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

create useFilterMessages hook

Browse Source
This commit is contained in:
Sasha 2023-02-23 00:13:48 +01:00
parent dc567a1a4f
commit 1c71f18b54
No known key found for this signature in database
1 changed files with 50 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
examples/web-chat/src/App.tsx
View File

@ -122,6 +122,54 @@ const usePersistentNick = (): [
return [nick, setNick]; return [nick, setNick];
}; };
const useFilterMessages = (waku: undefined | WakuLight): 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;
};
export default function App() { export default function App() {
const [messages, dispatchMessages] = useReducer(reduceMessages, []); const [messages, dispatchMessages] = useReducer(reduceMessages, []);
@ -147,41 +195,8 @@ export default function App() {
const [historicalMessagesRetrieved, setHistoricalMessagesRetrieved] = const [historicalMessagesRetrieved, setHistoricalMessagesRetrieved] =
useState(false); useState(false);
useEffect(() => { const msgs = useFilterMessages(waku);
if (!waku) return; console.log(msgs);
// Let's retrieve previous messages before listening to new messages
if (!historicalMessagesRetrieved) return;
const handleIncomingMessage = (wakuMsg: DecodedMessage) => {
console.log("Message received: ", wakuMsg);
const msg = Message.fromWakuMessage(wakuMsg);
if (msg) {
dispatchMessages([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, historicalMessagesRetrieved]);
useEffect(() => { useEffect(() => {
if (!waku) return; if (!waku) return;