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

create hooks file

Browse Source
This commit is contained in:
Sasha 2023-02-23 13:04:38 +01:00
parent 7b3661b011
commit 2410f8df48
No known key found for this signature in database
2 changed files with 43 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,17 +4,12 @@ import React, { useEffect, useState } from "react";
import "./App.css";
import handleCommand from "./command";
import Room from "./Room";
import { generate } from "server-name-generator";
import { Message } from "./Message";
import { Decoder } from "@waku/core/lib/message/version_0";
import { PageDirection, LightNode, StoreQueryOptions } from "@waku/interfaces";
import { PageDirection, LightNode } from "@waku/interfaces";
import {
useWaku,
useFilterMessages,
useStoreMessages,
useContentPair,
} from "@waku/react";
import { useWaku, useContentPair } from "@waku/react";
import { useMessages, usePersistentNick } from "./hooks";
export const ChatContentTopic = "/toy-chat/2/huilong/proto";
const startTime = new Date();
@ -22,38 +17,6 @@ const startTime = new Date();
startTime.setTime(Date.now() - 1000 * 60 * 60 * 24 * 7);
const endTime = new Date();
const usePersistentNick = (): [
string,
React.Dispatch<React.SetStateAction<string>>
] => {
const [nick, setNick] = useState<string>(() => {
const persistedNick = window.localStorage.getItem("nick");
return persistedNick !== null ? persistedNick : generate();
});
useEffect(() => {
localStorage.setItem("nick", nick);
}, [nick]);
return [nick, setNick];
};
type UseMessagesParams = {
node: undefined | LightNode;
decoder: Decoder;
options: StoreQueryOptions;
};
const useMessages = (params: UseMessagesParams): Message[] => {
const { messages: newMessages } = useFilterMessages(params);
const { messages: storedMessages } = useStoreMessages(params);
return React.useMemo((): Message[] => {
return [...storedMessages, ...newMessages]
.map(Message.fromWakuMessage)
.filter((v): v is Message => !!v);
}, [storedMessages, newMessages]);
};
export default function App() {
const { node } = useWaku<LightNode>();
const { decoder } = useContentPair(ChatContentTopic);

39
examples/web-chat/src/hooks.ts Normal file
View File

@ -0,0 +1,39 @@
import React, { useEffect, useState } from "react";
import { generate } from "server-name-generator";
import { Message } from "./Message";
import { Decoder } from "@waku/core/lib/message/version_0";
import { LightNode, StoreQueryOptions } from "@waku/interfaces";
import { useFilterMessages, useStoreMessages } from "@waku/react";
export const usePersistentNick = (): [
string,
React.Dispatch<React.SetStateAction<string>>
] => {
const [nick, setNick] = useState<string>(() => {
const persistedNick = window.localStorage.getItem("nick");
return persistedNick !== null ? persistedNick : generate();
});
useEffect(() => {
localStorage.setItem("nick", nick);
}, [nick]);
return [nick, setNick];
};
type UseMessagesParams = {
node: undefined | LightNode;
decoder: Decoder;
options: StoreQueryOptions;
};
export const useMessages = (params: UseMessagesParams): Message[] => {
const { messages: newMessages } = useFilterMessages(params);
const { messages: storedMessages } = useStoreMessages(params);
return React.useMemo((): Message[] => {
return [...storedMessages, ...newMessages]
.map(Message.fromWakuMessage)
.filter((v): v is Message => !!v);
}, [storedMessages, newMessages]);
};