Move hIns error controller to the HealthInsQ

src/Components/HealthInsuranceQ/HealthInsuranceQ.tsx

@@ -1,28 +1,38 @@
+import { FormattedMessage, useIntl } from 'react-intl';
+import { useEffect } from 'react';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import { CardActionArea, Typography, Stack, FormHelperText } from '@mui/material';
-import { FormattedMessage, useIntl } from 'react-intl';
 import healthInsuranceOptions, { HealthInsuranceOptions } from '../../Assets/healthInsuranceOptions';
 import { HouseholdData, HealthInsurance } from '../../Types/FormData';
-import { ErrorController } from '../../Types/ErrorController';
+import { useErrorController, healthInsuranceDataHasError, getHealthInsuranceError } from '../../Assets/validationFunctions';
 import '../OptionCardGroup/OptionCardGroup.css';
 
 interface HealthInsuranceProps {
   hhMemberIndex: number;
   householdMemberData: HouseholdData;
   setHouseholdMemberData: (householdMemberData: HouseholdData) => void;
-  healthInsuranceErrorController: ErrorController;
+  submitted: number;
 }
 
 const HealthInsuranceQ = ({
   hhMemberIndex,
   householdMemberData,
   setHouseholdMemberData,
-  healthInsuranceErrorController,
+  submitted
 }: HealthInsuranceProps) => {
   const { healthInsurance } = householdMemberData;
+  const healthInsuranceErrorController = useErrorController(healthInsuranceDataHasError, getHealthInsuranceError);
   const intl = useIntl();
 
+  useEffect(() => {
+    healthInsuranceErrorController.setSubmittedCount(submitted);
+  }, [submitted]);
+
+  useEffect(() => {
+    healthInsuranceErrorController.updateError(healthInsurance);
+  });
+
   const displayQuestion = (page: number) => {
     if (page === 1) {
       return (
@@ -111,7 +121,7 @@ const HealthInsuranceQ = ({
     <Stack>
       {displayQuestion(hhMemberIndex)}
       {displayHealthInsuranceOptionCards(healthInsuranceOptions, healthInsurance, hhMemberIndex)}
-      {healthInsuranceErrorController.hasError && (
+      {healthInsuranceErrorController.showError && (
         <FormHelperText>{healthInsuranceErrorController.message(healthInsurance)}</FormHelperText>
       )}
     </Stack>

src/Components/HouseholdDataBlock/HouseholdDataBlock.js

@@ -12,8 +12,6 @@ import conditionOptions from '../../Assets/conditionOptions';
 import {
   householdMemberAgeHasError,
   displayHouseholdMemberAgeHelperText,
-  healthInsuranceDataHasError,
-  getHealthInsuranceError,
   personDataIsValid,
   useErrorController,
   selectHasError,
@@ -39,7 +37,6 @@ const HouseholdDataBlock = ({ handleHouseholdDataSubmit }) => {
     navigate(`/${uuid}/step-${step}/${page}`);
   };
   const ageErrorController = useErrorController(householdMemberAgeHasError, displayHouseholdMemberAgeHelperText);
-  const healthInsuranceErrorController = useErrorController(healthInsuranceDataHasError, getHealthInsuranceError);
 
   const initialHouseholdData = formData.householdData[page - 1] ?? {
     age: '',
@@ -398,7 +395,6 @@ const HouseholdDataBlock = ({ handleHouseholdDataSubmit }) => {
     event.preventDefault();
     ageErrorController.incrementSubmitted();
     ageErrorController.updateError(householdData.age);
-    healthInsuranceErrorController.incrementSubmitted();
 
     const validPersonData = personDataIsValid(householdData);
     const lastHouseholdMember = page >= remainingHHMNumber;
@@ -411,7 +407,6 @@ const HouseholdDataBlock = ({ handleHouseholdDataSubmit }) => {
       setPage(page + 1);
     } else if (!validPersonData) {
       setWasSubmitted(true);
-      healthInsuranceErrorController.updateError(householdData.healthInsurance);
     }
   };
 
@@ -430,7 +425,7 @@ const HouseholdDataBlock = ({ handleHouseholdDataSubmit }) => {
           hhMemberIndex={page}
           householdMemberData={hhMemberData}
           setHouseholdMemberData={setHHMemberData}
-          healthInsuranceErrorController={healthInsuranceErrorController}
+          submitted={ageErrorController.submittedCount}
         />
         <p className="household-data-q-underline"></p>
       </>