Updates to behaviour of team description popup:

Set min=1 on number inputs.
Set maxlengths as per #313.
Add cross-browser month input component.
Change durationWeek and numberOfResources to number for request.
Remove description value from form data when toggled off of form.

Author: mbaghel

package-lock.json

@@ -71,7 +71,7 @@
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-avatar": "^3.9.7",
-    "react-datepicker": "^3.4.1",
+    "react-datepicker": "^3.8.0",
     "react-dom": "^16.12.0",
     "react-final-form": "^6.5.2",
     "react-final-form-arrays": "^3.1.3",

package.json

@@ -82,6 +82,7 @@ const FormField = ({ field }) => {
               onBlur={input.onBlur}
               onFocus={input.onFocus}
               className={meta.error && meta.touched ? "error" : ""}
+              maxLength={field.maxLength}
             />
           )}
           {field.type === FORM_FIELD_TYPE.DATE && (

src/components/FormField/index.jsx

@@ -18,6 +18,7 @@ function TextArea(props) {
       autoFocus={props.autoFocus}
       onBlur={props.onBlur}
       onFocus={props.onFocus}
+      maxLength={props.maxLength}
     />
   );
 }

src/components/TextArea/index.jsx

@@ -78,11 +78,8 @@ function SubmitContainer({
       if (key === "teamName" || key === "teamDescription") {
         continue;
       }
-      const position = _.pick(
-        formData[key],
-        "numberOfResources",
-        "durationWeeks",
-        "startMonth"
+      const position = _.mapValues(formData[key], (val, key) =>
+        key === "startMonth" ? val : parseInt(val, 10)
       );
 
       position.roleSearchRequestId = key;

src/routes/CreateNewTeam/components/SubmitContainer/index.jsx

@@ -12,12 +12,13 @@ import { FORM_FIELD_TYPE } from "constants/";
 import { formatPlural } from "utils/format";
 import Button from "components/Button";
 import "./styles.module.scss";
+import DatePicker from "react-datepicker";
 
 const Error = ({ name }) => {
   const {
-    meta: { touched, error },
-  } = useField(name, { subscription: { touched: true, error: true } });
-  return touched && error ? <span styleName="error">{error}</span> : null;
+    meta: { dirty, error },
+  } = useField(name, { subscription: { dirty: true, error: true } });
+  return dirty && error ? <span styleName="error">{error}</span> : null;
 };
 
 function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
@@ -95,10 +96,21 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
   return (
     <Form
       onSubmit={submitForm}
+      mutators={{
+        clearField: ([fieldName], state, { changeValue }) => {
+          changeValue(state, fieldName, () => undefined);
+        },
+      }}
       initialValues={{ teamName: "My Great Team" }}
       validate={validator}
     >
-      {({ handleSubmit, hasValidationErrors }) => {
+      {({
+        handleSubmit,
+        hasValidationErrors,
+        form: {
+          mutators: { clearField },
+        },
+      }) => {
         return (
           <BaseCreateModal
             open={open}
@@ -123,7 +135,7 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
                   name: "teamName",
                   label: "Team Name",
                   placeholder: "Team Name",
-                  maxLength: 50,
+                  maxLength: 255,
                   customValidator: true,
                 }}
               />
@@ -134,13 +146,16 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
                     name: "teamDescription",
                     label: "Short description about the team/ project",
                     placeholder: "Short description about the team/ project",
-                    maxLength: 1000,
+                    maxLength: 600,
                   }}
                 />
               )}
               <button
                 styleName="toggle-button toggle-description"
-                onClick={toggleDescription}
+                onClick={() => {
+                  clearField("teamDescription");
+                  toggleDescription();
+                }}
               >
                 <span>{showDescription ? "–" : "+"}</span>
                 {showDescription ? " Remove Description" : " Add Description"}
@@ -163,6 +178,7 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
                         component="input"
                         type="number"
                         initialValue="3"
+                        min="1"
                       />
                       <Error name={`${id}.numberOfResources`} />
                     </td>
@@ -172,6 +188,7 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
                         component="input"
                         type="number"
                         initialValue="20"
+                        min="1"
                       />
                       <Error name={`${id}.durationWeeks`} />
                     </td>
@@ -180,9 +197,20 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
                         <>
                           <Field
                             name={`${id}.startMonth`}
-                            component="input"
-                            type="month"
-                          />
+                            initialValue={Date.now()}
+                          >
+                            {(props) => (
+                              <DatePicker
+                                name={props.input.name}
+                                selected={props.input.value}
+                                onChange={props.input.onChange}
+                                dateFormat="MMM, yyyy"
+                                showMonthYearPicker
+                                showPopperArrow={false}
+                                onBlur={props.input.onBlur}
+                              />
+                            )}
+                          </Field>
                           <Error name={`${id}.startMonth`} />
                         </>
                       ) : (

src/routes/CreateNewTeam/components/TeamDetailsModal/index.jsx

@@ -4,6 +4,7 @@
 @import "~react-redux-toastr/src/styles/index";
 @import "~react-responsive-modal/styles";
 @import "~react-loader-spinner/dist/loader/css/react-spinner-loader.css";
+@import "~react-datepicker/dist/react-datepicker.css";
 
 // toast-ui.editor styles
 @import "~codemirror/lib/codemirror.css";