Enable using enter key to send message

web-chat/src/MessageInput.tsx

@@ -1,8 +1,9 @@
-import React, { ChangeEvent } from 'react';
+import React, { ChangeEvent, KeyboardEvent } from 'react';
 import { TextField } from '@material-ui/core';
 
 interface Props {
   messageHandler: (msg: string) => void;
+  sendMessage: () => void;
 }
 
 interface State {
@@ -19,13 +20,22 @@ export default class MessageInput extends React.Component<Props, State> {
   }
 
   messageHandler(event: ChangeEvent<HTMLInputElement>) {
+    this.setState({inputText: event.target.value})
     this.props.messageHandler(event.target.value);
   }
 
+  keyPressHandler(event: KeyboardEvent<HTMLInputElement>) {
+    if (event.key === 'Enter') {
+      this.props.sendMessage()
+      this.setState({inputText: ''})
+    }
+  }
+
   render() {
     return (
       <TextField variant='outlined'
                  label='Send a message'
+                 value={this.state.inputText}
                  fullWidth
                  style={{ margin: 8 }}
                  margin="normal"
@@ -33,6 +43,7 @@ export default class MessageInput extends React.Component<Props, State> {
                    shrink: true,
                  }}
                  onChange={this.messageHandler.bind(this)}
+                 onKeyPress={this.keyPressHandler.bind(this)}
       />
     );
   }

web-chat/src/Room.tsx

@@ -49,7 +49,7 @@ export default function  Room (props :Props)  {
         <Grid item xs={12}>
           <Grid container spacing={2} direction='row' alignItems='center'>
             <Grid item xs={11}>
-              <MessageInput messageHandler={messageHandler} />
+              <MessageInput messageHandler={messageHandler} sendMessage={sendMessage} />
             </Grid>
             <Grid item xs={1}>
               <Send sendMessage={sendMessage} />