From 3036d55f84aef65d72cf86601ce52990edb7946b Mon Sep 17 00:00:00 2001 From: Sampo Tawast Date: Fri, 15 Dec 2023 12:01:02 +0200 Subject: [PATCH] feat: don't assume but actually implement form submission state --- .../step5/ApplicationFormStep5.tsx | 6 ++--- .../step5/useApplicationFormStep5.ts | 14 +++++----- .../step6/ApplicationFormStep6.tsx | 6 ++--- .../step6/useApplicationFormStep6.ts | 9 +++---- .../applications/pageContent/PageContent.tsx | 12 ++++++--- .../pageContent/usePageContent.ts | 6 ++--- .../src/hooks/useUpdateApplicationQuery.ts | 26 +++++++++++++++++-- 7 files changed, 52 insertions(+), 27 deletions(-) diff --git a/frontend/benefit/applicant/src/components/applications/forms/application/step5/ApplicationFormStep5.tsx b/frontend/benefit/applicant/src/components/applications/forms/application/step5/ApplicationFormStep5.tsx index d43a73e83f..92a9615e2f 100644 --- a/frontend/benefit/applicant/src/components/applications/forms/application/step5/ApplicationFormStep5.tsx +++ b/frontend/benefit/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>; }; 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/frontend/benefit/applicant/src/components/applications/forms/application/step5/useApplicationFormStep5.ts b/frontend/benefit/applicant/src/components/applications/forms/application/step5/useApplicationFormStep5.ts index a454e35062..3b9ea9ef1a 100644 --- a/frontend/benefit/applicant/src/components/applications/forms/application/step5/useApplicationFormStep5.ts +++ b/frontend/benefit/applicant/src/components/applications/forms/application/step5/useApplicationFormStep5.ts @@ -26,16 +26,19 @@ type ExtendedComponentProps = { const useApplicationFormStep5 = ( application: Application, - onSubmit?: () => void + setIsSubmittedApplication: React.Dispatch> ): 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/frontend/benefit/applicant/src/components/applications/forms/application/step6/ApplicationFormStep6.tsx b/frontend/benefit/applicant/src/components/applications/forms/application/step6/ApplicationFormStep6.tsx index 5c4da63f8c..5e3eb32736 100644 --- a/frontend/benefit/applicant/src/components/applications/forms/application/step6/ApplicationFormStep6.tsx +++ b/frontend/benefit/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>; }; 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 (
diff --git a/frontend/benefit/applicant/src/components/applications/forms/application/step6/useApplicationFormStep6.ts b/frontend/benefit/applicant/src/components/applications/forms/application/step6/useApplicationFormStep6.ts index 28599444ef..de1f4bc743 100644 --- a/frontend/benefit/applicant/src/components/applications/forms/application/step6/useApplicationFormStep6.ts +++ b/frontend/benefit/applicant/src/components/applications/forms/application/step6/useApplicationFormStep6.ts @@ -35,7 +35,7 @@ type ExtendedComponentProps = { const useApplicationFormStep6 = ( application: Application, - onSubmit?: () => void + setIsSubmittedApplication: React.Dispatch> ): 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 index 88c363ebe0..5369f702ad 100644 --- 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 && } {currentStep === 4 && } {currentStep === 5 && ( - + )} {currentStep === 6 && ( - + )} ); diff --git a/frontend/benefit/applicant/src/components/applications/pageContent/usePageContent.ts b/frontend/benefit/applicant/src/components/applications/pageContent/usePageContent.ts index 50e8a83bd2..4ae5cd373b 100644 --- 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>; }; 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 index a08467b7aa..2eb2cefefb 100644 --- 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> +): UseMutationResult< ApplicationData, AxiosError, ApplicationData > => { + const { t } = useTranslation(); + const { axios, handleResponse } = useBackendAPI(); const queryClient = useQueryClient(); return useMutation, 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') + ); + }, } ); };