From 14fccd693fba49ec638b4871b7bcdc09f511a4c3 Mon Sep 17 00:00:00 2001
From: Maks Turtiainen <maks.turtiainen@vincit.fi>
Date: Wed, 16 Aug 2023 21:03:43 +0300
Subject: [PATCH] Fix form clearing when adding attachment bug

---
 .../newApplication/useApplicationForm.ts      |  8 +++--
 .../src/hooks/useApplicationQueryWithState.ts | 34 +++++++++++++++++++
 2 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 frontend/benefit/handler/src/hooks/useApplicationQueryWithState.ts

diff --git a/frontend/benefit/handler/src/components/newApplication/useApplicationForm.ts b/frontend/benefit/handler/src/components/newApplication/useApplicationForm.ts
index b0d1809c96..6b183bf9c2 100644
--- a/frontend/benefit/handler/src/components/newApplication/useApplicationForm.ts
+++ b/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 } =
diff --git a/frontend/benefit/handler/src/hooks/useApplicationQueryWithState.ts b/frontend/benefit/handler/src/hooks/useApplicationQueryWithState.ts
new file mode 100644
index 0000000000..110406c379
--- /dev/null
+++ b/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;