From e3b26b4750df694e28d6e3630970ee616004acaa Mon Sep 17 00:00:00 2001
From: Sampo Tawast <5328394+sirtawast@users.noreply.github.com>
Date: Wed, 3 Apr 2024 13:21:39 +0300
Subject: [PATCH] fix: applicant - invalidate cache to prevent wrong
 application mode (HL-1183) (#2901)

* fix: cache bug where additional_information_needed button

lead to read-only mode but application edit should've occured

* fix: minor improvements on loading skeleton css and formatting
---
 .../applicationList/listItem/ListItem.tsx             |  2 +-
 .../applicationList/useApplicationList.ts             |  4 +---
 .../applications/pageContent/PageContent.tsx          |  6 +++---
 frontend/benefit/applicant/src/pages/_app.tsx         |  3 ++-
 frontend/benefit/applicant/src/pages/index.tsx        | 11 +++++++++++
 5 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/frontend/benefit/applicant/src/components/applications/applicationList/listItem/ListItem.tsx b/frontend/benefit/applicant/src/components/applications/applicationList/listItem/ListItem.tsx
index de24ad04aa..7a822acc9b 100644
--- a/frontend/benefit/applicant/src/components/applications/applicationList/listItem/ListItem.tsx
+++ b/frontend/benefit/applicant/src/components/applications/applicationList/listItem/ListItem.tsx
@@ -98,7 +98,7 @@ const ListItem: React.FC<ListItemProps> = (props) => {
             <$StatusDataColumn className={`list-item-status--${status}`}>
               <$DataHeader>{t(`${translationBase}.common.status`)}</$DataHeader>
               <$StatusDataValue>
-                <StatusIcon status={status}/>
+                <StatusIcon status={status} />
                 <span>{statusText}</span>
               </$StatusDataValue>
             </$StatusDataColumn>
diff --git a/frontend/benefit/applicant/src/components/applications/applicationList/useApplicationList.ts b/frontend/benefit/applicant/src/components/applications/applicationList/useApplicationList.ts
index 7b0250e380..869ffdb6d9 100644
--- a/frontend/benefit/applicant/src/components/applications/applicationList/useApplicationList.ts
+++ b/frontend/benefit/applicant/src/components/applications/applicationList/useApplicationList.ts
@@ -7,9 +7,7 @@ import {
   ApplicationAllowedAction,
   ApplicationListItemData,
 } from 'benefit-shared/types/application';
-import {
-  IconPen,
-} from 'hds-react';
+import { IconPen } from 'hds-react';
 import camelCase from 'lodash/camelCase';
 import { useRouter } from 'next/router';
 import { TFunction } from 'next-i18next';
diff --git a/frontend/benefit/applicant/src/components/applications/pageContent/PageContent.tsx b/frontend/benefit/applicant/src/components/applications/pageContent/PageContent.tsx
index 40d2856192..f89cbb4f35 100644
--- a/frontend/benefit/applicant/src/components/applications/pageContent/PageContent.tsx
+++ b/frontend/benefit/applicant/src/components/applications/pageContent/PageContent.tsx
@@ -2,7 +2,8 @@ import {
   $HeaderItem,
   $HeaderRightColumnItem,
   $PageHeader,
-  $PageHeading, $PageHeadingApplicant,
+  $PageHeading,
+  $PageHeadingApplicant,
   $PageHeadingHelperText,
   $PageSubHeading,
   $SpinnerContainer,
@@ -138,8 +139,7 @@ const PageContent: React.FC = () => {
               {t('common:applications.pageHeaders.edit')}
             </$PageHeading>
             <$PageHeadingApplicant>
-              {application.employee.firstName}{" "}
-              {application.employee.lastName}
+              {application.employee.firstName} {application.employee.lastName}
             </$PageHeadingApplicant>
           </$HeaderItem>
           {id && application?.submittedAt && application?.applicationNumber && (
diff --git a/frontend/benefit/applicant/src/pages/_app.tsx b/frontend/benefit/applicant/src/pages/_app.tsx
index e7c9b41471..fe69d0496a 100644
--- a/frontend/benefit/applicant/src/pages/_app.tsx
+++ b/frontend/benefit/applicant/src/pages/_app.tsx
@@ -1,7 +1,8 @@
-import 'react-toastify/dist/ReactToastify.css';
 import '../styles/globals.css';
+import 'react-toastify/dist/ReactToastify.css';
 import 'benefit-shared/styles/app.css';
 import 'hds-design-tokens';
+import 'react-loading-skeleton/dist/skeleton.css';
 
 import AuthProvider from 'benefit/applicant/auth/AuthProvider';
 import CookieConsent from 'benefit/applicant/components/cookieConsent/CookieConsent';
diff --git a/frontend/benefit/applicant/src/pages/index.tsx b/frontend/benefit/applicant/src/pages/index.tsx
index 22d5e40cf8..5e2d503c13 100644
--- a/frontend/benefit/applicant/src/pages/index.tsx
+++ b/frontend/benefit/applicant/src/pages/index.tsx
@@ -12,6 +12,7 @@ import Head from 'next/head';
 import { useRouter } from 'next/router';
 import * as React from 'react';
 import { useCallback, useEffect, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import withAuth from 'shared/components/hocs/withAuth';
 import getServerSideTranslations from 'shared/i18n/get-server-side-translations';
 
@@ -21,6 +22,8 @@ import FrontPageProvider from '../context/FrontPageProvider';
 const ApplicantIndex: NextPage = () => {
   const { t } = useTranslation();
   const router = useRouter();
+  const queryClient = useQueryClient();
+
   const { setIsNavigationVisible } = React.useContext(AppContext);
 
   useEffect(() => {
@@ -31,6 +34,14 @@ const ApplicantIndex: NextPage = () => {
     };
   }, [setIsNavigationVisible]);
 
+  /**
+   * Fix a cache issue where single application's button opens up a read-only
+   * application if status changes to "additional_information_needed"
+   */
+  const effectInvalidateApplicationsCache = () =>
+    void queryClient.invalidateQueries('applications');
+  useEffect(effectInvalidateApplicationsCache, [queryClient]);
+
   const [infoNeededCount, setInfoNeededCount] = useState<number | null>(null);
   const [draftCount, setDraftCount] = useState<number | null>(null);
   const [submittedCount, setSubmittedCount] = useState<number | null>(null);