96894 - tab update

department-of-veterans-affairs · Dec 26, 2024 · af58d7e · af58d7e
1 parent b5298f0
commit af58d7e
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 11 deletions.
diff --git a/src/applications/accredited-representative-portal/containers/POARequestDetailsPage.jsx b/src/applications/accredited-representative-portal/containers/POARequestDetailsPage.jsx
@@ -1,7 +1,8 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Link, useLoaderData } from 'react-router-dom';
 import { formatDateShort } from 'platform/utilities/date/index';
+import { apiRequest } from '@department-of-veterans-affairs/platform-utilities/api';
+import mockPOARequestsResponse from '../mocks/mockPOARequestsResponse.json';
 
 const checkAuthorizations = (
   isTreatmentDisclosureAuthorized,
@@ -163,10 +164,6 @@ const POARequestDetailsPage = () => {
   );
 };
 
-POARequestDetailsPage.propTypes = {
-  usePOARequests: PropTypes.func.isRequired,
-};
-
 export default POARequestDetailsPage;
 
 export async function poaRequestLoader({ params }) {

diff --git a/src/applications/accredited-representative-portal/containers/POARequestsPage.jsx b/src/applications/accredited-representative-portal/containers/POARequestsPage.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import { useLoaderData, NavLink, Outlet } from 'react-router-dom';
+import { apiRequest } from '@department-of-veterans-affairs/platform-utilities/api';
+import mockPOARequestsResponse from '../mocks/mockPOARequestsResponse.json';
 import DigitalSubmissionAlert from '../components/DigitalSubmissionAlert/DigitalSubmissionAlert';
 
 const POARequestsPage = () => {
@@ -18,20 +20,18 @@ const POARequestsPage = () => {
           <>
             <div role="tablist" className="poa-request__tabs">
               <NavLink
-                to="/poa-requests/pending"
+                to="/poa-requests?status=pending"
                 className="poa-request__tab-link"
                 role="tab"
-                aria-selected={({ isActive }) => (isActive ? 'true' : 'false')}
                 aria-controls="panel-pending"
                 id="pending"
               >
                 Pending requests
               </NavLink>
               <NavLink
-                to="/poa-requests/completed"
+                to="/poa-requests?status=completed"
                 className="poa-request__tab-link"
                 role="tab"
-                aria-selected={({ isActive }) => (isActive ? 'true' : 'false')}
                 aria-controls="panel-completed"
                 id="completed"
               >
@@ -48,16 +48,24 @@ const POARequestsPage = () => {
 
 export default POARequestsPage;
 
-export async function poaRequestsLoader() {
+export async function poaRequestsLoader({ request }) {
   try {
     const response = await apiRequest('/power_of_attorney_requests', {
       apiVersion: 'accredited_representative_portal/v0',
     });
     return response.data;
   } catch (error) {
+    const url = new URL(request.url);
+    const status = url.searchParams.get('status');
     // Return mock data if API fails
     // TODO: Remove mock data before pilot and uncomment throw statement
-    return mockPOARequestsResponse.data;
+    const requests = mockPOARequestsResponse?.data?.map(req => req);
+    return requests?.filter(x => {
+      if (status === 'completed') {
+        return x.attributes.status !== 'Pending';
+      }
+      return x.attributes.status === 'Pending';
+    });
     // throw error;
   }
 }
diff --git a/src/applications/accredited-representative-portal/routes.jsx b/src/applications/accredited-representative-portal/routes.jsx
@@ -12,6 +12,7 @@ import POARequestDetailsPage, {
   poaRequestLoader,
 } from './containers/POARequestDetailsPage';
 import ErrorMessage from './components/common/ErrorMessage';
+import POARequestCard from './components/POARequestsCard/POARequestsCard';
 
 const LoadingWrapper = () => {
   const navigation = useNavigation();
@@ -43,6 +44,15 @@ const router = createBrowserRouter(
                   element: <POARequestsPage />,
                   loader: poaRequestsLoader,
                   errorElement: <ErrorMessage />,
+                  children: [
+                    {
+                      index: true,
+                      param: 'poa-requests?status=:status',
+                      element: <POARequestCard />,
+                      loader: poaRequestsLoader,
+                      errorElement: <ErrorMessage />,
+                    },
+                  ],
                 },
                 {
                   path: 'poa-requests/:id',