Merge pull request #212 from adhocteam/kw-add-sorting-to-my-alerts

Add sorting to my alerts
adhocteam · Mar 12, 2021 · 4b57ee0 · 4b57ee0
2 parents 008d2bd + fd6ed45
commit 4b57ee0
Show file tree

Hide file tree

Showing 13 changed files with 458 additions and 121 deletions.
diff --git a/frontend/src/Constants.js b/frontend/src/Constants.js
@@ -78,3 +78,6 @@ export const REPORT_STATUSES = {
   NEEDS_ACTION: 'needs_action',
   APPROVED: 'approved',
 };
+
+export const REPORTS_PER_PAGE = 10;
+export const ALERTS_PER_PAGE = 10;
diff --git a/frontend/src/fetchers/activityReports.js b/frontend/src/fetchers/activityReports.js
@@ -1,6 +1,6 @@
 import join from 'url-join';
 import { get, put, post } from './index';
-import { DECIMAL_BASE } from '../Constants';
+import { DECIMAL_BASE, REPORTS_PER_PAGE, ALERTS_PER_PAGE } from '../Constants';
 
 const activityReportUrl = join('/', 'api', 'activity-reports');
 const activityReportAlertUrl = join('/', 'api', 'activity-reports', 'alerts');
@@ -31,13 +31,13 @@ export const getReport = async (reportId) => {
   return report.json();
 };
 
