add textfield for chat input

app/components/ChatRoom.js

@@ -1,13 +1,18 @@
 // @flow
 import React, { Fragment } from 'react';
 import List from '@material-ui/core/List';
-import ChatBox from './ChatBox.js';
 import Divider from '@material-ui/core/Divider';
 import Grid from '@material-ui/core/Grid';
-import Button from '@material-ui/core/Button';
+import TextField from '@material-ui/core/TextField';
+import ChatBox from './ChatBox.js';
 
-const listStyle = { overflow: 'scroll', height: '90%' };
-const ChatRoom = ({ messages }) => (
+
+const messageSend = (send, value) => {
+  send(value);
+  value = "";
+};
+const listStyle = { overflow: 'scroll', height: '85%' };
+const ChatRoom = ({ messages, sendMessage }) => (
   <div style={{ height: '100vh' }}>
     <Grid
       container
@@ -27,9 +32,15 @@ const ChatRoom = ({ messages }) => (
         ))}
       </List>
       <Divider />
-      <Button variant="contained" >
-        Send Message
-      </Button>
+        <TextField
+          id="outlined-search"
+          label="Type a message..."
+          type="text"
+          margin="normal"
+          variant="outlined"
+          fullWidth
+          onBlur={(e) => { messageSend(sendMessage, e.target.value) }}
+        />
     </Grid>
   </div>
 );

app/components/Home.js

@@ -37,8 +37,8 @@ status.connect("ws://localhost:8546");
       });
     }
 
-    sendMessage() {
-      status.sendMessage(DEFAULT_CHANNEL, "action triggered")
+    sendMessage(message) {
+      status.sendMessage(DEFAULT_CHANNEL, message)
     }
 
     render() {
@@ -46,7 +46,7 @@ status.connect("ws://localhost:8546");
       console.log({messages})
       return (
         <div data-tid="container">
-          <ChatRoom messages={messages} />
+          <ChatRoom messages={messages} sendMessage={this.sendMessage}/>
         </div>
       );
   }

package.json

@@ -272,7 +272,7 @@
     "redux": "^4.0.0",
     "redux-thunk": "^2.3.0",
     "source-map-support": "^0.5.6",
-    "status-js-api": "^1.0.4"
+    "status-js-api": "^1.0.5"
   },
   "engines": {
     "node": ">=10.x <11",

yarn.lock

@@ -10974,9 +10974,9 @@ static-extend@^0.1.1:
     define-property "^0.2.5"
     object-copy "^0.1.0"
 
-status-js-api@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/status-js-api/-/status-js-api-1.0.4.tgz#670d94a64a48be85f436e067e95ab8012767a2aa"
+status-js-api@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/status-js-api/-/status-js-api-1.0.5.tgz#700b504a85f6f32489de7027142504962599631d"
   dependencies:
     chance "^1.0.16"
     web3 "^1.0.0-beta.36"