From 2a26757a9827c70c1cea1b21ce5458a1b677030d Mon Sep 17 00:00:00 2001
From: Isaac Visintainer <isaac.visintainer@gmail.com>
Date: Tue, 25 Jun 2019 16:55:41 -0700
Subject: [PATCH] disallow empty comments

---
 apps/publish/src/js/components/comments.js    |  1 +
 .../src/js/components/lib/comment-box.js      | 84 +++++++++----------
 2 files changed, 43 insertions(+), 42 deletions(-)

diff --git a/apps/publish/src/js/components/comments.js b/apps/publish/src/js/components/comments.js
index 966474413..73b73a2e2 100644
--- a/apps/publish/src/js/components/comments.js
+++ b/apps/publish/src/js/components/comments.js
@@ -83,6 +83,7 @@ export class Comments extends Component {
           <CommentBox our={our}
             action={this.commentChange}
             enabled={!(Boolean(this.state.awaiting))}
+            content={this.state.commentBody}
             post={this.postComment}/>
 
 
diff --git a/apps/publish/src/js/components/lib/comment-box.js b/apps/publish/src/js/components/lib/comment-box.js
index 5eeb8c94c..2df2297ce 100644
--- a/apps/publish/src/js/components/lib/comment-box.js
+++ b/apps/publish/src/js/components/lib/comment-box.js
@@ -2,6 +2,24 @@ import React, { Component } from 'react';
 import classnames from 'classnames';
 import { Sigil } from '/components/lib/icons/sigil';
 
+class PostButton extends Component {
+  render() {
+    if (this.props.enabled) {
+      return (
+        <p className="body-regular pointer" onClick={this.props.post}>
+          -> Post
+        </p>
+      );
+    } else {
+      return (
+        <p className="body-regular gray-30">
+          -> Post
+        </p>
+      );
+    }
+  }
+}
+
 export class CommentBox extends Component {
   constructor(props){
     super(props);
@@ -16,49 +34,31 @@ export class CommentBox extends Component {
   }
 
   render() {
-    if (this.props.enabled) {
-      return (
-        <div className="cb w-100 flex" 
-          style={{paddingBottom: 8, marginTop: 32}}>
-          <div className="fl" style={{marginRight: 10}}>
-            <Sigil ship={this.props.our} size={36}/>
-          </div>
-          <div className="flex-col w-100">
-            <textarea className="body-regular-400 w-100"
-              ref={(el) => {this.textarea = el}}
-              style={{resize: "none"}}
-              type="text"
-              name="commentBody"
-              defaultValue=''
-              onChange={this.props.action}>
-            </textarea>
-            <p className="body-regular pointer" onClick={this.props.post}>
-              -> Post
-            </p>
-          </div>
+    let textClass = (this.props.enabled)
+      ?  "body-regular-400 w-100"
+      :  "body-regular-400 w-100 gray-30";
+    return (
+      <div className="cb w-100 flex" 
+        style={{paddingBottom: 8, marginTop: 32}}>
+        <div className="fl" style={{marginRight: 10}}>
+          <Sigil ship={this.props.our} size={36}/>
         </div>
-      );
-    } else {
-      return (
-        <div className="cb w-100 flex" 
-          style={{paddingBottom: 8, marginTop: 32}}>
-          <div className="fl" style={{marginRight: 10}}>
-            <Sigil ship={this.props.our} size={36}/>
-          </div>
-          <div className="flex-col w-100">
-            <textarea className="body-regular-400 w-100"
-              ref={(el) => {this.textarea = el}}
-              style={{resize: "none"}}
-              type="text"
-              name="commentBody"
-              disabled={true}>
-            </textarea>
-            <p className="body-regular gray-50">
-              -> Post
-            </p>
-          </div>
+        <div className="flex-col w-100">
+          <textarea className={textClass}
+            ref={(el) => {this.textarea = el}}
+            style={{resize: "none"}}
+            type="text"
+            name="commentBody"
+            defaultValue=''
+            onChange={this.props.action}
+            disabled={(!this.props.enabled)}>
+          </textarea>
+          <PostButton 
+            post={this.props.post} 
+            enabled={(Boolean(this.props.content) && this.props.enabled)}
+          /> 
         </div>
-      );
-    }
+      </div>
+    );
   }
 }