From 3e409c46b5b8a4b6680fa1795e4b113cd572ef90 Mon Sep 17 00:00:00 2001
From: Franck Royer <franck@royer.one>
Date: Mon, 19 Apr 2021 12:55:33 +1000
Subject: [PATCH] Can input messages to send!

---
 web-chat/package.json       |  5 ++++-
 web-chat/src/Input.tsx      | 34 ++++++++++++++++++++++++++++++++++
 web-chat/src/Room.tsx       | 16 ++++++++++++++--
 web-chat/src/Send.tsx       |  8 +++-----
 web-chat/src/WakuContext.ts |  2 +-
 web-chat/src/WakuMock.ts    |  8 +++-----
 web-chat/src/index.css      |  4 ++++
 7 files changed, 63 insertions(+), 14 deletions(-)
 create mode 100644 web-chat/src/Input.tsx

diff --git a/web-chat/package.json b/web-chat/package.json
index 361affc850..dd296b9bcb 100644
--- a/web-chat/package.json
+++ b/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": [
diff --git a/web-chat/src/Input.tsx b/web-chat/src/Input.tsx
new file mode 100644
index 0000000000..6c6682b7ce
--- /dev/null
+++ b/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>
+    );
+  }
+}
diff --git a/web-chat/src/Room.tsx b/web-chat/src/Room.tsx
index ca077222e6..39edb103ea 100644
--- a/web-chat/src/Room.tsx
+++ b/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>
diff --git a/web-chat/src/Send.tsx b/web-chat/src/Send.tsx
index 02c32e13a8..a80799c03e 100644
--- a/web-chat/src/Send.tsx
+++ b/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>
   );
diff --git a/web-chat/src/WakuContext.ts b/web-chat/src/WakuContext.ts
index 0d75705240..fb6c68c4c1 100644
--- a/web-chat/src/WakuContext.ts
+++ b/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);
diff --git a/web-chat/src/WakuMock.ts b/web-chat/src/WakuMock.ts
index 7911e8aeed..2adcf340ed 100644
--- a/web-chat/src/WakuMock.ts
+++ b/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++}.`,
     });
   }
 }
-
diff --git a/web-chat/src/index.css b/web-chat/src/index.css
index a6cbaec0da..12faba753f 100644
--- a/web-chat/src/index.css
+++ b/web-chat/src/index.css
@@ -22,3 +22,7 @@ code {
   content: "";
   display: table;
 }
+
+.sendButton {
+  height: 10px;
+}