status-im
/
js-waku
mirror of https://github.com/status-im/js-waku.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Use separate state per var

This commit is contained in:
Franck Royer 2021-04-23 14:40:28 +10:00
parent 13a8b45b72
commit 5ebceecf92
No known key found for this signature in database
GPG Key ID: A82ED75A8DFC50A4
1 changed files with 17 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
web-chat/src/App.tsx
View File

@ -12,13 +12,9 @@ import { WakuContext } from './WakuContext';
export const ChatContentTopic = 'dingpu'; export const ChatContentTopic = 'dingpu';
interface State {
messages: ChatMessage[];
waku?: Waku;
}
export default function App() { export default function App() {
let [state, setState] = useState<State>({ messages: [] }); let [stateMessages, setMessages] = useState<ChatMessage[]>([]);
let [stateWaku, setWaku] = useState<Waku | undefined>(undefined);
useEffect(() => { useEffect(() => {
async function initWaku() { async function initWaku() {
@ -32,9 +28,7 @@ export default function App() {
}, },
}); });
setState(({ messages }) => { setWaku(waku);
return { waku, messages };
});
// FIXME: Connect to a go-waku instance by default, temporary hack until // FIXME: Connect to a go-waku instance by default, temporary hack until
// we have a go-waku instance in the fleet // we have a go-waku instance in the fleet
@ -53,23 +47,23 @@ export default function App() {
const wakuMsg = WakuMessage.decode(event.data); const wakuMsg = WakuMessage.decode(event.data);
if (wakuMsg.payload) { if (wakuMsg.payload) {
const chatMsg = ChatMessage.decode(wakuMsg.payload); const chatMsg = ChatMessage.decode(wakuMsg.payload);
const messages = state.messages.slice(); const messages = stateMessages.slice();
messages.push(chatMsg); messages.push(chatMsg);
console.log('setState on ', messages); console.log('setState on ', messages);
setState({ messages, waku: state.waku }); setMessages(messages);
} }
}; };
if (!state.waku) { if (!stateWaku) {
initWaku() initWaku()
.then(() => console.log('Waku init done')) .then(() => console.log('Waku init done'))
.catch((e) => console.log('Waku init failed ', e)); .catch((e) => console.log('Waku init failed ', e));
} else { } else {
state.waku.libp2p.pubsub.on(RelayDefaultTopic, handleNewMessages); stateWaku.libp2p.pubsub.on(RelayDefaultTopic, handleNewMessages);
// To clean up listener when component unmounts // To clean up listener when component unmounts
return () => { return () => {
state.waku?.libp2p.pubsub.removeListener( stateWaku?.libp2p.pubsub.removeListener(
RelayDefaultTopic, RelayDefaultTopic,
handleNewMessages handleNewMessages
); );
@ -81,8 +75,7 @@ export default function App() {
let commandResponses: string[] = []; let commandResponses: string[] = [];
const args = input.split(' '); const args = input.split(' ');
const cmd = args.shift()!; const cmd = args.shift()!;
const waku = state.waku; if (!stateWaku) {
if (!waku) {
commandResponses.push('Waku is not yet initialized'); commandResponses.push('Waku is not yet initialized');
} else { } else {
switch (cmd) { switch (cmd) {
@ -103,7 +96,7 @@ export default function App() {
if (!peerId) { if (!peerId) {
commandResponses.push('Peer Id needed to dial'); commandResponses.push('Peer Id needed to dial');
} else { } else {
waku.libp2p.peerStore.addressBook.add( stateWaku.libp2p.peerStore.addressBook.add(
PeerId.createFromB58String(peerId), PeerId.createFromB58String(peerId),
[peerMultiaddr] [peerMultiaddr]
); );
@ -114,7 +107,7 @@ export default function App() {
} }
break; break;
case '/peers': case '/peers':
waku.libp2p.peerStore.peers.forEach((peer, peerId) => { stateWaku.libp2p.peerStore.peers.forEach((peer, peerId) => {
commandResponses.push(peerId + ':'); commandResponses.push(peerId + ':');
let addresses = ' addresses: ['; let addresses = ' addresses: [';
peer.addresses.forEach(({ multiaddr }) => { peer.addresses.forEach(({ multiaddr }) => {
@ -133,20 +126,19 @@ export default function App() {
commandResponses.push('Unknown Command'); commandResponses.push('Unknown Command');
} }
} }
setState(({ waku, messages }) => { const messages = stateMessages.slice();
commandResponses.forEach((res) => { commandResponses.forEach((res) => {
messages.push(new ChatMessage(new Date(), cmd, res)); messages.push(new ChatMessage(new Date(), cmd, res));
});
return { waku, messages };
}); });
setMessages(messages);
}; };
return ( return (
<div className="App"> <div className="App">
<div className="chat-room"> <div className="chat-room">
<WakuContext.Provider value={{ waku: state.waku }}> <WakuContext.Provider value={{ waku: stateWaku }}>
<Paper> <Paper>
<Room lines={state.messages} commandHandler={commandHandler} /> <Room lines={stateMessages} commandHandler={commandHandler} />
</Paper> </Paper>
</WakuContext.Provider> </WakuContext.Provider>
</div> </div>