Use useEffect for async start of waku

web-chat/src/App.tsx

@@ -1,7 +1,7 @@
 import { Paper } from '@material-ui/core';
 import { multiaddr } from 'multiaddr';
 import PeerId from 'peer-id';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import './App.css';
 import { ChatMessage } from 'waku-chat/chat_message';
 import { WakuMessage } from 'waku/waku_message';
@@ -20,22 +20,17 @@ interface State {
   waku?: Waku
 }
 
-class App extends React.Component<Props, State> {
-  waku?: Waku;
+export default function App () {
+  let [state, setState] = useState<State>({ messages: [] });
 
-  constructor(props: Props) {
-    super(props);
 
-    this.state = {
-      messages: []
-    };
-
-    Waku.create({}).then((waku) => {
-      this.state = { waku: waku, messages: this.state.messages };
-
-      waku.libp2p.peerStore.addressBook
-        .add(PeerId.createFromB58String('QmUJKveCpfwA4cY1zRybMEt5z64FRtMHLFFQwndWrSfMmf'),
-          [multiaddr('/ip4/127.0.0.1/tcp/7777/ws')]);
+  useEffect(() => {
+    async function initWaku() {
+      try {
+        const waku = await Waku.create({});
+        setState(({ messages }) => (
+          { waku, messages }
+        ));
 
         waku.libp2p.pubsub.on(RelayDefaultTopic, (event) => {
           const wakuMsg = WakuMessage.decode(event.data);
@@ -43,43 +38,45 @@ class App extends React.Component<Props, State> {
             const chatMsg = ChatMessage.decode(wakuMsg.payload);
             const msgStr = printMessage(chatMsg);
 
-          const messages = this.state.messages.slice();
+            const messages = state.messages.slice();
             messages.push(msgStr);
-          this.setState({ messages });
+            setState({ messages, waku });
           }
-
         });
 
-      // Fire and forget
-      // waku.dial('/ip4/127.0.0.1/tcp/7777/ws/p2p/QmUJKveCpfwA4cY1zRybMEt5z64FRtMHLFFQwndWrSfMmf').then(() => {
-      //   console.log('Remote node dialed');
-      // }).catch((e) => {
-      //   console.log('Error when dialing peer ', e);
-      // });
-    }).catch((e) => {
-      console.log('Error starting waku ', e);
-    }).then(()=> {
-      console.log("Waku is started");
-    });
+        try {
+          await waku.dial('/ip4/127.0.0.1/tcp/7777/ws/p2p/QmUJKveCpfwA4cY1zRybMEt5z64FRtMHLFFQwndWrSfMmf');
+          console.log('Remote node dialed');
+        } catch (e) {
+          console.log('Error when dialing peer ', e);
+        }
+      } catch (e) {
+        console.log('Issue starting waku ', e);
       }
 
-  render() {
+    }
+
+    if (!state.waku) {
+      initWaku()
+        .then(() => console.log('Waku init done'))
+        .catch((e) => console.log('Waku init failed ', e));
+    }
+  }, [state.waku]);
+
+
   return (
     <div className='App'>
       <div className='chat-room'>
-          <WakuContext.Provider value={{ waku: this.state.waku }}>
+        <WakuContext.Provider value={{ waku: state.waku }}>
           <Paper>
-              <Room lines={this.state.messages} />
+            <Room lines={state.messages} />
           </Paper>
         </WakuContext.Provider>
       </div>
     </div>
   );
-  }
 }
 
-export default App;
-
 // TODO: Make it a proper component
 function printMessage(chatMsg: ChatMessage) {
   const timestamp = chatMsg.timestamp.toLocaleString([], {