From 60402a74029e0c4527d84f0648ff8618174fc53a Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 6 Sep 2020 17:43:16 -0500
Subject: [PATCH] Chats: add submit button, fixes #356

---
 .../features/chats/components/chat_box.js     | 30 +++++++++++++++----
 app/styles/chats.scss                         |  4 +++
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat_box.js b/app/soapbox/features/chats/components/chat_box.js
index bde2f9dbf..ee2b7cd20 100644
--- a/app/soapbox/features/chats/components/chat_box.js
+++ b/app/soapbox/features/chats/components/chat_box.js
@@ -65,16 +65,22 @@ class ChatBox extends ImmutablePureComponent {
     };
   }
 
-  sendMessage = () => {
-    const { dispatch, chatId } = this.props;
-    const { content, attachment, isUploading } = this.state;
+  canSubmit = () => {
+    const { content, attachment } = this.state;
 
     const conds = [
       content.length > 0,
       attachment,
     ];
 
-    if (!isUploading && conds.some(c => c)) {
+    return conds.some(c => c);
+  }
+
+  sendMessage = () => {
+    const { dispatch, chatId } = this.props;
+    const { isUploading } = this.state;
+
+    if (this.canSubmit() && !isUploading) {
       const params = this.getParams();
 
       dispatch(sendChatMessage(chatId, params));
@@ -167,9 +173,21 @@ class ChatBox extends ImmutablePureComponent {
     );
   }
 
+  renderActionButton = () => {
+    const { resetFileKey } = this.state;
+
+    return this.canSubmit() ? (
+      <div className='chat-box__send'>
+        <IconButton icon='send' size={16} onClick={this.sendMessage} />
+      </div>
+    ) : (
+      <UploadButton onSelectFile={this.handleFiles} resetFileKey={resetFileKey} />
+    );
+  }
+
   render() {
     const { chatMessageIds, chatId, intl } = this.props;
-    const { content, isUploading, uploadProgress, resetFileKey } = this.state;
+    const { content, isUploading, uploadProgress } = this.state;
     if (!chatMessageIds) return null;
 
     return (
@@ -178,7 +196,7 @@ class ChatBox extends ImmutablePureComponent {
         {this.renderAttachment()}
         <UploadProgress active={isUploading} progress={uploadProgress*100} />
         <div className='chat-box__actions simple_form'>
-          <UploadButton onSelectFile={this.handleFiles} resetFileKey={resetFileKey} />
+          {this.renderActionButton()}
           <textarea
             rows={1}
             placeholder={intl.formatMessage(messages.placeholder)}
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index 0d882fa02..49719a638 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -236,6 +236,10 @@
       margin: 0;
     }
 
+    .chat-box__send .icon-button {
+      top: 12px;
+    }
+
     textarea {
       width: 100%;
       height: 100%;