From a33a1c47ab5e543f521c77263efa7a2c4d8fbf44 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 7 Sep 2018 16:29:46 +0200
Subject: [PATCH] Disable submit button when empty

---
 .../stream/components/PostCommentForm.tsx     |  4 ++--
 .../stream/components/ReplyCommentForm.tsx    |  4 ++--
 .../__snapshots__/postComment.spec.tsx.snap   |  8 ++++----
 .../__snapshots__/postReply.spec.tsx.snap     | 20 +++++++++----------
 4 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/core/client/stream/components/PostCommentForm.tsx b/src/core/client/stream/components/PostCommentForm.tsx
index 09d4a1ba6..3a9caa81d 100644
--- a/src/core/client/stream/components/PostCommentForm.tsx
+++ b/src/core/client/stream/components/PostCommentForm.tsx
@@ -29,7 +29,7 @@ export interface PostCommentFormProps {
 
 const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
   <Form onSubmit={props.onSubmit} initialValues={props.initialValues}>
-    {({ handleSubmit, submitting }) => (
+    {({ handleSubmit, submitting, hasValidationErrors }) => (
       <form
         autoComplete="off"
         onSubmit={handleSubmit}
@@ -79,7 +79,7 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
               <Button
                 color="primary"
                 variant="filled"
-                disabled={submitting}
+                disabled={submitting || hasValidationErrors}
                 type="submit"
               >
                 Submit
diff --git a/src/core/client/stream/components/ReplyCommentForm.tsx b/src/core/client/stream/components/ReplyCommentForm.tsx
index 92ae6e9fa..ec67132ed 100644
--- a/src/core/client/stream/components/ReplyCommentForm.tsx
+++ b/src/core/client/stream/components/ReplyCommentForm.tsx
@@ -39,7 +39,7 @@ const ReplyCommentForm: StatelessComponent<ReplyCommentFormProps> = props => {
   const inputID = `comments-replyCommentForm-rte-${props.id}`;
   return (
     <Form onSubmit={props.onSubmit} initialValues={props.initialValues}>
-      {({ handleSubmit, submitting }) => (
+      {({ handleSubmit, submitting, hasValidationErrors }) => (
         <form
           className={props.className}
           autoComplete="off"
@@ -91,7 +91,7 @@ const ReplyCommentForm: StatelessComponent<ReplyCommentFormProps> = props => {
                 <Button
                   color="primary"
                   variant="filled"
-                  disabled={submitting}
+                  disabled={submitting || hasValidationErrors}
                   type="submit"
                 >
                   Submit
diff --git a/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap
index 892210408..1265c8b00 100644
--- a/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap
@@ -502,8 +502,8 @@ exports[`post a comment: server response 1`] = `
               </span>
             </div>
             <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-              disabled={false}
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+              disabled={true}
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseDown={[Function]}
@@ -849,8 +849,8 @@ exports[`renders comment stream 1`] = `
               </span>
             </div>
             <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-              disabled={false}
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+              disabled={true}
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseDown={[Function]}
diff --git a/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap
index 7efa965ec..446daed79 100644
--- a/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap
@@ -161,8 +161,8 @@ exports[`post a reply: open reply form 1`] = `
               </span>
             </div>
             <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-              disabled={false}
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+              disabled={true}
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseDown={[Function]}
@@ -346,8 +346,8 @@ exports[`post a reply: open reply form 1`] = `
                 Cancel
               </button>
               <button
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-                disabled={false}
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+                disabled={true}
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onMouseDown={[Function]}
@@ -581,8 +581,8 @@ exports[`post a reply: optimistic response 1`] = `
               </span>
             </div>
             <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-              disabled={false}
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+              disabled={true}
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseDown={[Function]}
@@ -1054,8 +1054,8 @@ exports[`post a reply: server response 1`] = `
               </span>
             </div>
             <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-              disabled={false}
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+              disabled={true}
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseDown={[Function]}
@@ -1407,8 +1407,8 @@ exports[`renders comment stream 1`] = `
               </span>
             </div>
             <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-              disabled={false}
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+              disabled={true}
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseDown={[Function]}