xx

Author: yoution

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

@@ -27,12 +27,19 @@ const Error = ({ name }) => {
   return dirty && error ? <span styleName="error">{error}</span> : null;
 };
 
-function EditRoleForm({ submitForm, role }) {
+function EditRoleForm({ onChange, role }) {
   const [startMonthVisible, setStartMonthVisible] = useState(false);
+  const onRoleChange = (state) => {
+    if (state.hasValidationErrors) {
+      return;
+    }
+
+    onChange(state.values);
+  };
 
   return (
     <Form
-      onSubmit={submitForm}
+      onSubmit={() => {}}
       mutators={{
         clearField: ([fieldName], state, { changeValue }) => {
           changeValue(state, fieldName, () => undefined);
@@ -67,7 +74,10 @@ function EditRoleForm({ submitForm, role }) {
                       <NumberInput
                         name={input.name}
                         value={input.value}
-                        onChange={input.onChange}
+                        onChange={(v) => {
+                          input.onChange(v);
+                          onRoleChange(getState());
+                        }}
                         onBlur={input.onBlur}
                         onFocus={input.onFocus}
                         min="1"
@@ -87,7 +97,10 @@ function EditRoleForm({ submitForm, role }) {
                       <NumberInput
                         name={input.name}
                         value={input.value}
-                        onChange={input.onChange}
+                        onChange={(v) => {
+                          input.onChange(v);
+                          onRoleChange(getState());
+                        }}
                         onBlur={input.onBlur}
                         onFocus={input.onFocus}
                         min="4"
@@ -105,7 +118,10 @@ function EditRoleForm({ submitForm, role }) {
                           <MonthPicker
                             name={props.input.name}
                             value={props.input.value}
-                            onChange={props.input.onChange}
+                            onChange={(v) => {
+                              props.input.onChange(v);
+                              onRoleChange(getState());
+                            }}
                             onBlur={props.input.onBlur}
                             onFocus={props.input.onFocus}
                           />

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

@@ -27,7 +27,7 @@ function formatPercent(value) {
   return `${Math.round(value * 100)}%`;
 }
 
-function ResultCard({ role, currentRole, onSubmitEditRole }) {
+function ResultCard({ role, currentRole, onSaveEditRole }) {
   const {
     numberOfMembersAvailable,
     isExternalMember,
@@ -269,7 +269,7 @@ function ResultCard({ role, currentRole, onSubmitEditRole }) {
             </div>
           </div>
           {currentRole && (
-            <EditRoleForm role={currentRole} submitForm={onSubmitEditRole} />
+            <EditRoleForm role={currentRole} onChange={onSaveEditRole} />
           )}
         </div>
       )}
@@ -280,7 +280,7 @@ function ResultCard({ role, currentRole, onSubmitEditRole }) {
 ResultCard.propTypes = {
   role: PT.object,
   currentRole: PT.object,
-  onSubmitEditRole: PT.func,
+  onSaveEditRole: PT.func,
 };
 
 export default ResultCard;

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

@@ -57,8 +57,15 @@ function SearchAndSubmit(props) {
         const name = _.get(res, "data.name");
         const searchId = _.get(res, "data.roleSearchRequestId");
         if (name && !isCustomRole({ name })) {
-          dispatch(addSearchedRole({ searchId, name, numberOfResources: 1, durationWeeks: 4 }));
-          setIsNewRole(true)
+          dispatch(
+            addSearchedRole({
+              searchId,
+              name,
+              numberOfResources: 1,
+              durationWeeks: 4,
+            })
+          );
+          setIsNewRole(true);
         } else if (searchId) {
           dispatch(addRoleSearchId(searchId));
         }

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

@@ -7,6 +7,7 @@
  */
 import React, { useCallback, useState, useMemo, useEffect } from "react";
 import PT from "prop-types";
+import _ from "lodash";
 import { useDispatch } from "react-redux";
 import { editRoleAction } from "../../actions";
 import AddedRolesAccordion from "../AddedRolesAccordion";
@@ -38,14 +39,17 @@ function SearchContainer({
 
   useEffect(() => {
     if (isNewRole) {
-      setShowEditModal(true)
+      setShowEditModal(true);
     }
   }, [isNewRole]);
 
-  const onSubmitEditRole = useCallback((role) => {
-    setShowEditModal(false)
-    dispatch(editRoleAction({...role, searchId: previousSearchId}))
-  }, [addedRoles, previousSearchId]);
+  const onSaveEditRole = useCallback(
+    (role) => {
+      setShowEditModal(false);
+      dispatch(editRoleAction({ ...role, searchId: previousSearchId }));
+    },
+    [addedRoles, previousSearchId]
+  );
 
   const onSubmit = useCallback(() => {
     setAddAnotherOpen(false);
@@ -58,10 +62,14 @@ function SearchContainer({
 
   const renderLeftSide = () => {
     if (searchState === "searching") return <SearchCard />;
-    if (!isCustomRole(matchingRole)) return <ResultCard 
-      role={matchingRole} 
-      onSubmitEditRole={onSubmitEditRole}
-      currentRole={currentRole}/>;
+    if (!isCustomRole(matchingRole))
+      return (
+        <ResultCard
+          role={matchingRole}
+          onSaveEditRole={onSaveEditRole}
+          currentRole={currentRole}
+        />
+      );
     return <NoMatchingProfilesResultCard role={matchingRole} />;
   };