feat: don't assume but actually implement form submission state

City-of-Helsinki · Dec 15, 2023 · 3036d55 · 3036d55
1 parent e044f9b
commit 3036d55
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 27 deletions.
diff --git a/...it/applicant/src/components/applications/forms/application/step5/ApplicationFormStep5.tsx b/...it/applicant/src/components/applications/forms/application/step5/ApplicationFormStep5.tsx
@@ -23,12 +23,12 @@ import { useApplicationFormStep5 } from './useApplicationFormStep5';
 
 type ExtendedProps = {
   isReadOnly?: boolean;
-  onSubmit?: () => void;
+  setIsSubmittedApplication?: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 const ApplicationFormStep5: React.FC<
   DynamicFormStepComponentProps & ExtendedProps
-> = ({ data, isReadOnly, onSubmit }) => {
+> = ({ data, isReadOnly, setIsSubmittedApplication }) => {
   const {
     t,
     handleBack,
@@ -39,7 +39,7 @@ const ApplicationFormStep5: React.FC<
     handleClose,
     translationsBase,
     isSubmit,
-  } = useApplicationFormStep5(data, onSubmit);
+  } = useApplicationFormStep5(data, setIsSubmittedApplication);
 
   const theme = useTheme();
 

diff --git a/.../applicant/src/components/applications/forms/application/step5/useApplicationFormStep5.ts b/.../applicant/src/components/applications/forms/application/step5/useApplicationFormStep5.ts
@@ -26,16 +26,19 @@ type ExtendedComponentProps = {
 
 const useApplicationFormStep5 = (
   application: Application,
-  onSubmit?: () => void
+  setIsSubmittedApplication: React.Dispatch<React.SetStateAction<boolean>>
 ): ExtendedComponentProps => {
   const translationsBase = 'common:applications.sections';
   const { t } = useTranslation();
   const router = useRouter();
 
-  const { mutate: updateApplicationStep5, error: updateApplicationErrorStep5 } =
-    useUpdateApplicationQuery();
-
   const isSubmit = !application?.applicantTermsApprovalNeeded;
+  const passIsSubmittedApplicationSetState = isSubmit
+    ? setIsSubmittedApplication
+    : undefined;
+
+  const { mutate: updateApplicationStep5, error: updateApplicationErrorStep5 } =
+    useUpdateApplicationQuery(passIsSubmittedApplicationSetState);
 
   useEffect(() => {
     // todo:custom error messages
@@ -119,9 +122,6 @@ const useApplicationFormStep5 = (
       },
       { deep: true }
     ) as ApplicationData;
-    if (isSubmit && onSubmit) {
-      onSubmit();
-    }
     updateApplicationStep5(currentApplicationData);
   };
   const handleClose = (): void => {

diff --git a/...it/applicant/src/components/applications/forms/application/step6/ApplicationFormStep6.tsx b/...it/applicant/src/components/applications/forms/application/step6/ApplicationFormStep6.tsx
@@ -13,12 +13,12 @@ import StepperActions from '../stepperActions/StepperActions';
 import { useApplicationFormStep6 } from './useApplicationFormStep6';
 
 type ExtendedProps = {
-  onSubmit?: () => void;
+  setIsSubmittedApplication: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 const ApplicationFormStep6: React.FC<
   DynamicFormStepComponentProps & ExtendedProps
-> = ({ data, onSubmit }) => {
+> = ({ data, setIsSubmittedApplication }) => {
   const {
     t,
     handleSubmit,
@@ -32,7 +32,7 @@ const ApplicationFormStep6: React.FC<
     checkedArray,
     applicantTermsInEffectUrl,
     applicantTermsInEffectMd,
-  } = useApplicationFormStep6(data, onSubmit);
+  } = useApplicationFormStep6(data, setIsSubmittedApplication);
 
   return (
     <form onSubmit={handleSubmit} noValidate>

diff --git a/.../applicant/src/components/applications/forms/application/step6/useApplicationFormStep6.ts b/.../applicant/src/components/applications/forms/application/step6/useApplicationFormStep6.ts
@@ -35,7 +35,7 @@ type ExtendedComponentProps = {
 
 const useApplicationFormStep6 = (
   application: Application,
-  onSubmit?: () => void
+  setIsSubmittedApplication: React.Dispatch<React.SetStateAction<boolean>>
 ): ExtendedComponentProps => {
   const translationsBase = 'common:applications.sections.send';
   const { t } = useTranslation();
@@ -55,7 +55,9 @@ const useApplicationFormStep6 = (
 
   const { onSave, onBack, onDelete } = useFormActions(application);
 
-  const { mutate: updateApplicationStep6 } = useUpdateApplicationQuery();
+  const { mutate: updateApplicationStep6 } = useUpdateApplicationQuery(
+    setIsSubmittedApplication
+  );
 
   const handleClick = (consentIndex: number): void => {
     const newValue = !checkedArray[consentIndex];
@@ -114,9 +116,6 @@ const useApplicationFormStep6 = (
         },
         { deep: true }
       ) as ApplicationData;
-      if (onSubmit) {
-        onSubmit();
-      }
       updateApplicationStep6(currentApplicationData);
     }
   };

diff --git a/frontend/benefit/applicant/src/components/applications/pageContent/PageContent.tsx b/frontend/benefit/applicant/src/components/applications/pageContent/PageContent.tsx
@@ -48,7 +48,7 @@ const PageContent: React.FC = () => {
     isLoading,
     isReadOnly,
     isSubmittedApplication,
-    handleSubmit,
+    setIsSubmittedApplication,
   } = usePageContent();
 
   const theme = useTheme();
@@ -226,10 +226,16 @@ const PageContent: React.FC = () => {
       {currentStep === 3 && <ApplicationFormStep3 data={application} />}
       {currentStep === 4 && <ApplicationFormStep4 data={application} />}
       {currentStep === 5 && (
-        <ApplicationFormStep5 onSubmit={handleSubmit} data={application} />
+        <ApplicationFormStep5
+          setIsSubmittedApplication={setIsSubmittedApplication}
+          data={application}
+        />
       )}
       {currentStep === 6 && (
-        <ApplicationFormStep6 onSubmit={handleSubmit} data={application} />
+        <ApplicationFormStep6
+          setIsSubmittedApplication={setIsSubmittedApplication}
+          data={application}
+        />
       )}
     </Container>
   );

diff --git a/frontend/benefit/applicant/src/components/applications/pageContent/usePageContent.ts b/frontend/benefit/applicant/src/components/applications/pageContent/usePageContent.ts
@@ -24,7 +24,7 @@ type ExtendedComponentProps = {
   isError: boolean;
   isLoading: boolean;
   isSubmittedApplication: boolean;
-  handleSubmit: () => void;
+  setIsSubmittedApplication: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 const isApplicationLoaded = (id: number | string, status: string): boolean =>
@@ -116,8 +116,6 @@ const usePageContent = (): ExtendedComponentProps => {
     }));
   }, [t, currentStep]);
 
-  const handleSubmit = (): void => setIsSubmittedApplication(true);
-
   return {
     t,
     id,
@@ -127,8 +125,8 @@ const usePageContent = (): ExtendedComponentProps => {
     isLoading,
     isError: Boolean(id && existingApplicationError),
     isReadOnly,
+    setIsSubmittedApplication,
     isSubmittedApplication,
-    handleSubmit,
   };
 };
 

diff --git a/frontend/benefit/applicant/src/hooks/useUpdateApplicationQuery.ts b/frontend/benefit/applicant/src/hooks/useUpdateApplicationQuery.ts
@@ -1,16 +1,23 @@
 import { AxiosError } from 'axios';
 import { BackendEndpoint } from 'benefit-shared/backend-api/backend-api';
+import { APPLICATION_STATUSES } from 'benefit-shared/constants';
 import { ApplicationData } from 'benefit-shared/types/application';
+import { useTranslation } from 'next-i18next';
 import { useMutation, UseMutationResult, useQueryClient } from 'react-query';
+import showErrorToast from 'shared/components/toast/show-error-toast';
 import useBackendAPI from 'shared/hooks/useBackendAPI';
 
 import { ErrorData } from '../types/common';
 
-const useUpdateApplicationQuery = (): UseMutationResult<
+const useUpdateApplicationQuery = (
+  setIsSubmittedApplication?: React.Dispatch<React.SetStateAction<boolean>>
+): UseMutationResult<
   ApplicationData,
   AxiosError<ErrorData>,
   ApplicationData
 > => {
+  const { t } = useTranslation();
+
   const { axios, handleResponse } = useBackendAPI();
   const queryClient = useQueryClient();
   return useMutation<ApplicationData, AxiosError<ErrorData>, ApplicationData>(
@@ -23,10 +30,25 @@ const useUpdateApplicationQuery = (): UseMutationResult<
         )
       ),
     {
-      onSuccess: () => {
+      onSuccess: (updatedApplication: ApplicationData) => {
+        if (
+          setIsSubmittedApplication &&
+          [
+            APPLICATION_STATUSES.HANDLING,
+            APPLICATION_STATUSES.RECEIVED,
+          ].includes(updatedApplication.status)
+        ) {
+          setIsSubmittedApplication(true);
+        }
         void queryClient.invalidateQueries('applications');
         void queryClient.invalidateQueries('application');
       },
+      onError: () => {
+        showErrorToast(
+          t('common:error.generic.label'),
+          t('common:error.generic.text')
+        );
+      },
     }
   );
 };