Ensure text is cleared when clicking "send"

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>
     );
   }
 }

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>

web-chat/src/Send.tsx

@@ -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;