From 121bf94007e8de433d954c750e1112caca505f2a Mon Sep 17 00:00:00 2001
From: Nitesh Sawant <10084011+ns23@users.noreply.github.com>
Date: Tue, 23 Oct 2018 01:11:35 +0530
Subject: [PATCH] fixes #726 (#728)

* fixes #726

* Disabled Sumit butto nif form is not touched & used tri function instead of replace
---
 .../modules/IDE/components/NewFolderForm.jsx  | 21 +++++++++++++------
 .../modules/IDE/components/NewFolderModal.jsx | 13 +++++++++++-
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/client/modules/IDE/components/NewFolderForm.jsx b/client/modules/IDE/components/NewFolderForm.jsx
index 102a798e..2795197e 100644
--- a/client/modules/IDE/components/NewFolderForm.jsx
+++ b/client/modules/IDE/components/NewFolderForm.jsx
@@ -13,13 +13,16 @@ class NewFolderForm extends React.Component {
   }
 
   render() {
-    const { fields: { name }, handleSubmit } = this.props;
+    const {
+      fields: { name }, handleSubmit, submitting, pristine
+    } = this.props;
     return (
       <form
         className="new-folder-form"
         onSubmit={(data) => {
-          handleSubmit(this.createFolder)(data);
-          this.props.closeModal();
+          if (handleSubmit(this.createFolder)(data)) {
+            this.props.closeModal();
+          }
         }}
       >
         <label className="new-folder-form__name-label" htmlFor="name">Name:</label>
@@ -31,7 +34,8 @@ class NewFolderForm extends React.Component {
           ref={(element) => { this.fileName = element; }}
           {...domOnlyProps(name)}
         />
-        <input type="submit" value="Add Folder" aria-label="add folder" />
+        <input type="submit" value="Add Folder" disabled={submitting || pristine} aria-label="add folder" />
+        {name.touched && name.error && <span className="form-error">{name.error}</span>}
       </form>
     );
   }
@@ -43,7 +47,12 @@ NewFolderForm.propTypes = {
   }).isRequired,
   handleSubmit: PropTypes.func.isRequired,
   createFolder: PropTypes.func.isRequired,
-  closeModal: PropTypes.func.isRequired
+  closeModal: PropTypes.func.isRequired,
+  submitting: PropTypes.bool,
+  pristine: PropTypes.bool
+};
+NewFolderForm.defaultProps = {
+  submitting: false,
+  pristine: true
 };
-
 export default NewFolderForm;
diff --git a/client/modules/IDE/components/NewFolderModal.jsx b/client/modules/IDE/components/NewFolderModal.jsx
index a9081f38..4d1e714c 100644
--- a/client/modules/IDE/components/NewFolderModal.jsx
+++ b/client/modules/IDE/components/NewFolderModal.jsx
@@ -32,7 +32,18 @@ NewFolderModal.propTypes = {
   closeModal: PropTypes.func.isRequired
 };
 
+function validate(formProps) {
+  const errors = {};
+  if (!formProps.name) {
+    errors.name = 'Please enter a name';
+  } else if (formProps.name.trim().length === 0) {
+    errors.name = 'Folder name cannot contain only spaces';
+  }
+
+  return errors;
+}
 export default reduxForm({
   form: 'new-folder',
-  fields: ['name']
+  fields: ['name'],
+  validate
 })(NewFolderModal);