Merge pull request #2176 from City-of-Helsinki/HL-814-handler-attachm…

…ent-bug-2

HL-814: Fix form clearing bug when adding attachment

frontend/benefit/handler/src/components/newApplication/useApplicationForm.ts

@@ -2,7 +2,7 @@ import {
   APPLICATION_FIELD_KEYS,
   APPLICATION_FIELDS,
 } from 'benefit/handler/constants';
-import useApplicationQuery from 'benefit/handler/hooks/useApplicationQuery';
+import useApplicationQueryWithState from 'benefit/handler/hooks/useApplicationQueryWithState';
 import useFormActions from 'benefit/handler/hooks/useFormActions';
 import {
   StepActionType,
@@ -93,11 +93,14 @@ export const useApplicationForm = (): ExtendedComponentProps => {
     }
   }, [id, dispatchStep]);
 
+  const [application, setApplication] = React.useState<Application>(
+    getApplication({} as ApplicationData)
+  );
   const {
     status: applicationDataStatus,
     data: applicationData,
     error: applicationDataError,
-  } = useApplicationQuery(id);
+  } = useApplicationQueryWithState(id, setApplication);
 
   React.useEffect(() => {
     if (applicationDataError) {
@@ -116,7 +119,6 @@ export const useApplicationForm = (): ExtendedComponentProps => {
     }
   }, [t, applicationDataError, applicationDataStatus, id, applicationData]);
 
-  const application = getApplication(applicationData);
   organizationType = application.company?.organizationType ?? 'company';
 
   const { onSave, onQuietSave, onSubmit, onNext, onDelete } =

frontend/benefit/handler/src/hooks/useApplicationQueryWithState.ts

@@ -0,0 +1,34 @@
+import { Application } from 'benefit/handler/types/application';
+import { BackendEndpoint } from 'benefit-shared/backend-api/backend-api';
+import { ApplicationData } from 'benefit-shared/types/application';
+import React from 'react';
+import { useQuery, UseQueryResult } from 'react-query';
+import useBackendAPI from 'shared/hooks/useBackendAPI';
+
+import { getApplication } from '../components/newApplication/utils/applicationForm';
+
+const useApplicationQueryWithState = (
+  id: string,
+  setApplication: React.Dispatch<React.SetStateAction<Application>>
+): UseQueryResult<ApplicationData, Error> => {
+  const { axios, handleResponse } = useBackendAPI();
+
+  return useQuery<ApplicationData, Error>(
+    ['applications', id],
+    () =>
+      !id
+        ? Promise.reject(new Error('Missing application id'))
+        : handleResponse<ApplicationData>(
+            axios.get(`${BackendEndpoint.HANDLER_APPLICATIONS}${id}/`)
+          ),
+    {
+      onSuccess: (data) => {
+        setApplication(getApplication(data));
+      },
+      enabled: Boolean(id),
+      staleTime: Infinity,
+    }
+  );
+};
+
+export default useApplicationQueryWithState;