payment history page back button to previous page (#33269)

* payment history page back button to previous page

* add table heading ref

* update useState to useRef

* remove eslint disable

* remove isFocusable

src/applications/disability-benefits/view-payments/components/view-payments-lists/payments/Payments.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState, useRef } from 'react';
 import { chunk } from 'lodash';
 import PropTypes from 'prop-types';
 import { VaPagination } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
+import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
 
 import { clientServerErrorContent } from '../helpers';
 
@@ -26,22 +27,28 @@ const Payments = ({
   textContent,
   alertMessage,
 }) => {
+  const location = useLocation();
+  const navigate = useNavigate();
   const [currentData, setCurrentData] = useState([]);
-  const [currentPage, setCurrentPage] = useState(1);
-  // Using `useRef` here to avoid triggering a rerender whenever these are
-  // updated
+  const currentPage = new URLSearchParams(location.search).get('page') || 1;
   const totalPages = useRef(0);
-  const paginatedData = useRef([]);
+  const tableHeadingRef = useRef(null);
 
-  useEffect(() => {
-    paginatedData.current = paginateData(data);
-    setCurrentData(paginatedData.current[currentPage - 1]);
-    totalPages.current = paginatedData.current.length;
-  }, []);
+  useEffect(
+    () => {
+      const paginatedData = paginateData(data);
+      setCurrentData(paginatedData[currentPage - 1]);
+      totalPages.current = paginatedData.length;
+    },
+    [currentPage, data],
+  );
 
   const onPageChange = page => {
-    setCurrentData(paginatedData.current[page - 1]);
-    setCurrentPage(page);
+    const newURL = `${location.pathname}?page=${page}`;
+    if (tableHeadingRef) {
+      tableHeadingRef.current.focus();
+    }
+    navigate(newURL);
   };
 
   const [from, to] = getFromToNums(currentPage, data.length);
@@ -51,9 +58,14 @@ const Payments = ({
       <>
         {textContent}
         {alertMessage}
-        <h3 className="vads-u-font-size--lg vads-u-font-family--serif">
+        <h3
+          className="vads-u-font-size--lg vads-u-font-family--serif"
+          ref={tableHeadingRef}
+          tabIndex={-1}
+        >
           Displaying {from} - {to} of {data.length} payments
         </h3>
+
         <va-table>
           <va-table-row slot="headers">
             {fields.map(field => (

src/applications/disability-benefits/view-payments/tests/components/view-payments-lists/Payments/Payments.unit.spec.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { expect } from 'chai';
+import { MemoryRouter } from 'react-router-dom-v5-compat';
 import { payments } from '../../../helpers';
 import {
   paymentsReceivedFields,
@@ -17,6 +18,7 @@ describe('<Payments />', () => {
         tableVersion="received"
         textContent={paymentsReceivedContent}
       />,
+      { wrapper: MemoryRouter },
     );
 
     expect(await screen.findByText(/Payments you received/)).to.exist;
@@ -34,8 +36,55 @@ describe('<Payments />', () => {
         tableVersion="received"
         textContent={paymentsReceivedContent}
       />,
+      { wrapper: MemoryRouter },
     );
 
     expect(await screen.findByText(/No received payments/)).to.exist;
   });
+
+  const getPageFromURL = location => {
+    return new URLSearchParams(location.search).get('page') || 1;
+  };
+  it('should correctly parse the page number from the URL', () => {
+    const location = {
+      pathname: '/',
+      search: '?page=3',
+    };
+
+    render(
+      <MemoryRouter initialEntries={[location]}>
+        <Payments
+          fields={paymentsReceivedFields}
+          data={payments.payments}
+          tableVersion="received"
+          textContent={paymentsReceivedContent}
+          location={location} // Pass location to Payments component
+        />
+      </MemoryRouter>,
+    );
+
+    const page = getPageFromURL(location);
+    expect(page).to.equal('3');
+  });
+
+  it('should default to page 1 when no page param is provided', () => {
+    const location = {
+      pathname: '/',
+      search: '',
+    };
+
+    render(
+      <MemoryRouter initialEntries={[location]}>
+        <Payments
+          fields={paymentsReceivedFields}
+          data={payments.payments}
+          tableVersion="received"
+          textContent={paymentsReceivedContent}
+          location={location} // Pass location to Payments component
+        />
+      </MemoryRouter>,
+    );
+    const page = getPageFromURL(location);
+    expect(page).to.equal(1);
+  });
 });

src/applications/disability-benefits/view-payments/tests/components/view-payments-lists/view-payments-lists.unit.spec.jsx

@@ -6,6 +6,7 @@ import { setupServer } from 'msw/node';
 import { renderInReduxProvider } from 'platform/testing/unit/react-testing-library-helpers';
 import environment from 'platform/utilities/environment';
 
+import { MemoryRouter } from 'react-router-dom-v5-compat';
 import allPayments from '../../../reducers/index';
 import ViewPaymentsLists from '../../../components/view-payments-lists/ViewPaymentsLists';
 import {
@@ -70,10 +71,15 @@ describe('View Payments Lists', () => {
       },
     };
 
-    const screen = renderInReduxProvider(<ViewPaymentsLists />, {
-      initialState,
-      reducers: allPayments,
-    });
+    const screen = renderInReduxProvider(
+      <MemoryRouter>
+        <ViewPaymentsLists />
+      </MemoryRouter>,
+      {
+        initialState,
+        reducers: allPayments,
+      },
+    );
     expect(await screen.findByText(/Payments you received/)).to.exist;
     expect(screen.getByText(/Payments returned/)).to.exist;
   });
@@ -93,10 +99,15 @@ describe('View Payments Lists', () => {
       },
     };
 
-    const screen = renderInReduxProvider(<ViewPaymentsLists />, {
-      initialState,
-      reducers: allPayments,
-    });
+    const screen = renderInReduxProvider(
+      <MemoryRouter>
+        <ViewPaymentsLists />
+      </MemoryRouter>,
+      {
+        initialState,
+        reducers: allPayments,
+      },
+    );
 
     expect(await screen.findByText(/Payments you received/)).to.exist;
     expect(
@@ -119,10 +130,15 @@ describe('View Payments Lists', () => {
       },
     };
 
-    const screen = renderInReduxProvider(<ViewPaymentsLists />, {
-      initialState,
-      reducers: allPayments,
-    });
+    const screen = renderInReduxProvider(
+      <MemoryRouter>
+        <ViewPaymentsLists />
+      </MemoryRouter>,
+      {
+        initialState,
+        reducers: allPayments,
+      },
+    );
 
     expect(
       await screen.findByText(