Merge branch 'zhoufang/dev/371' into 'dev'

#371 Simplify fetch logic in application form

See merge request !558

src/main/www/src/Utils/formFunctionHelpers.js

 import {
   FETCH_METHOD,
   CONTACT_TYPE,
-  END_POINT,
   API_PREFIX_FORM,
   FETCH_HEADER,
   getCurrentMode,
@@ -301,146 +300,7 @@ export function matchWGFieldsToBackend(eachWorkingGroupData, formId) {
   };
 }
 
-//== EXECUTE Send Data function
-
-/**
- * @param step - The current step that is sending data
- * @param formData - Filled whole form data stored in formik context
- * @param formId - Form Id fetched from the server, sotored in membership context, used for calling APIs
- * @param userId - User Id fetched from the server when sign in, sotored in membership context, used for calling APIs
- */
-export async function executeSendDataByStep(
-  step,
-  formData,
-  formId,
-  userId,
-  setFieldValueObj,
-  updateFormValuesObj,
-  callbackFunc
-) {
-  switch (step) {
-    case 1:
-      callSendData(
-        formId,
-        END_POINT.organizations,
-        matchCompanyFieldsToBackend(formData.organization, formId),
-        step,
-        {
-          fieldName: setFieldValueObj.fieldName.organization,
-          method: setFieldValueObj.method,
-        },
-        updateFormValuesObj
-      );
-      callSendData(
-        formId,
-        END_POINT.contacts,
-        matchContactFieldsToBackend(formData.representative.member, CONTACT_TYPE.COMPANY, formId),
-        step,
-        {
-          fieldName: setFieldValueObj.fieldName.member,
-          method: setFieldValueObj.method,
-        },
-        updateFormValuesObj
-      );
-      callSendData(
-        formId,
-        END_POINT.contacts,
-        matchContactFieldsToBackend(formData.representative.marketing, CONTACT_TYPE.MARKETING, formId),
-        step,
-        {
-          fieldName: setFieldValueObj.fieldName.marketing,
-          method: setFieldValueObj.method,
-        },
-        updateFormValuesObj
-      );
-      callSendData(
-        formId,
-        END_POINT.contacts,
-        matchContactFieldsToBackend(formData.representative.accounting, CONTACT_TYPE.ACCOUNTING, formId),
-        step,
-        {
-          fieldName: setFieldValueObj.fieldName.accounting,
-          method: setFieldValueObj.method,
-        },
-        updateFormValuesObj
-      );
-      callSendData(formId, '', matchMembershipLevelFieldsToBackend(formData, formId, userId), '');
-      let isWGRepSameAsCompany = false;
-      formData.workingGroups.map(
-        (wg) => (isWGRepSameAsCompany = wg.workingGroupRepresentative?.sameAsCompany || isWGRepSameAsCompany)
-      );
-      // only do this API call when there is at least 1 WG rep is same as company rep
-      if (isWGRepSameAsCompany) {
-        formData.workingGroups.forEach((item, index) => {
-          callSendData(
-            formId,
-            END_POINT.working_groups,
-            matchWGFieldsToBackend(item, formId),
-            '',
-            setFieldValueObj,
-            updateFormValuesObj,
-            index
-          );
-        });
-      }
-      break;
-
-    case 2:
-      callSendData(formId, '', matchMembershipLevelFieldsToBackend(formData, formId, userId), step);
-      break;
-
-    case 3:
-      formData.workingGroups.forEach((item, index) => {
-        callSendData(
-          formId,
-          END_POINT.working_groups,
-          matchWGFieldsToBackend(item, formId),
-          step,
-          setFieldValueObj,
-          updateFormValuesObj,
-          index
-        );
-      });
-      break;
-
-    case 4:
-      callSendData(
-        formId,
-        END_POINT.contacts,
-        matchContactFieldsToBackend(formData.signingAuthorityRepresentative, CONTACT_TYPE.SIGNING, formId),
-        step,
-        setFieldValueObj,
-        updateFormValuesObj
-      );
-      break;
-
-    case 5:
-      callSendData(formId, END_POINT.complete, false, step, setFieldValueObj, '', '', callbackFunc);
-      break;
-
-    default:
-      return;
-  }
-}
-
-/**
- * @param formId - Form Id fetched from the server, sotored in membership context, used for calling APIs
- * @param endpoint - To which endpoint the fetch is calling to backend:
- * /form/{id}, /form/{id}/organizations/{id}, /form/{id}/contacts/{id}, /form/{id}/working_groups/{id}
- * @param dataBody - The data body passed to server, normally is the filled form data to be saved
- * If empty, is creating a new entity, use POST method;
- * If has value, is fetched from server, use PUT or DELETE;
- */
-function callSendData(
-  formId,
-  endpoint = '',
-  dataBody,
-  stepNum,
-  setFieldValueObj,
-  updateFormValuesObj,
-  index,
-  callbackFunc
-) {
+export function fetchWrapperForm(formId, endpoint = '', dataBody, onSuccess) {
   const entityId = dataBody.id ? dataBody.id : '';
   const method = dataBody.id ? FETCH_METHOD.PUT : FETCH_METHOD.POST;
 
@@ -454,88 +314,35 @@ function callSendData(
     url = API_PREFIX_FORM + `/${formId}/${endpoint}/${entityId}`;
   }
 
-  delete dataBody.id;
+  // Remove the id without impact on source/original data
+  const { id, ...sanitizedBody } = dataBody;
 
   if (getCurrentMode() === MODE_REACT_ONLY) {
     !isProd && console.log(`You called ${url} with Method ${method} and data body is:`);
-    !isProd && console.log(JSON.stringify(dataBody));
+    !isProd && console.log(JSON.stringify(sanitizedBody));
   }
 
   if (getCurrentMode() === MODE_REACT_API) {
     fetch(url, {
       method: method,
       headers: FETCH_HEADER,
-      body: JSON.stringify(dataBody),
+      body: JSON.stringify(sanitizedBody),
     })
       .then((res) => {
         if (res.ok) {
-          if (stepNum === 5) {
-            callbackFunc && callbackFunc();
-            return res;
-          }
-          return res.json();
+          const isJson = res.headers.get('content-type')?.includes('application/json');
+          return isJson ? res.json() : res;
         }
 
         requestErrorHandler(res.status);
         throw res.status;
       })
       .then((data) => {
-        if (setFieldValueObj && method === 'POST') {
-          // update the field id after a successful post
-          switch (setFieldValueObj.fieldName) {
-            case 'organization':
-              setFieldValueObj.method(`${setFieldValueObj.fieldName}.id`, data[0]?.id);
-              setFieldValueObj.method('organization.address.id', data[0]?.address?.id);
-              updateFormValuesObj.theNewValue.organization.id = data[0]?.id;
-              updateFormValuesObj.theNewValue.organization.address.id = data[0]?.address?.id;
-              updateFormValuesObj.setUpdatedFormValues(updateFormValuesObj.theNewValue);
-              break;
-
-            case 'representative.member':
-              setFieldValueObj.method(`${setFieldValueObj.fieldName}.id`, data[0]?.id);
-              updateFormValuesObj.theNewValue.representative.member.id = data[0]?.id;
-              updateFormValuesObj.setUpdatedFormValues(updateFormValuesObj.theNewValue);
-              break;
-
-            case 'representative.marketing':
-              setFieldValueObj.method(`${setFieldValueObj.fieldName}.id`, data[0]?.id);
-              updateFormValuesObj.theNewValue.representative.marketing.id = data[0]?.id;
-              updateFormValuesObj.setUpdatedFormValues(updateFormValuesObj.theNewValue);
-              break;
-
-            case 'representative.accounting':
-              setFieldValueObj.method(`${setFieldValueObj.fieldName}.id`, data[0]?.id);
-              updateFormValuesObj.theNewValue.representative.accounting.id = data[0]?.id;
-              updateFormValuesObj.setUpdatedFormValues(updateFormValuesObj.theNewValue);
-              break;
-
-            case 'workingGroups':
-              setFieldValueObj.method(`workingGroups[${index}].id`, data[0]?.id);
-              setFieldValueObj.method(`workingGroups[${index}].workingGroupRepresentative.id`, data[0]?.contact?.id);
-              if (updateFormValuesObj?.theNewValue) {
-                updateFormValuesObj.theNewValue.workingGroups[index].id = data[0]?.id;
-                updateFormValuesObj.theNewValue.workingGroups[index].workingGroupRepresentative.id =
-                  data[0]?.contact?.id;
-                updateFormValuesObj.setUpdatedFormValues(updateFormValuesObj.theNewValue);
-              }
-              break;
-
-            case 'signingAuthorityRepresentative':
-              setFieldValueObj.method.signingAuthority(`${setFieldValueObj.fieldName}.id`, data[0]?.id);
-              setFieldValueObj.method.companyInfo(`${setFieldValueObj.fieldName}.id`, data[0]?.id);
-              updateFormValuesObj.theNewValue.signingAuthorityRepresentative.id = data[0]?.id;
-              updateFormValuesObj.setUpdatedFormValues(updateFormValuesObj.theNewValue);
-              break;
-
-            default:
-              break;
-          }
-        }
+        onSuccess && onSuccess(data);
       })
       .catch((err) => {
         console.log(err);
         // This will make sure when "then" is skipped, we could still handle the error
-        // And because this "err" is just an error message without error/status code, so we use 0 here.
         requestErrorHandler(err);
       });
   }

src/main/www/src/components/Application/Application.js

@@ -4,6 +4,7 @@ import { useFormik } from 'formik';
 import SignIn from './SignIn/SignIn';
 import {
   application_api_prefix,
+  CONTACT_TYPE,
   END_POINT,
   FETCH_HEADER,
   getCurrentMode,
@@ -28,7 +29,15 @@ import Step from '../UIComponents/Steppers/Step';
 import SignInIntroduction from './SignIn/SignInIntroduction';
 import SubmitSuccess from './SubmitSuccess/SubmitSuccess';
 import { VALIDATION_SCHEMA_FOR_ENROLMENT_FORM } from '../UIComponents/FormComponents/ValidationSchema';
-import { checkValidityWithoutSubmitting, executeSendDataByStep, isProd } from '../../Utils/formFunctionHelpers';
+import {
+  fetchWrapperForm,
+  checkValidityWithoutSubmitting,
+  isProd,
+  matchCompanyFieldsToBackend,
+  matchContactFieldsToBackend,
+  matchMembershipLevelFieldsToBackend,
+  matchWGFieldsToBackend,
+} from '../../Utils/formFunctionHelpers';
 import MembershipContext from '../../Context/MembershipContext';
 import TopSlideMsg from '../UIComponents/Notifications/TopSlideMsg';
 
@@ -44,76 +53,139 @@ export default function Application() {
   const [workingGroupsUserJoined, setWorkingGroupsUserJoined] = useState([]);
 
   const submitCompanyInfo = () => {
-    const values = formik.values;
-    setUpdatedFormValues(values);
+    const { values, setFieldValue } = formik;
     !isProd && console.log('updated company info: ', values);
 
-    const setFieldValueObj = {
-      fieldName: {
-        organization: 'organization',
-        member: 'representative.member',
-        accounting: 'representative.accounting',
-        marketing: 'representative.marketing',
-      },
-      method: formik.setFieldValue,
+    const onSuccessOrg = (data) => {
+      // Add id to local data after a successful POST
+      if (values.organization.address.id) {
+        return;
+      }
+      setFieldValue('organization.address.id', data.address?.id || data[0]?.address?.id || '');
+    };
+    fetchWrapperForm(
+      currentFormId,
+      END_POINT.organizations,
+      matchCompanyFieldsToBackend(values.organization, currentFormId),
+      onSuccessOrg
+    );
+
+    const onSuccessMemberRep = (data) => {
+      // Add id to local data after a successful POST
+      if (values.representative.member.id) {
+        return;
+      }
+      setFieldValue('representative.member.id', data.id || data[0]?.id || '');
+    };
+    fetchWrapperForm(
+      currentFormId,
+      END_POINT.contacts,
+      matchContactFieldsToBackend(values.representative.member, CONTACT_TYPE.COMPANY, currentFormId),
+      onSuccessMemberRep
+    );
+
+    const onSuccessMarketingRep = (data) => {
+      if (values.representative.marketing.id) {
+        return;
+      }
+      setFieldValue('representative.marketing.id', data.id || data[0]?.id || '');
     };
+    fetchWrapperForm(
+      currentFormId,
+      END_POINT.contacts,
+      matchContactFieldsToBackend(values.representative.marketing, CONTACT_TYPE.MARKETING, currentFormId),
+      onSuccessMarketingRep
+    );
 
-    const updateFormValuesObj = {
-      theNewValue: values,
-      setUpdatedFormValues,
+    const onSuccessAccountingRep = (data) => {
+      if (values.representative.accounting.id) {
+        return;
+      }
+      setFieldValue('representative.accounting.id', data.id || data[0]?.id || '');
     };
+    fetchWrapperForm(
+      currentFormId,
+      END_POINT.contacts,
+      matchContactFieldsToBackend(values.representative.accounting, CONTACT_TYPE.ACCOUNTING, currentFormId),
+      onSuccessAccountingRep
+    );
 
-    executeSendDataByStep(1, values, currentFormId, currentUserForm.name, setFieldValueObj, updateFormValuesObj);
-    // Only make the API call when signingAuthorityRepresentative has an id
+    fetchWrapperForm(
+      currentFormId,
+      '',
+      matchMembershipLevelFieldsToBackend(values, currentFormId, currentUserForm.name)
+    );
+
+    let isWGRepSameAsCompany = false;
+    values.workingGroups.map(
+      (wg) => (isWGRepSameAsCompany = wg.workingGroupRepresentative?.sameAsCompany || isWGRepSameAsCompany)
+    );
+    // only do this API call when there is at least 1 WG rep is same as company rep
+    isWGRepSameAsCompany &&
+      values.workingGroups.forEach((item) => {
+        fetchWrapperForm(currentFormId, END_POINT.working_groups, matchWGFieldsToBackend(item, currentFormId));
+      });
+
+    // Only make the API call when signingAuthority Representative has an id and sameAsCompany is true
     // If not, it means there is nothing in the db, so no need to update.
-    values.signingAuthorityRepresentative.id &&
-      executeSendDataByStep(4, values, currentFormId, currentUserForm.name, setFieldValueObj, updateFormValuesObj);
+    if (values.signingAuthorityRepresentative.id && values.signingAuthorityRepresentative.sameAsCompany) {
+      fetchWrapperForm(
+        currentFormId,
+        END_POINT.contacts,
+        matchContactFieldsToBackend(values.signingAuthorityRepresentative, CONTACT_TYPE.SIGNING, currentFormId)
+      );
+    }
   };
 
   const submitMembershipLevel = () => {
-    const values = formik.values;
-    setUpdatedFormValues(values);
+    const { values } = formik;
     !isProd && console.log('updated membership level: ', values);
-
-    executeSendDataByStep(2, values, currentFormId, currentUserForm.name);
+    fetchWrapperForm(
+      currentFormId,
+      '',
+      matchMembershipLevelFieldsToBackend(values, currentFormId, currentUserForm.name)
+    );
   };
 
   const submitWorkingGroups = () => {
-    const values = formik.values;
-    setUpdatedFormValues(values);
+    const { values, setFieldValue } = formik;
     !isProd && console.log('updated working groups: ', values);
 
     if (!values.skipJoiningWG) {
       // If the user is joining at least 1 wg, then make related API call
-      const setFieldValueObj = {
-        fieldName: 'workingGroups',
-        method: formik.setFieldValue,
+      const onSuccessWG = (data, item, index) => {
+        if (item.id) {
+          return;
+        }
+        const newWGArray = values.workingGroups.map((wg, i) =>
+          i === index ? { ...wg, id: data.id || data[0]?.id || '' } : wg
+        );
+        setFieldValue('workingGroups', newWGArray);
       };
-
-      executeSendDataByStep(3, values, currentFormId, currentUserForm.name, setFieldValueObj, {
-        theNewValue: values,
-        setUpdatedFormValues,
+      values.workingGroups.forEach((item, index) => {
+        fetchWrapperForm(currentFormId, END_POINT.working_groups, matchWGFieldsToBackend(item, currentFormId), (data) =>
+          onSuccessWG(data, item, index)
+        );
       });
     }
   };
 
   const submitSigningAuthority = () => {
-    const values = formik.values;
-    setUpdatedFormValues(values);
+    const { values, setFieldValue } = formik;
     !isProd && console.log('updated SigningAuthority: ', values);
 
-    const setFieldValueObj = {
-      fieldName: 'signingAuthorityRepresentative',
-      method: {
-        signingAuthority: formik.setFieldValue,
-        companyInfo: formik.setFieldValue,
-      },
+    const onSuccessSigningAuthority = (data) => {
+      if (values.signingAuthorityRepresentative.id) {
+        return;
+      }
+      setFieldValue('signingAuthorityRepresentative.id', data.id || data[0].id || '');
     };
-
-    executeSendDataByStep(4, values, currentFormId, currentUserForm.name, setFieldValueObj, {
-      theNewValue: values,
-      setUpdatedFormValues,
-    });
+    fetchWrapperForm(
+      currentFormId,
+      END_POINT.contacts,
+      matchContactFieldsToBackend(values.signingAuthorityRepresentative, CONTACT_TYPE.SIGNING, currentFormId),
+      onSuccessSigningAuthority
+    );
   };
 
   const formik = useFormik({
@@ -197,6 +269,7 @@ export default function Application() {
             history={history}
             setIsStartNewForm={setIsStartNewForm}
             resetForm={formik.resetForm}
+            updatedFormValues={updatedFormValues}
             setUpdatedFormValues={setUpdatedFormValues}
           />
         </Route>
@@ -233,6 +306,7 @@ export default function Application() {
               <MembershipLevel
                 formik={formik}
                 updatedFormValues={updatedFormValues}
+                setUpdatedFormValues={setUpdatedFormValues}
                 submitForm={submitMembershipLevel}
               />
             ) : (
@@ -268,6 +342,7 @@ export default function Application() {
                 formik={formik}
                 updatedFormValues={updatedFormValues}
                 submitForm={submitSigningAuthority}
+                setUpdatedFormValues={setUpdatedFormValues}
               />
             ) : (
               <Redirect to={furthestPage.pathName} />
@@ -278,7 +353,7 @@ export default function Application() {
         <Route path={ROUTE_REVIEW}>
           {renderStepper()}
           {furthestPage.index >= 5 ? (
-            <Review values={updatedFormValues} isTermChecked={isTermChecked} setIsTermChecked={setIsTermChecked} />
+            <Review values={formik.values} isTermChecked={isTermChecked} setIsTermChecked={setIsTermChecked} />
           ) : (
             <Redirect to={furthestPage.pathName} />
           )}

src/main/www/src/components/Application/CompanyInformation/CompanyInformation.js

@@ -68,8 +68,8 @@ const CompanyInformation = ({
 }) => {
   const { currentFormId, setCurrentStepIndex } = useContext(MembershipContext); // current chosen form id
   const [loading, setLoading] = useState(true);
-  const { setFieldValue } = formik;
-  const companyRep = formik.values.representative.member;
+  const { setFieldValue, values } = formik;
+  const companyRep = values.representative.member;
 
   useEffect(() => {
     scrollToTop();
@@ -83,6 +83,13 @@ const CompanyInformation = ({
     setFieldValue(CURRENT_STEP, COMPANY_INFO_STEP);
   }, [setFieldValue]);
 
+  useEffect(() => {
+    if (updatedFormValues.currentStep === COMPANY_INFO_STEP || values.currentStep !== COMPANY_INFO_STEP) {
+      return;
+    }
+    setUpdatedFormValues(values);
+  }, [setUpdatedFormValues, values, updatedFormValues]);
+
   useEffect(() => {
     const detectModeAndFetch = () => {
       // Once we have API set up ready, we don't need the

src/main/www/src/components/Application/MembershipLevel/MembershipLevel.js

@@ -21,9 +21,9 @@ import MembershipContext from '../../../Context/MembershipContext';
  *    - formField: the form field in formModels/formFieldModel.js;
  */
 
-const MembershipLevel = ({ formik, updatedFormValues, submitForm }) => {
+const MembershipLevel = ({ formik, updatedFormValues, setUpdatedFormValues, submitForm }) => {
   const { membershipLevel } = formField;
-  const { setFieldValue } = formik;
+  const { setFieldValue, values } = formik;
   const { setCurrentStepIndex } = useContext(MembershipContext);
 
   useEffect(() => {
@@ -38,6 +38,13 @@ const MembershipLevel = ({ formik, updatedFormValues, submitForm }) => {
     setFieldValue(CURRENT_STEP, MEMBERSHIP_LEVEL_STEP);
   }, [setFieldValue]);
 
+  useEffect(() => {
+    if (updatedFormValues.currentStep === MEMBERSHIP_LEVEL_STEP || values.currentStep !== MEMBERSHIP_LEVEL_STEP) {
+      return;
+    }
+    setUpdatedFormValues(values);
+  }, [setUpdatedFormValues, values, updatedFormValues]);
+
   return (
     <>
       <div className="align-center">
@@ -55,7 +62,7 @@ const MembershipLevel = ({ formik, updatedFormValues, submitForm }) => {
             <DropdownMenu
               inputLabel="Select a level"
               inputName={membershipLevel.name}
-              inputValue={formik.values.membershipLevel}
+              inputValue={values.membershipLevel}
               optionsArray={MEMBERSHIP_LEVELS}
               handleChange={formik.handleChange}
               error={formik.touched.membershipLevel && Boolean(formik.errors.membershipLevel)}
@@ -69,7 +76,7 @@ const MembershipLevel = ({ formik, updatedFormValues, submitForm }) => {
       <CustomStepButton
         previousPage={ROUTE_COMPANY}
         nextPage={ROUTE_WGS}
-        checkIsEmpty={() => isObjectEmpty(formik.values.membershipLevel)}
+        checkIsEmpty={() => isObjectEmpty(values.membershipLevel)}
         formik={formik}
         updatedFormValues={updatedFormValues}
         submitForm={submitForm}

src/main/www/src/components/Application/SigningAuthority/SigningAuthority.js

@@ -14,9 +14,9 @@ import { CURRENT_STEP, ROUTE_REVIEW, ROUTE_WGS, SIGNING_AUTHORITY_STEP } from '.
  */
 
 const sectionName = 'signing-authority';
-const SigningAuthority = ({ formik, updatedFormValues, submitForm }) => {
+const SigningAuthority = ({ formik, updatedFormValues, setUpdatedFormValues, submitForm }) => {
   const { setCurrentStepIndex } = useContext(MembershipContext);
-  const { setFieldValue } = formik;
+  const { setFieldValue, values } = formik;
   const { signingAuthorityRepresentative } = formField;
   const name = 'signingAuthorityRepresentative';
   const generateSingleContact = (el) => (
@@ -26,10 +26,10 @@ const SigningAuthority = ({ formik, updatedFormValues, submitForm }) => {
         labelName={el.label}
         placeholder={el.placeholder}
         requiredMark={true}
-        disableInput={formik.values.signingAuthorityRepresentative.sameAsCompany}
+        disableInput={values.signingAuthorityRepresentative.sameAsCompany}
         ariaLabel={`${name}.${el.name}`}
         onChange={formik.handleChange}
-        value={formik.values.signingAuthorityRepresentative[`${el.name}`]}
+        value={values.signingAuthorityRepresentative[`${el.name}`]}
         error={