From 5ebceecf92b1ed84bc64d798c08e8249282c701b Mon Sep 17 00:00:00 2001 From: Franck Royer Date: Fri, 23 Apr 2021 14:40:28 +1000 Subject: [PATCH 1/5] Use separate state per var --- web-chat/src/App.tsx | 42 +++++++++++++++++------------------------- 1 file changed, 17 insertions(+), 25 deletions(-) diff --git a/web-chat/src/App.tsx b/web-chat/src/App.tsx index 4b1437261d..a6133afcec 100644 --- a/web-chat/src/App.tsx +++ b/web-chat/src/App.tsx @@ -12,13 +12,9 @@ import { WakuContext } from './WakuContext'; export const ChatContentTopic = 'dingpu'; -interface State { - messages: ChatMessage[]; - waku?: Waku; -} - export default function App() { - let [state, setState] = useState({ messages: [] }); + let [stateMessages, setMessages] = useState([]); + let [stateWaku, setWaku] = useState(undefined); useEffect(() => { async function initWaku() { @@ -32,9 +28,7 @@ export default function App() { }, }); - setState(({ messages }) => { - return { waku, messages }; - }); + setWaku(waku); // FIXME: Connect to a go-waku instance by default, temporary hack until // we have a go-waku instance in the fleet @@ -53,23 +47,23 @@ export default function App() { const wakuMsg = WakuMessage.decode(event.data); if (wakuMsg.payload) { const chatMsg = ChatMessage.decode(wakuMsg.payload); - const messages = state.messages.slice(); + const messages = stateMessages.slice(); messages.push(chatMsg); console.log('setState on ', messages); - setState({ messages, waku: state.waku }); + setMessages(messages); } }; - if (!state.waku) { + if (!stateWaku) { initWaku() .then(() => console.log('Waku init done')) .catch((e) => console.log('Waku init failed ', e)); } else { - state.waku.libp2p.pubsub.on(RelayDefaultTopic, handleNewMessages); + stateWaku.libp2p.pubsub.on(RelayDefaultTopic, handleNewMessages); // To clean up listener when component unmounts return () => { - state.waku?.libp2p.pubsub.removeListener( + stateWaku?.libp2p.pubsub.removeListener( RelayDefaultTopic, handleNewMessages ); @@ -81,8 +75,7 @@ export default function App() { let commandResponses: string[] = []; const args = input.split(' '); const cmd = args.shift()!; - const waku = state.waku; - if (!waku) { + if (!stateWaku) { commandResponses.push('Waku is not yet initialized'); } else { switch (cmd) { @@ -103,7 +96,7 @@ export default function App() { if (!peerId) { commandResponses.push('Peer Id needed to dial'); } else { - waku.libp2p.peerStore.addressBook.add( + stateWaku.libp2p.peerStore.addressBook.add( PeerId.createFromB58String(peerId), [peerMultiaddr] ); @@ -114,7 +107,7 @@ export default function App() { } break; case '/peers': - waku.libp2p.peerStore.peers.forEach((peer, peerId) => { + stateWaku.libp2p.peerStore.peers.forEach((peer, peerId) => { commandResponses.push(peerId + ':'); let addresses = ' addresses: ['; peer.addresses.forEach(({ multiaddr }) => { @@ -133,20 +126,19 @@ export default function App() { commandResponses.push('Unknown Command'); } } - setState(({ waku, messages }) => { - commandResponses.forEach((res) => { - messages.push(new ChatMessage(new Date(), cmd, res)); - }); - return { waku, messages }; + const messages = stateMessages.slice(); + commandResponses.forEach((res) => { + messages.push(new ChatMessage(new Date(), cmd, res)); }); + setMessages(messages); }; return (
- + - +
From f5edd09fa9a3fdf9b4c98d1c0cf590f4faf96956 Mon Sep 17 00:00:00 2001 From: Franck Royer Date: Fri, 23 Apr 2021 14:43:39 +1000 Subject: [PATCH 2/5] Implement /nick command --- web-chat/src/App.tsx | 17 ++++++++++++++++- web-chat/src/Room.tsx | 3 ++- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/web-chat/src/App.tsx b/web-chat/src/App.tsx index a6133afcec..b7ba0ad8a9 100644 --- a/web-chat/src/App.tsx +++ b/web-chat/src/App.tsx @@ -15,6 +15,7 @@ export const ChatContentTopic = 'dingpu'; export default function App() { let [stateMessages, setMessages] = useState([]); let [stateWaku, setWaku] = useState(undefined); + let [nick, setNick] = useState('web-chat'); useEffect(() => { async function initWaku() { @@ -80,11 +81,21 @@ export default function App() { } else { switch (cmd) { case '/help': + commandResponses.push('/nick : set a new nickname'); commandResponses.push( '/connect : connect to the given peer' ); commandResponses.push('/help: Display this help'); break; + case '/nick': + const arg = args.shift(); + if (!arg) { + commandResponses.push('No nick provided'); + } else { + setNick(arg); + commandResponses.push(`New nick: ${arg}`); + } + break; case '/connect': const peer = args.shift(); if (!peer) { @@ -138,7 +149,11 @@ export default function App() {
- +
diff --git a/web-chat/src/Room.tsx b/web-chat/src/Room.tsx index b1f20a9339..f62dc1613c 100644 --- a/web-chat/src/Room.tsx +++ b/web-chat/src/Room.tsx @@ -9,6 +9,7 @@ import { useWaku } from './WakuContext'; interface Props { lines: ChatMessage[]; commandHandler: (cmd: string) => void; + nick: string; } export default function Room(props: Props) { @@ -25,7 +26,7 @@ export default function Room(props: Props) { } else { const chatMessage = new ChatMessage( new Date(), - 'web-chat', + props.nick, messageToSend ); const wakuMsg = WakuMessage.fromBytes( From e467cf137946ec7c6e640e7a2199e1bac59cce87 Mon Sep 17 00:00:00 2001 From: Franck Royer Date: Fri, 23 Apr 2021 14:56:18 +1000 Subject: [PATCH 3/5] Add /info command --- web-chat/src/App.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/web-chat/src/App.tsx b/web-chat/src/App.tsx index b7ba0ad8a9..3d730e393d 100644 --- a/web-chat/src/App.tsx +++ b/web-chat/src/App.tsx @@ -82,6 +82,7 @@ export default function App() { switch (cmd) { case '/help': commandResponses.push('/nick : set a new nickname'); + commandResponses.push('/info: some information about the node'); commandResponses.push( '/connect : connect to the given peer' ); @@ -96,6 +97,15 @@ export default function App() { commandResponses.push(`New nick: ${arg}`); } break; + case '/info': + if (!stateWaku) { + commandResponses.push(`Waku node is starting`); + } else { + commandResponses.push( + `PeerId: ${stateWaku.libp2p.peerId.toB58String()}` + ); + } + break; case '/connect': const peer = args.shift(); if (!peer) { From b8434dcaa16200eaac4b0944772ab118975b0f5c Mon Sep 17 00:00:00 2001 From: Franck Royer Date: Fri, 23 Apr 2021 15:18:19 +1000 Subject: [PATCH 4/5] Change app name --- web-chat/public/manifest.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web-chat/public/manifest.json b/web-chat/public/manifest.json index 080d6c77ac..042f1b75e5 100644 --- a/web-chat/public/manifest.json +++ b/web-chat/public/manifest.json @@ -1,6 +1,6 @@ { - "short_name": "React App", - "name": "Create React App Sample", + "short_name": "Waku v2 chat app", + "name": "Chat app powered by js-waku", "icons": [ { "src": "favicon.ico", From 928ae5128efdda2542897ce184dee48140ffa30a Mon Sep 17 00:00:00 2001 From: Franck Royer Date: Fri, 23 Apr 2021 15:21:51 +1000 Subject: [PATCH 5/5] Fix spelling --- web-chat/.cspell.json | 1 + web-chat/package.json | 2 +- web-chat/src/App.tsx | 10 +++++----- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/web-chat/.cspell.json b/web-chat/.cspell.json index a4013d963c..c22e5699ea 100644 --- a/web-chat/.cspell.json +++ b/web-chat/.cspell.json @@ -57,6 +57,7 @@ "upgrader", "waku", "wakunode", + "webfonts", "websockets" ], "flagWords": [], diff --git a/web-chat/package.json b/web-chat/package.json index 61bc29b4a2..7a0e1966f7 100644 --- a/web-chat/package.json +++ b/web-chat/package.json @@ -30,7 +30,7 @@ "test": "run-s build test:*", "test:lint": "eslint src --ext .ts --ext .tsx", "test:prettier": "prettier \"src/**/*.{ts,tsx}\" --list-different", - "test:spelling": "cspell \"{README.md,.github/*.md,src/**/*.ts}\"", + "test:spelling": "cspell \"{README.md,.github/*.md,src/**/*.{ts,tsx},public/**/*.html}\"", "fix:prettier": "prettier \"src/**/*.{ts,tsx}\" --write", "fix:lint": "eslint src --ext .ts --ext .tsx --fix", "js-waku:install": "cd ../; npm install", diff --git a/web-chat/src/App.tsx b/web-chat/src/App.tsx index 3d730e393d..0d77832c92 100644 --- a/web-chat/src/App.tsx +++ b/web-chat/src/App.tsx @@ -123,7 +123,7 @@ export default function App() { ); } } catch (e) { - commandResponses.push('Invalid multaddr: ' + e); + commandResponses.push('Invalid multiaddr: ' + e); } } break; @@ -137,10 +137,10 @@ export default function App() { addresses = addresses.replace(/,$/, ''); addresses += ']'; commandResponses.push(addresses); - let protos = ' protos: ['; - protos += peer.protocols; - protos += ']'; - commandResponses.push(protos); + let protocols = ' protocols: ['; + protocols += peer.protocols; + protocols += ']'; + commandResponses.push(protocols); }); break; default: