From 06d8c2aca60bb27379e7d325b73db5e15e498fa9 Mon Sep 17 00:00:00 2001
From: Franck Royer <franck@status.im>
Date: Thu, 22 Apr 2021 15:11:37 +1000
Subject: [PATCH] Enable using enter key to send message

---
 web-chat/src/MessageInput.tsx | 13 ++++++++++++-
 web-chat/src/Room.tsx         |  2 +-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/web-chat/src/MessageInput.tsx b/web-chat/src/MessageInput.tsx
index 3858e1ce9e..d398698b7c 100644
--- a/web-chat/src/MessageInput.tsx
+++ b/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)}
       />
     );
   }
diff --git a/web-chat/src/Room.tsx b/web-chat/src/Room.tsx
index 02f03a881f..5513068798 100644
--- a/web-chat/src/Room.tsx
+++ b/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} />