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

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>

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';

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 && (

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';

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);