Prevent empty comment and reply submissions.

client/src/components/CommentApp/components/Comment/index.tsx

@@ -165,6 +165,7 @@ export default class CommentComponent extends React.Component<CommentProps> {
           />
           <div className="comment__reply-actions">
             <button
+              disabled={comment.newReply.length === 0}
               type="submit"
               className="comment__button comment__button--primary"
             >
@@ -226,6 +227,7 @@ export default class CommentComponent extends React.Component<CommentProps> {
           />
           <div className="comment__actions">
             <button
+              disabled={comment.newText.length === 0}
               type="submit"
               className="comment__button comment__button--primary"
             >
@@ -284,6 +286,7 @@ export default class CommentComponent extends React.Component<CommentProps> {
           />
           <div className="comment__actions">
             <button
+              disabled={comment.newText.length === 0}
               type="submit"
               className="comment__button comment__button--primary"
             >

client/src/components/CommentApp/components/CommentReply/index.tsx

@@ -109,6 +109,7 @@ export default class CommentReplyComponent extends React.Component<CommentReplyP
           <div className="comment-reply__actions">
             <button
               type="submit"
+              disabled={reply.newText.length === 0}
               className="comment-reply__button comment-reply__button--primary"
             >
               {strings.SAVE}

client/src/components/CommentApp/main.scss

@@ -132,6 +132,10 @@ $color-textarea-placeholder-text: $color-grey-2;
         background-color: $color-red-very-dark;
     }
 
+    &:disabled {
+        opacity: 0.3;
+    }
+
     // Disable Firefox's focus styling becase we add our own.
     &::-moz-focus-inner {
         border: 0;

client/src/components/CommentApp/main.tsx

@@ -256,7 +256,7 @@ export class CommentApp {
 
       ReactDOM.render(
         <CommentFormSetComponent
-          comments={commentList}
+          comments={commentList.filter(comment => comment.mode !== 'creating')}
           remoteCommentCount={state.comments.remoteCommentCount}
         />,
         outputElement

client/src/components/CommentApp/state/comments.ts

@@ -221,6 +221,9 @@ export const reducer = produce((draft: CommentsState, action: actions.Action) =>
   case actions.UPDATE_COMMENT: {
     const comment = draft.comments.get(action.commentId);
     if (comment) {
+      if (action.update.newText && action.update.newText.length === 0) {
+        break;
+      }
       update(comment, action.update);
     }
     break;
@@ -255,7 +258,7 @@ export const reducer = produce((draft: CommentsState, action: actions.Action) =>
   }
   case actions.ADD_REPLY: {
     const comment = draft.comments.get(action.commentId);
-    if (!comment) {
+    if ((!comment) || action.reply.text.length === 0) {
       break;
     }
     if (action.reply.remoteId) {
@@ -273,6 +276,9 @@ export const reducer = produce((draft: CommentsState, action: actions.Action) =>
     if (!reply) {
       break;
     }
+    if (action.update.newText && action.update.newText.length === 0) {
+      break;
+    }
     update(reply, action.update);
     break;
   }