From c7ba19f43e2aac40ebf032d178815bff5909028b Mon Sep 17 00:00:00 2001
From: Franck Royer <franck@status.im>
Date: Thu, 22 Apr 2021 16:56:59 +1000
Subject: [PATCH] Ensure text is cleared when clicking "send"

---
 web-chat/src/MessageInput.tsx | 43 +++++++++++++++++++++++------------
 web-chat/src/Room.tsx         | 10 +-------
 web-chat/src/Send.tsx         | 16 -------------
 3 files changed, 29 insertions(+), 40 deletions(-)
 delete mode 100644 web-chat/src/Send.tsx

diff --git a/web-chat/src/MessageInput.tsx b/web-chat/src/MessageInput.tsx
index d398698b7c..e1b93e2e0f 100644
--- a/web-chat/src/MessageInput.tsx
+++ b/web-chat/src/MessageInput.tsx
@@ -1,5 +1,5 @@
 import React, { ChangeEvent, KeyboardEvent } from 'react';
-import { TextField } from '@material-ui/core';
+import { Button, Grid, TextField } from '@material-ui/core';
 
 interface Props {
   messageHandler: (msg: string) => void;
@@ -26,25 +26,38 @@ export default class MessageInput extends React.Component<Props, State> {
 
   keyPressHandler(event: KeyboardEvent<HTMLInputElement>) {
     if (event.key === 'Enter') {
-      this.props.sendMessage()
-      this.setState({inputText: ''})
+      this.sendMessage()
     }
   }
 
+  sendMessage() {
+    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"
-                 InputLabelProps={{
-                   shrink: true,
-                 }}
-                 onChange={this.messageHandler.bind(this)}
-                 onKeyPress={this.keyPressHandler.bind(this)}
-      />
+      <Grid container spacing={2} direction='row' alignItems='center'>
+        <Grid item xs={11}>
+          <TextField variant='outlined'
+                     label='Send a message'
+                     value={this.state.inputText}
+                     fullWidth
+                     style={{ margin: 8 }}
+                     margin="normal"
+                     InputLabelProps={{
+                       shrink: true,
+                     }}
+                     onChange={this.messageHandler.bind(this)}
+                     onKeyPress={this.keyPressHandler.bind(this)}
+          />
+        </Grid>
+        <Grid item xs={1}>
+          <Button variant="contained" color="primary" size="large" onClick={this.sendMessage.bind(this)}>
+            Send
+          </Button>
+        </Grid>
+      </Grid>
     );
   }
 }
diff --git a/web-chat/src/Room.tsx b/web-chat/src/Room.tsx
index a045331698..308df11bd2 100644
--- a/web-chat/src/Room.tsx
+++ b/web-chat/src/Room.tsx
@@ -10,7 +10,6 @@ import { ChatMessage } from 'waku-chat/chat_message';
 import { WakuMessage } from 'waku/waku_message';
 import { ChatContentTopic } from './App';
 import MessageInput from './MessageInput';
-import Send from './Send';
 import { useWaku } from './WakuContext';
 
 interface Props {
@@ -47,14 +46,7 @@ export default function  Room (props :Props)  {
         </Grid>
 
         <Grid item xs={12}>
-          <Grid container spacing={2} direction='row' alignItems='center'>
-            <Grid item xs={11}>
-              <MessageInput messageHandler={messageHandler} sendMessage={sendMessage} />
-            </Grid>
-            <Grid item xs={1}>
-              <Send sendMessage={sendMessage} />
-            </Grid>
-          </Grid>
+          <MessageInput messageHandler={messageHandler} sendMessage={sendMessage} />
         </Grid>
 
       </Grid>
diff --git a/web-chat/src/Send.tsx b/web-chat/src/Send.tsx
deleted file mode 100644
index 29d97a9e6e..0000000000
--- a/web-chat/src/Send.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import { Button } from '@material-ui/core';
-
-interface Props {
-  sendMessage: () => void
-}
-
-const Send = (props: Props) => {
-  return (
-    <Button variant="contained" color="primary" size="large" onClick={props.sendMessage}>
-      Send
-    </Button>
-  );
-};
-
-export default Send;