MPDX-9130 Combine MHA Pages

pages/accountLists/[accountListId]/reports/housingAllowance/[...requestId].page.test.tsx → pages/accountLists/[accountListId]/reports/housingAllowance/[requestId].page.test.tsx

@@ -1,5 +1,5 @@
 import { blockImpersonatingNonDevelopers } from 'pages/api/utils/pagePropsHelpers';
-import { getServerSideProps } from './[...requestId].page';
+import { getServerSideProps } from './[requestId].page';
 
 describe('HousingAllowanceRequest page', () => {
   it('uses blockImpersonatingNonDevelopers for server-side props', () => {

pages/accountLists/[accountListId]/reports/housingAllowance/[...requestId].page.tsx → pages/accountLists/[accountListId]/reports/housingAllowance/[requestId].page.tsx

@@ -1,15 +1,13 @@
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import React, { useState } from 'react';
-import { Box } from '@mui/material';
+import { Box, CircularProgress } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { blockImpersonatingNonDevelopers } from 'pages/api/utils/pagePropsHelpers';
 import { SidePanelsLayout } from 'src/components/Layouts/SidePanelsLayout';
-import { EditRequestPage } from 'src/components/Reports/MinisterHousingAllowance/EditRequest/EditRequestPage';
-import { NewRequestPage } from 'src/components/Reports/MinisterHousingAllowance/NewRequest/NewRequestPage';
+import { RequestPage } from 'src/components/Reports/MinisterHousingAllowance/RequestPage/RequestPage';
 import { MinisterHousingAllowanceProvider } from 'src/components/Reports/MinisterHousingAllowance/Shared/Context/MinisterHousingAllowanceContext';
-import { ViewRequestPage } from 'src/components/Reports/MinisterHousingAllowance/ViewRequest/ViewRequestPage';
 import { PageEnum } from 'src/components/Reports/Shared/CalculationReports/Shared/sharedTypes';
 import { SimpleScreenOnly } from 'src/components/Reports/styledComponents';
 import {
@@ -28,24 +26,34 @@ const RequestPageWrapper = styled(Box)(({ theme }) => ({
 const HousingAllowanceRequestPage: React.FC = () => {
   const { t } = useTranslation();
   const router = useRouter();
-  const { requestId } = router.query;
+  const { requestId, mode } = router.query;
 
   if (!requestId) {
-    return null;
+    return <CircularProgress />;
   }
 
-  const mode = Array.isArray(requestId) ? requestId : [requestId];
+  const getPageType = (mode: string | string[] | undefined) => {
+    switch (mode) {
+      case 'new':
+        return PageEnum.New;
+      case 'edit':
+        return PageEnum.Edit;
+      case 'view':
+        return PageEnum.View;
+      default:
+        return undefined;
+    }
+  };
 
-  const type =
-    mode[1] === PageEnum.New
-      ? PageEnum.New
-      : mode[1] === PageEnum.Edit
-        ? PageEnum.Edit
-        : PageEnum.View;
+  const type = getPageType(mode);
+  if (!type) {
+    return null;
+  }
 
+  const modeLabel =
+    type === PageEnum.New ? 'New' : type === PageEnum.Edit ? 'Edit' : 'View';
   const title = t("{{mode}} Minister's Housing Allowance Request", {
-    mode:
-      type === PageEnum.New ? 'New' : type === PageEnum.Edit ? 'Edit' : 'View',
+    mode: modeLabel,
   });
 
   const [isNavListOpen, setIsNavListOpen] = useState(false);
@@ -82,14 +90,11 @@ const HousingAllowanceRequestPage: React.FC = () => {
                   headerType={HeaderTypeEnum.Report}
                 />
               </SimpleScreenOnly>
-              <MinisterHousingAllowanceProvider type={type}>
-                {type === PageEnum.New ? (
-                  <NewRequestPage />
-                ) : type === PageEnum.Edit ? (
-                  <EditRequestPage />
-                ) : (
-                  <ViewRequestPage />
-                )}
+              <MinisterHousingAllowanceProvider
+                type={type}
+                requestId={requestId as string}
+              >
+                <RequestPage />
               </MinisterHousingAllowanceProvider>
             </>
           }

src/components/Reports/MinisterHousingAllowance/MinisterHousingAllowance.tsx

@@ -12,9 +12,13 @@
 import { PanelTypeEnum } from '../Shared/CalculationReports/Shared/sharedTypes';
 import { EligibleDisplay } from './MainPages/EligibleDisplay';
 import { IneligibleDisplay } from './MainPages/IneligibleDisplay';
-import { useCreateHousingAllowanceRequestMutation } from './MinisterHousingAllowance.generated';
+import {
+  useCreateHousingAllowanceRequestMutation,
+  useMinistryHousingAllowanceRequestsQuery,
+} from './MinisterHousingAllowance.generated';
 import { MinisterHousingAllowanceReportSkeleton } from './MinisterHousingAllowanceSkeleton';
 import { useMinisterHousingAllowance } from './Shared/Context/MinisterHousingAllowanceContext';
+import { getRequestUrl } from './Shared/Helper/getRequestUrl';
 import { CurrentBoardApproved } from './SharedComponents/CurrentBoardApproved';
 import { CurrentRequest } from './SharedComponents/CurrentRequest';
 
@@ -25,14 +29,16 @@
   const { enqueueSnackbar } = useSnackbar();
   const accountListId = useAccountListId();
 
+  const { data, error: requestsError } =
+    useMinistryHousingAllowanceRequestsQuery();
+  const requestsData = data?.ministryHousingAllowanceRequests.nodes || [];
+
   const {
     isMarried,
     preferredName,
     spousePreferredName,
     userHcmData,
     spouseHcmData,
-    requestsData,
-    requestsError,
   } = useMinisterHousingAllowance();
 
   const personNumber = userHcmData?.staffInfo?.personNumber ?? '';
@@ -65,7 +71,7 @@
           },
         );
         const mhaRequestId = newRequest?.ministryHousingAllowanceRequest.id;
-        const requestLink = `/accountLists/${accountListId}/reports/housingAllowance/${mhaRequestId}/new`;
+        const requestLink = getRequestUrl(accountListId, mhaRequestId, 'new');
 
         // Wait 1 second before redirecting
         setTimeout(() => {