Can input messages to send!

web-chat/package.json

@@ -20,7 +20,10 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "fix": "run-s fix:*",
+    "fix:prettier": "prettier \"src/**/*.ts\" --write",
+    "fix:lint": "eslint src --ext .ts --fix"
   },
   "eslintConfig": {
     "extends": [

web-chat/src/Input.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+interface Props {
+  messageHandler: (msg: string)=>void;
+}
+
+interface State {
+  inputText: string;
+}
+
+export default class Input extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      inputText: ''
+    };
+  }
+
+  render() {
+    return (
+      <div>
+        <label>Enter message:</label>
+        <input type='textarea'
+               name='textValue'
+               onChange={(event) => {
+               this.props.messageHandler(event.target.value)
+               }
+               }
+        />
+      </div>
+    );
+  }
+}

web-chat/src/Room.tsx

@@ -1,19 +1,31 @@
 import React from 'react';
+import Input from './Input';
 import Send from './Send';
 
 interface Props {
-  lines: string[]
+  lines: string[],
 }
 
 interface State {
+  messageToSend: string
 }
 
 
 export default class Room extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = { messageToSend: '' };
+  }
+
   render() {
     return (
       <div>
-        <Send />
+        <Input messageHandler={(msg: string) => {
+          this.setState({ messageToSend: msg });
+        }
+        } />
+        <Send message={this.state.messageToSend} />
         <div className='room'>
           {this.renderLines(this.props.lines)}
         </div>

web-chat/src/Send.tsx

@@ -2,17 +2,15 @@ import React from 'react';
 import { useWaku } from './WakuContext';
 
 interface Props {
+  message: string
 }
 
-interface State {
-}
-
-const Send = () => {
+const Send = (props: Props) => {
   const { waku } = useWaku();
 
   return (
     <button className='sendButton' onClick={async () => {
-      await waku!.send('Hello world!');
+      await waku!.send(props.message);
     }}>
     </button>
   );

web-chat/src/WakuContext.ts

@@ -4,7 +4,7 @@ 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);

web-chat/src/WakuMock.ts

@@ -13,12 +13,11 @@ class EventEmitter<T> {
   emit(event: string, data: T) {
     let cbs = this.callbacks[event];
     if (cbs) {
-      cbs.forEach(cb => cb(data));
+      cbs.forEach((cb) => cb(data));
     }
   }
 }
 
-
 export interface Message {
   timestamp: Date;
   handle: string;
@@ -48,7 +47,7 @@ export default class WakuMock extends EventEmitter<Message> {
     this.emit('message', {
       timestamp,
       handle,
-      message
+      message,
     });
   }
 
@@ -64,8 +63,7 @@ export default class WakuMock extends EventEmitter<Message> {
     this.emit('message', {
       timestamp,
       handle,
-      message: `This is message #${this.index++}.`
+      message: `This is message #${this.index++}.`,
     });
   }
 }
-

web-chat/src/index.css

@@ -22,3 +22,7 @@ code {
   content: "";
   display: table;
 }
+
+.sendButton {
+  height: 10px;
+}