From eec6de9f0c096db1ba912067df59c5a7af22db33 Mon Sep 17 00:00:00 2001 From: Franck Royer Date: Fri, 9 Jul 2021 13:52:17 +1000 Subject: [PATCH] Remove InitWaku component There was an issue where the observers are added/removed continously. This is due to using `useEffect` on props. By removing this component then `useEffect` ends only being called when waku changes, ie, at initialisation. --- examples/eth-dm/src/App.tsx | 71 +++++++++++++-- examples/eth-dm/src/BroadcastPublicKey.tsx | 2 +- examples/eth-dm/src/messaging/SendMessage.tsx | 2 +- examples/eth-dm/src/{InitWaku.tsx => waku.ts} | 86 +------------------ 4 files changed, 67 insertions(+), 94 deletions(-) rename examples/eth-dm/src/{InitWaku.tsx => waku.ts} (52%) diff --git a/examples/eth-dm/src/App.tsx b/examples/eth-dm/src/App.tsx index 1d0de0594a..29f3654e20 100644 --- a/examples/eth-dm/src/App.tsx +++ b/examples/eth-dm/src/App.tsx @@ -10,7 +10,6 @@ import { Message } from './messaging/Messages'; import 'fontsource-roboto'; import { AppBar, IconButton, Toolbar, Typography } from '@material-ui/core'; import KeyPairHandling from './key_pair_handling/KeyPairHandling'; -import InitWaku from './InitWaku'; import { createMuiTheme, ThemeProvider, @@ -20,6 +19,13 @@ import { teal, purple, green } from '@material-ui/core/colors'; import WifiIcon from '@material-ui/icons/Wifi'; import BroadcastPublicKey from './BroadcastPublicKey'; import Messaging from './messaging/Messaging'; +import { + DirectMessageContentTopic, + handleDirectMessage, + handlePublicKeyMessage, + initWaku, + PublicKeyContentTopic, +} from './waku'; declare let window: any; @@ -71,6 +77,61 @@ function App() { const classes = useStyles(); + // Waku initialization + useEffect(() => { + if (waku) return; + initWaku() + .then((_waku) => { + console.log('waku: ready'); + setWaku(_waku); + }) + .catch((e) => { + console.error('Failed to initiate Waku', e); + }); + }, [waku]); + + const observerPublicKeyMessage = handlePublicKeyMessage.bind( + {}, + ethDmKeyPair?.publicKey, + setPublicKeys + ); + + const observerDirectMessage = + ethDmKeyPair && address + ? handleDirectMessage.bind( + {}, + setMessages, + ethDmKeyPair.privateKey, + address + ) + : undefined; + + useEffect(() => { + if (!waku) return; + waku.relay.addObserver(observerPublicKeyMessage, [PublicKeyContentTopic]); + + return function cleanUp() { + if (!waku) return; + waku.relay.deleteObserver(observerPublicKeyMessage, [ + PublicKeyContentTopic, + ]); + }; + }, [waku]); + + useEffect(() => { + if (!waku) return; + if (!observerDirectMessage) return; + waku.relay.addObserver(observerDirectMessage, [DirectMessageContentTopic]); + + return function cleanUp() { + if (!waku) return; + if (!observerDirectMessage) return; + waku.relay.deleteObserver(observerDirectMessage, [ + DirectMessageContentTopic, + ]); + }; + }, [waku]); + useEffect(() => { try { window.ethereum @@ -123,14 +184,6 @@ function App() {
-
Eth-DM Key Pair ({ formControl: { diff --git a/examples/eth-dm/src/InitWaku.tsx b/examples/eth-dm/src/waku.ts similarity index 52% rename from examples/eth-dm/src/InitWaku.tsx rename to examples/eth-dm/src/waku.ts index 1a90ec3a63..8d2c60e592 100644 --- a/examples/eth-dm/src/InitWaku.tsx +++ b/examples/eth-dm/src/waku.ts @@ -8,87 +8,7 @@ import { byteArrayToHex } from './utils'; export const PublicKeyContentTopic = '/eth-dm/1/public-key/proto'; export const DirectMessageContentTopic = '/eth-dm/1/direct-message/json'; -interface Props { - waku: Waku | undefined; - setWaku: (waku: Waku) => void; - ethDmKeyPair: KeyPair | undefined; - setPublicKeys: Dispatch>>; - setMessages: Dispatch>; - address: string | undefined; -} - -/** - * Does all the waku initialization - */ -export default function InitWaku({ - waku, - setWaku, - ethDmKeyPair, - setPublicKeys, - setMessages, - address, -}: Props) { - useEffect(() => { - if (waku) return; - initWaku() - .then((wakuNode) => { - console.log('waku: ready'); - setWaku(wakuNode); - }) - .catch((e) => { - console.error('Failed to initiate Waku', e); - }); - }, [waku, setWaku]); - - const observerPublicKeyMessage = handlePublicKeyMessage.bind( - {}, - ethDmKeyPair?.publicKey, - setPublicKeys - ); - - const observerDirectMessage = - ethDmKeyPair && address - ? handleDirectMessage.bind( - {}, - setMessages, - ethDmKeyPair.privateKey, - address - ) - : undefined; - - useEffect(() => { - if (!waku) return; - waku.relay.addObserver(observerPublicKeyMessage, [PublicKeyContentTopic]); - - return function cleanUp() { - if (!waku) return; - waku.relay.deleteObserver(observerPublicKeyMessage, [ - PublicKeyContentTopic, - ]); - }; - }); - - useEffect(() => { - if (!waku) return; - if (!observerDirectMessage) return; - waku.relay.addObserver(observerDirectMessage, [DirectMessageContentTopic]); - - return function cleanUp() { - if (!waku) return; - if (!observerDirectMessage) return; - waku.relay.deleteObserver(observerDirectMessage, [ - DirectMessageContentTopic, - ]); - }; - }); - - // Returns an empty fragment. - // Taking advantages of React's state management and useEffect() - // Not sure it is best practice but it works. - return <>; -} - -async function initWaku(): Promise { +export async function initWaku(): Promise { const waku = await Waku.create({}); const nodes = await getNodes(); @@ -105,7 +25,7 @@ function getNodes() { return getStatusFleetNodes(Environment.Prod); } -function handlePublicKeyMessage( +export function handlePublicKeyMessage( myPublicKey: string | undefined, setter: Dispatch>>, msg: WakuMessage @@ -128,7 +48,7 @@ function handlePublicKeyMessage( } } -async function handleDirectMessage( +export async function handleDirectMessage( setter: Dispatch>, privateKey: string, address: string,