Merge pull request #518 from Chia-Network/update-error

Validate on next
Chia-Network · Mar 9, 2022 · 716a42d · 716a42d
2 parents 6867a25 + 9778b54
commit 716a42d
Show file tree

Hide file tree

Showing 21 changed files with 196 additions and 77 deletions.
diff --git a/src/components/blocks/APIDataTable.js b/src/components/blocks/APIDataTable.js
@@ -13,6 +13,7 @@ import {
   deleteProject,
   deleteUnit,
 } from '../../store/actions/climateWarehouseActions';
+import { setForm, setValidateForm } from '../../store/actions/app';
 
 const Table = styled('table')`
   box-sizing: border-box;
@@ -249,6 +250,8 @@ const APIDataTable = withTheme(
                               }),
                               action: () => {
                                 setEditRecord(record);
+                                dispatch(setForm('project'));
+                                dispatch(setValidateForm(false));
                               },
                             },
                             {
@@ -285,6 +288,8 @@ const APIDataTable = withTheme(
           <EditUnitsForm
             onClose={() => {
               setEditRecord(null);
+              dispatch(setForm(null));
+              dispatch(setValidateForm(false));
             }}
             record={editRecord}
             modalSizeAndPosition={modalSizeAndPosition}
@@ -294,6 +299,8 @@ const APIDataTable = withTheme(
           <EditProjectsForm
             onClose={() => {
               setEditRecord(null);
+              dispatch(setForm(null));
+              dispatch(setValidateForm(false));
             }}
             record={editRecord}
             modalSizeAndPosition={modalSizeAndPosition}

diff --git a/src/components/forms/CreateCoBenefitsForm.js b/src/components/forms/CreateCoBenefitsForm.js
@@ -1,6 +1,7 @@
 import u from 'updeep';
 import React, { useState, useEffect } from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
+import { useSelector } from 'react-redux';
 
 import { coBenefitSchema } from '../../store/validations';
 import { setValidationErrors } from '../../utils/validationUtils';
@@ -24,15 +25,18 @@ import {
 
 const CreateCoBenefitsForm = ({ value, onChange }) => {
   const [errorCoBenefitsMessage, setErrorCoBenefitsMessage] = useState({});
+  const { validateForm, formType } = useSelector(state => state.app);
   const intl = useIntl();
 
   const onInputChange = (field, changeValue) => {
     onChange(u({ [field]: changeValue }, value));
   };
 
   useEffect(() => {
-    setValidationErrors(coBenefitSchema, value, setErrorCoBenefitsMessage);
-  }, [value]);
+    if (validateForm && formType === 'co-benefits') {
+      setValidationErrors(coBenefitSchema, value, setErrorCoBenefitsMessage);
+    }
+  }, [value, validateForm, formType]);
 
   return (
     <ModalFormContainerStyle>

diff --git a/src/components/forms/CreateEstimationsForm.js b/src/components/forms/CreateEstimationsForm.js
@@ -1,6 +1,7 @@
 import u from 'updeep';
 import React, { useEffect, useState } from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
+import { useSelector } from 'react-redux';
 
 import {
   StandardInput,
@@ -27,15 +28,18 @@ import { setValidationErrors } from '../../utils/validationUtils';
 
 const CreateEstimationsForm = ({ value, onChange }) => {
   const intl = useIntl();
+  const { validateForm, formType } = useSelector(state => state.app);
   const [errorEstimationMessage, setErrorEstimationMessage] = useState({});
 
   const onInputChange = (field, changeValue) => {
     onChange(u({ [field]: changeValue }, value));
   };
 
   useEffect(() => {
-    setValidationErrors(estimationSchema, value, setErrorEstimationMessage);
-  }, [value]);
+    if (validateForm && formType === 'estimations') {
+      setValidationErrors(estimationSchema, value, setErrorEstimationMessage);
+    }
+  }, [value, validateForm, formType]);
 
   return (
     <ModalFormContainerStyle>

diff --git a/src/components/forms/CreateLocationsForm.js b/src/components/forms/CreateLocationsForm.js
@@ -33,14 +33,17 @@ const CreateLocationsForm = ({ value, onChange }) => {
   const [errorLocationMessage, setErrorLocationMessage] = useState({});
   const intl = useIntl();
   const { pickLists } = useSelector(store => store.climateWarehouse);
+  const { validateForm, formType } = useSelector(state => state.app);
 
   const onInputChange = (field, changeValue) => {
     onChange(u({ [field]: changeValue }, value));
   };
 
   useEffect(() => {
-    setValidationErrors(locationSchema, value, setErrorLocationMessage);
-  }, [value]);
+    if (validateForm && formType === 'project-locations') {
+      setValidationErrors(locationSchema, value, setErrorLocationMessage);
+    }
+  }, [value, validateForm, formType]);
 
   const selectCountriesOptions = useMemo(
     () =>

diff --git a/src/components/forms/CreateProjectForm.js b/src/components/forms/CreateProjectForm.js
@@ -22,6 +22,7 @@ import { postNewProject } from '../../store/actions/climateWarehouseActions';
 import { useIntl } from 'react-intl';
 
 import { projectSchema } from '../../store/validations';
+import { setValidateForm, setForm } from '../../store/actions/app';
 import { cleanObjectFromEmptyFieldsOrArrays } from '../../utils/formatData';
 
 const CreateProjectForm = withRouter(({ onClose, modalSizeAndPosition }) => {
@@ -63,13 +64,20 @@ const CreateProjectForm = withRouter(({ onClose, modalSizeAndPosition }) => {
     'related-projects',
   ];
 
+  useEffect(() => {
+    dispatch(setForm(stepperStepsTranslationIds[tabValue]));
+  }, [tabValue]);
+
   const onChangeStep = async (desiredStep = null) => {
     const isValid = await projectSchema.isValid(project);
+     dispatch(setValidateForm(true));
     if (isValid) {
+      dispatch(setValidateForm(false));
       if (desiredStep >= stepperStepsTranslationIds.length) {
         handleSubmitProject();
       } else {
         setTabValue(desiredStep);
+        dispatch(setValidateForm(false));
       }
     }
   };

diff --git a/src/components/forms/CreateProjectIssuancesForm.js b/src/components/forms/CreateProjectIssuancesForm.js
@@ -32,6 +32,7 @@ import {
 
 const CreateProjectIssuancesForm = ({ value, onChange }) => {
   const { issuances } = useSelector(store => store.climateWarehouse);
+  const { validateForm, formType } = useSelector(state => state.app);
   const [errorIssuanceMessage, setErrorIssuanceMessage] = useState({});
   const intl = useIntl();
   const { location } = useHistory();
@@ -102,8 +103,10 @@ const CreateProjectIssuancesForm = ({ value, onChange }) => {
   };
 
   useEffect(() => {
-    setValidationErrors(issuanceSchema, value, setErrorIssuanceMessage);
-  }, [value]);
+    if (validateForm && formType === 'issuances') {
+      setValidationErrors(issuanceSchema, value, setErrorIssuanceMessage);
+    }
+  }, [value, validateForm, formType]);
 
   return (
     <ModalFormContainerStyle>

diff --git a/src/components/forms/CreateProjectLabelsForm.js b/src/components/forms/CreateProjectLabelsForm.js
@@ -35,6 +35,7 @@ import { setValidationErrors } from '../../utils/validationUtils';
 
 const CreateProjectLabelsForm = ({ value, onChange }) => {
   const { labels } = useSelector(store => store.climateWarehouse);
+  const { validateForm, formType } = useSelector(state => state.app);
   const [errorLabelMessage, setErrorLabelMessage] = useState({});
   const intl = useIntl();
   const { pickLists } = useSelector(store => store.climateWarehouse);
@@ -106,8 +107,10 @@ const CreateProjectLabelsForm = ({ value, onChange }) => {
   );
 
   useEffect(() => {
+    if(validateForm && formType === 'labels'){
     setValidationErrors(labelSchema, value, setErrorLabelMessage);
-  }, [value]);
+    }
+  }, [value, validateForm, formType]);
 
   return (
     <ModalFormContainerStyle>

diff --git a/src/components/forms/CreateRatingsForm.js b/src/components/forms/CreateRatingsForm.js
@@ -32,6 +32,7 @@ import { setValidationErrors } from '../../utils/validationUtils';
 
 const CreateRatingsForm = ({ value, onChange }) => {
   const [errorRatingMessage, setErrorRatingMessage] = useState({});
+  const { validateForm, formType } = useSelector(state => state.app);
   const intl = useIntl();
   const { pickLists } = useSelector(store => store.climateWarehouse);
 
@@ -49,8 +50,10 @@ const CreateRatingsForm = ({ value, onChange }) => {
   );
 
   useEffect(() => {
+    if(validateForm && formType === 'ratings'){
     setValidationErrors(ratingSchema, value, setErrorRatingMessage);
-  }, [value]);
+    }
+  }, [value, validateForm, formType]);
 
   return (
     <ModalFormContainerStyle>

diff --git a/src/components/forms/CreateRelatedProjectsForm.js b/src/components/forms/CreateRelatedProjectsForm.js
@@ -1,6 +1,7 @@
 import u from 'updeep';
 import React, { useEffect, useState } from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
+import { useSelector } from 'react-redux';
 
 import { relatedProjectSchema } from '../../store/validations';
 import { setValidationErrors } from '../../utils/validationUtils';
@@ -27,19 +28,22 @@ const CreateRelatedProjectsForm = ({ value, onChange }) => {
   const [errorRelatedProjectMessage, setErrorRelatedProjectMessage] = useState(
     {},
   );
+  const { validateForm, formType } = useSelector(state => state.app);
   const intl = useIntl();
 
   const onInputChange = (field, changeValue) => {
     onChange(u({ [field]: changeValue }, value));
   };
 
   useEffect(() => {
-    setValidationErrors(
-      relatedProjectSchema,
-      value,
-      setErrorRelatedProjectMessage,
-    );
-  }, [value]);
+    if (validateForm && formType === 'related-projects') {
+      setValidationErrors(
+        relatedProjectSchema,
+        value,
+        setErrorRelatedProjectMessage,
+      );
+    }
+  }, [value, validateForm, formType]);
 
   return (
     <ModalFormContainerStyle>

diff --git a/src/components/forms/CreateUnitIssuanceForm.js b/src/components/forms/CreateUnitIssuanceForm.js
@@ -32,11 +32,14 @@ import {
 
 const CreateUnitIssuanceForm = ({ value, onChange }) => {
   const { issuances } = useSelector(store => store.climateWarehouse);
+  const { validateForm, formType } = useSelector(state => state.app);
   const [errorIssuanceMessage, setErrorIssuanceMessage] = useState({});
   const intl = useIntl();
   const { location } = useHistory();
 
-  const isUserOnUnitsPage = location.pathname.includes('projects') ? true : false;
+  const isUserOnUnitsPage = location.pathname.includes('projects')
+    ? true
+    : false;
 
   const areFieldsDisabled = useMemo(() => {
     if (!isUserOnUnitsPage) {
@@ -45,9 +48,9 @@ const CreateUnitIssuanceForm = ({ value, onChange }) => {
       }
       return false;
     }
-      if (isUserOnUnitsPage) {
-        return true;
-      }
+    if (isUserOnUnitsPage) {
+      return true;
+    }
   }, [isUserOnUnitsPage, value, value.id]);
 
   const getIssuanceLabel = issuance => {
@@ -102,8 +105,10 @@ const CreateUnitIssuanceForm = ({ value, onChange }) => {
   };
 
   useEffect(() => {
+    if(validateForm && formType === 'issuances'){
     setValidationErrors(issuanceSchema, value, setErrorIssuanceMessage);
-  }, [value]);
+    }
+  }, [value, validateForm, formType]);
 
   return (
     <ModalFormContainerStyle>

diff --git a/src/components/forms/CreateUnitLabelsForm.js b/src/components/forms/CreateUnitLabelsForm.js
@@ -34,12 +34,15 @@ import { setValidationErrors } from '../../utils/validationUtils';
 
 const CreateUnitLabelsForm = ({ value, onChange }) => {
   const { labels } = useSelector(store => store.climateWarehouse);
+  const { validateForm, formType } = useSelector(state => state.app);
   const [errorLabelMessage, setErrorLabelMessage] = useState({});
   const intl = useIntl();
   const { pickLists } = useSelector(store => store.climateWarehouse);
   const { location } = useHistory();
 
-  const isUserOnUnitsPage = location.pathname.includes('projects') ? true : false;
+  const isUserOnUnitsPage = location.pathname.includes('projects')
+    ? true
+    : false;
 
   const areFieldsDisabled = useMemo(() => {
     if (!isUserOnUnitsPage) {
@@ -102,8 +105,10 @@ const CreateUnitLabelsForm = ({ value, onChange }) => {
   );
 
   useEffect(() => {
-    setValidationErrors(labelSchema, value, setErrorLabelMessage);
-  }, [value]);
+    if (validateForm && formType === 'labels') {
+      setValidationErrors(labelSchema, value, setErrorLabelMessage);
+    }
+  }, [value, validateForm,formType]);
 
   return (
     <ModalFormContainerStyle>

diff --git a/src/components/forms/CreateUnitsForm.js b/src/components/forms/CreateUnitsForm.js
@@ -13,6 +13,7 @@ import { useIntl } from 'react-intl';
 import { unitsSchema } from '../../store/validations';
 import { UnitDetailsForm } from '.';
 import { cleanObjectFromEmptyFieldsOrArrays } from '../../utils/formatData';
+import { setValidateForm, setForm } from '../../store/actions/app';
 
 const StyledFormContainer = styled('div')`
   display: flex;
@@ -50,14 +51,17 @@ const CreateUnitsForm = withRouter(({ onClose, modalSizeAndPosition }) => {
   });
 
   const stepperStepsTranslationIds = ['unit', 'issuances', 'labels'];
-
   const onChangeStep = async (desiredStep = null) => {
     const isUnitValid = await unitsSchema.isValid(unit);
+    dispatch(setValidateForm(true));
     if (isUnitValid) {
+      dispatch(setValidateForm(false));
       if (desiredStep >= stepperStepsTranslationIds.length) {
         handleSubmitUnit();
       } else {
+        dispatch(setValidateForm(false));
         setTabValue(desiredStep);
+        dispatch(setForm(stepperStepsTranslationIds[desiredStep]))
       }
     }
   };