From aa5fc007858f5c3ffe1049c7e031698bc92f7c2b Mon Sep 17 00:00:00 2001
From: Marko Haarni <marko.haarni@gofore.com>
Date: Wed, 4 Oct 2023 10:28:01 +0300
Subject: [PATCH] HAI-1814 Fix sending multiple application delete requests

Fixed a problem where user could press confirm button in application cancel dialog
many times in a row, which would send multiple delete requests to backend.
Fixed this by putting the confirm button in loading state when clicking it first time.
---
 .../applicationView/ApplicationView.test.tsx  | 25 +++++++++++++++++++
 .../components/ApplicationCancel.tsx          |  1 +
 2 files changed, 26 insertions(+)

diff --git a/src/domain/application/applicationView/ApplicationView.test.tsx b/src/domain/application/applicationView/ApplicationView.test.tsx
index f445694a2..276f0339e 100644
--- a/src/domain/application/applicationView/ApplicationView.test.tsx
+++ b/src/domain/application/applicationView/ApplicationView.test.tsx
@@ -4,6 +4,7 @@ import { render, screen } from '../../../testUtils/render';
 import ApplicationViewContainer from './ApplicationViewContainer';
 import { waitForLoadingToFinish } from '../../../testUtils/helperFunctions';
 import { server } from '../../mocks/test-server';
+import * as applicationApi from '../utils';
 
 test('Correct information about application should be displayed', async () => {
   render(<ApplicationViewContainer id={4} />);
@@ -90,3 +91,27 @@ test('Should not be able to cancel application if it has moved to handling in Al
 
   expect(screen.queryByRole('button', { name: 'Peru hakemus' })).not.toBeInTheDocument();
 });
+
+test('Should not send multiple requests if clicking application cancel confirm button many times', async () => {
+  server.use(
+    rest.delete('/api/hakemukset/:id', async (req, res, ctx) => {
+      return res(ctx.delay(200), ctx.status(200));
+    }),
+  );
+
+  const cancelApplication = jest.spyOn(applicationApi, 'cancelApplication');
+  const { user } = render(<ApplicationViewContainer id={1} />);
+
+  await waitForLoadingToFinish();
+
+  await user.click(screen.getByRole('button', { name: 'Peru hakemus' }));
+  const confirmCancelButton = screen.getByRole('button', { name: 'Vahvista' });
+  await user.click(confirmCancelButton);
+  await user.click(confirmCancelButton);
+  await user.click(confirmCancelButton);
+  await screen.findByText('Hakemus peruttiin onnistuneesti');
+
+  expect(cancelApplication).toHaveBeenCalledTimes(1);
+
+  cancelApplication.mockRestore();
+});
diff --git a/src/domain/application/components/ApplicationCancel.tsx b/src/domain/application/components/ApplicationCancel.tsx
index 8d10d2443..0c7155261 100644
--- a/src/domain/application/components/ApplicationCancel.tsx
+++ b/src/domain/application/components/ApplicationCancel.tsx
@@ -91,6 +91,7 @@ export const ApplicationCancel: React.FC<Props> = ({
         mainBtnLabel={t('common:confirmationDialog:confirmButton')}
         variant="danger"
         errorMsg={errorMessage}
+        isLoading={applicationCancelMutation.isLoading}
       />
 
       <Button