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);
 
@@ -18,20 +22,25 @@ class App extends React.Component<Props, State> {
       messages: []
     };
 
-     WakuMock.create().then((wakuMock) => {
-       wakuMock.on('message',(message)=>{
-         const messages = this.state.messages.slice();
-         messages.push(message.message);
-         this.setState({messages});
-       })
-     });
+    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 });
+      });
+    });
   }
 
   render() {
     return (
       <div className='App'>
         <div className='chat-room'>
-          <Room lines={this.state.messages} />
+          <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,11 +8,15 @@ interface Props {
 interface State {
 }
 
+
 export default class Room extends React.Component<Props, State> {
   render() {
     return (
-      <div className='room'>
-        {this.renderLines(this.props.lines)}
+      <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);