diff --git a/src/applications/accredited-representative-portal/containers/POARequestDetailsPage.jsx b/src/applications/accredited-representative-portal/containers/POARequestDetailsPage.jsx index 46f371fb5259..b679cf6d75b7 100644 --- 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 index 24e3b403636d..5acb932ff24c 100644 --- 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 index a013175aea1e..730f754c1894 100644 --- 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',