We can send messages!

web-chat/src/App.tsx

@@ -2,15 +2,19 @@ import React from 'react';
 import './App.css';
 import Room from './Room';
 import WakuMock from './WakuMock';
+import { WakuContext } from './WakuContext';
 
 interface Props {
 }
 
 interface State {
-  messages: string[]
+  messages: string[],
+  waku?: WakuMock
 }
 
 class App extends React.Component<Props, State> {
+  waku?: WakuMock;
+
   constructor(props: Props) {
     super(props);
 
@@ -19,11 +23,14 @@ class App extends React.Component<Props, State> {
     };
 
     WakuMock.create().then((wakuMock) => {
+
+      this.setState({ waku: wakuMock, messages: this.state.messages });
+
       wakuMock.on('message', (message) => {
         const messages = this.state.messages.slice();
         messages.push(message.message);
         this.setState({ messages });
-       })
+      });
     });
   }
 
@@ -31,7 +38,9 @@ class App extends React.Component<Props, State> {
     return (
       <div className='App'>
         <div className='chat-room'>
+          <WakuContext.Provider value={{ waku: this.state.waku }}>
             <Room lines={this.state.messages} />
+          </WakuContext.Provider>
         </div>
       </div>
     );

web-chat/src/Room.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import Send from './Send';
 
 interface Props {
   lines: string[]
@@ -7,12 +8,16 @@ interface Props {
 interface State {
 }
 
+
 export default class Room extends React.Component<Props, State> {
   render() {
     return (
+      <div>
+        <Send />
         <div className='room'>
           {this.renderLines(this.props.lines)}
         </div>
+      </div>
     );
   }
 

web-chat/src/Send.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useWaku } from './WakuContext';
+
+interface Props {
+}
+
+interface State {
+}
+
+const Send = () => {
+  const { waku } = useWaku();
+
+  return (
+    <button className='sendButton' onClick={async () => {
+      await waku!.send('Hello world!');
+    }}>
+    </button>
+  );
+};
+
+export default Send;

web-chat/src/WakuContext.ts

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+import WakuMock from './WakuMock';
+
+export type WakuContextType = {
+  waku?: WakuMock;
+  // setWaku: (waku: WakuMock) => void;
+}
+
+export const WakuContext = createContext<WakuContextType>({ waku: undefined });
+export const useWaku = () => useContext(WakuContext);