-export const getReports = async (sortBy = 'updatedAt', sortDir = 'desc', offset = 0, limit = 10) => {
+export const getReports = async (sortBy = 'updatedAt', sortDir = 'desc', offset = 0, limit = REPORTS_PER_PAGE) => {
   const reports = await get(`${activityReportUrl}?sortBy=${sortBy}&sortDir=${sortDir}&offset=${offset}&limit=${limit}`);
   return reports.json();
 };
 
-export const getReportAlerts = async () => {
-  const reports = await get(activityReportAlertUrl);
+export const getReportAlerts = async (sortBy = 'startDate', sortDir = 'asc', offset = 0, limit = ALERTS_PER_PAGE) => {
+  const reports = await get(`${activityReportAlertUrl}?sortBy=${sortBy}&sortDir=${sortDir}&offset=${offset}&limit=${limit}`);
   return reports.json();
 };
 

diff --git a/frontend/src/pages/Landing/MyAlerts.js b/frontend/src/pages/Landing/MyAlerts.js
@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Tag, Table } from '@trussworks/react-uswds';
@@ -10,6 +11,7 @@ import NewReport from './NewReport';
 import 'uswds/dist/css/uswds.css';
 import '@trussworks/react-uswds/lib/index.css';
 import './index.css';
+import { ALERTS_PER_PAGE } from '../../Constants';
 
 function renderReports(reports) {
   return reports.map((report) => {
@@ -51,12 +53,15 @@ function renderReports(reports) {
       </Tag>
     ));
 
+    const idKey = `my_alerts_${id}`;
+    const idLink = `/activity-reports/${id}`;
+    const statusClassName = `smart-hub--table-tag-status smart-hub--status-${status}`;
+
     return (
-      <tr key={`my_alerts_${id}`}>
+      <tr key={idKey}>
         <td>
           <Link
-            to={`/activity-reports/${id}`}
-            href={`/activity-reports/${id}`}
+            to={idLink}
           >
             {displayId}
           </Link>
@@ -79,7 +84,7 @@ function renderReports(reports) {
         </td>
         <td>
           <Tag
-            className={`smart-hub--table-tag-status smart-hub--status-${status}`}
+            className={statusClassName}
           >
             {status === 'needs_action' ? 'Needs action' : status}
           </Tag>
@@ -89,51 +94,121 @@ function renderReports(reports) {
   });
 }
 
-function MyAlerts({ reports, newBtn }) {
+export function renderTotal(offset, perPage, activePage, reportsCount) {
+  const from = offset >= reportsCount ? 0 : offset + 1;
+  const offsetTo = perPage * activePage;
+  let to;
+  if (offsetTo > reportsCount) {
+    to = reportsCount;
+  } else {
+    to = offsetTo;
+  }
+  return `${from}-${to} of ${reportsCount}`;
+}
+
+function MyAlerts(props) {
+  const {
+    reports,
+    newBtn,
+    alertsSortConfig,
+    alertsOffset,
+    alertsPerPage,
+    alertsActivePage,
+    alertReportsCount,
+    sortHandler,
+  } = props;
+  const getClassNamesFor = (name) => (alertsSortConfig.sortBy === name ? alertsSortConfig.direction : '');
+
+  const renderColumnHeader = (displayName, name) => {
+    const sortClassName = getClassNamesFor(name);
+    let fullAriaSort;
+    switch (sortClassName) {
+      case 'asc':
+        fullAriaSort = 'ascending';
+        break;
+      case 'desc':
+        fullAriaSort = 'descending';
+        break;
+      default:
+        fullAriaSort = 'none';
+        break;
+    }
+    return (
+      <th scope="col" aria-sort={fullAriaSort}>
+        <a
+          role="button"
+          tabIndex={0}
+          onClick={() => {
+            sortHandler(name);
+          }}
+          onKeyPress={() => sortHandler(name)}
+          className={sortClassName}
+          aria-label={`${displayName}. Activate to sort ${
+            sortClassName === 'asc' ? 'descending' : 'ascending'
+          }`}
+        >
+          {displayName}
+        </a>
+      </th>
+    );
+  };
+
   return (
     <>
-      { reports && reports.length === 0 && (
-      <Container className="landing" padding={0}>
-        <div id="caughtUp">
-          <div><h2>You&apos;re all caught up!</h2></div>
-          { newBtn && <p id="beginNew">Would you like to begin a new activity report?</p> }
-          { newBtn && <NewReport /> }
-        </div>
-      </Container>
-      ) }
-      { reports && reports.length > 0 && (
-      <SimpleBar>
-        <Container className="landing inline-size" padding={0}>
-          <Table bordered={false}>
-            <caption className="smart-hub--table-caption">
-              My activity report alerts
-            </caption>
-            <thead>
-              <tr>
-                <th scope="col">Report ID</th>
-                <th
-                  scope="col"
-                >
-                  Grantee
-                </th>
-                <th scope="col">Start date</th>
-                <th
-                  scope="col"
-                >
-                  Creator
-                </th>
-                <th scope="col">Collaborator(s)</th>
-                <th
-                  scope="col"
-                >
-                  Status
-                </th>
-              </tr>
-            </thead>
-            <tbody>{renderReports(reports)}</tbody>
-          </Table>
+      {reports && reports.length === 0 && (
+        <Container className="landing" padding={0}>
+          <div id="caughtUp">
+            <div>
+              <h2>You&apos;re all caught up!</h2>
+            </div>
+            {newBtn && (
+              <p id="beginNew">
+                Would you like to begin a new activity report?
+              </p>
+            )}
+            {newBtn && <NewReport />}
+          </div>
         </Container>
-      </SimpleBar>
+      )}
+      {reports && reports.length > 0 && (
+        <SimpleBar>
+          <Container className="landing inline-size" padding={0}>
+            <span
+              id="alertsTotalCount"
+              aria-label={`Displaying rows ${renderTotal(
+                alertsOffset,
+                alertsPerPage,
+                alertsActivePage,
+                alertReportsCount,
+              )}`}
+            >
+              {renderTotal(
+                alertsOffset,
+                alertsPerPage,
+                alertsActivePage,
+                alertReportsCount,
+              )}
+            </span>
+
+            <Table bordered={false}>
+              <caption className="smart-hub--table-caption">
+                My activity report alerts
+                <p id="arTblDesc">with sorting</p>
+              </caption>
+              <thead>
+                <tr>
+                  {renderColumnHeader('Report ID', 'regionId')}
+                  {renderColumnHeader('Grantee', 'activityRecipients')}
+                  {renderColumnHeader('Start date', 'startDate')}
+                  {renderColumnHeader('Creator', 'author')}
+                  {renderColumnHeader('Collaborator(s)', 'collaborators')}
+                  {renderColumnHeader('Status', 'status')}
+                </tr>
+              </thead>
+              <tbody>{renderReports(reports)}</tbody>
+            </Table>
+          </Container>
+        </SimpleBar>
       )}
     </>
   );
@@ -142,10 +217,20 @@ function MyAlerts({ reports, newBtn }) {
 MyAlerts.propTypes = {
   reports: PropTypes.arrayOf(PropTypes.object),
   newBtn: PropTypes.bool.isRequired,
+  alertsSortConfig: PropTypes.shape({ sortBy: PropTypes.string, direction: PropTypes.string }),
+  alertsOffset: PropTypes.number,
+  alertsPerPage: PropTypes.number,
+  alertsActivePage: PropTypes.number,
+  alertReportsCount: PropTypes.number.isRequired,
+  sortHandler: PropTypes.func.isRequired,
 };
 
 MyAlerts.defaultProps = {
   reports: [],
+  alertsSortConfig: { sortBy: 'startDate', direction: 'asc' },
+  alertsOffset: 0,
+  alertsPerPage: ALERTS_PER_PAGE,
+  alertsActivePage: 1,
 };
 
 export default MyAlerts;
diff --git a/frontend/src/pages/Landing/__tests__/MyAlerts.js b/frontend/src/pages/Landing/__tests__/MyAlerts.js
@@ -7,13 +7,29 @@ import { MemoryRouter } from 'react-router';
 
 import MyAlerts from '../MyAlerts';
 import activityReports from '../mocks';
+import { ALERTS_PER_PAGE } from '../../../Constants';
 
 describe('My Alerts', () => {
   beforeEach(() => {
     const newBtn = true;
+    const alertsSortConfig = { sortBy: 'startDate', direction: 'desc' };
+    const alertsOffset = 0;
+    const alertsPerPage = ALERTS_PER_PAGE;
+    const alertsActivePage = 1;
+    const alertReportsCount = 10;
+    const requestAlertsSort = jest.fn();
     render(
       <MemoryRouter>
-        <MyAlerts reports={activityReports} newBtn={newBtn} />
+        <MyAlerts
+          reports={activityReports}
+          newBtn={newBtn}
+          alertsSortConfig={alertsSortConfig}
+          alertsOffset={alertsOffset}
+          alertsPerPage={alertsPerPage}
+          alertsActivePage={alertsActivePage}
+          alertReportsCount={alertReportsCount}
+          sortHandler={requestAlertsSort}
+        />
       </MemoryRouter>,
     );
   });