[TTAHUB-278] grantee search page

frontend/src/App.js

@@ -28,7 +28,9 @@ import LandingLayout from './components/LandingLayout';
 import RequestPermissions from './components/RequestPermissions';
 import AriaLiveContext from './AriaLiveContext';
 import AriaLiveRegion from './components/AriaLiveRegion';
+import FeatureFlag from './components/FeatureFlag';
 import ApprovedActivityReport from './pages/ApprovedActivityReport';
+import GranteeSearch from './pages/GranteeSearch';
 
 function App() {
   const [user, updateUser] = useState();
@@ -135,6 +137,13 @@ function App() {
           )}
         />
         )}
+        <Route
+          exact
+          path="/grantee-search"
+          render={() => (
+            <FeatureFlag user={user} flag="grantee_record_page" admin={admin} renderNotFound><GranteeSearch user={user} /></FeatureFlag>
+          )}
+        />
         <Route
           render={() => <NotFound />}
         />

frontend/src/Constants.js

@@ -84,6 +84,7 @@ export const REPORT_STATUSES = {
 
 export const REPORTS_PER_PAGE = 10;
 export const ALERTS_PER_PAGE = 10;
+export const GRANTEES_PER_PAGE = 12;
 export const GOVERNMENT_HOSTNAME_EXTENSION = '.ohs.acf.hhs.gov';
 export const ESCAPE_KEY_CODE = 27;
 

frontend/src/components/SiteNav.js

@@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { NavLink as Link, withRouter } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faChartBar, faBorderAll } from '@fortawesome/free-solid-svg-icons';
+import { faChartBar, faBorderAll, faUserFriends } from '@fortawesome/free-solid-svg-icons';
 
 import './SiteNav.css';
 
@@ -86,6 +86,21 @@ const SiteNav = ({
                       Activity Reports
                     </NavLink>
                   </li>
+                  {admin
+                    ? (
+                      <>
+                        <li>
+                          <NavLink
+                            to="/grantee-search"
+                          >
+                            <span className="padding-right-1">
+                              <FontAwesomeIcon color="white" icon={faUserFriends} />
+                            </span>
+                            Grantees
+                          </NavLink>
+                        </li>
+                      </>
+                    ) : null }
                   <li>
                     <NavLink
                       to="/regional-dashboard"

frontend/src/fetchers/grantee.js

@@ -0,0 +1,20 @@
+import join from 'url-join';
+import { get } from './index';
+import { DECIMAL_BASE } from '../Constants';
+
+const granteeUrl = join('/', 'api', 'grantee');
+
+// eslint-disable-next-line import/prefer-default-export
+export const searchGrantees = async (query, regionId = '', params = { sortBy: 'name', direction: 'asc', offset: 0 }) => {
+  if (!query) {
+    throw new Error('Please provide a query string to search grantees');
+  }
+
+  const querySearch = `?s=${query}`;
+  const regionSearch = regionId ? `&region=${regionId.toString(DECIMAL_BASE)}` : '';
+
+  const grantees = await get(
+    join(granteeUrl, 'search', querySearch, regionSearch, `&sortBy=${params.sortBy}&direction=${params.direction}&offset=${params.offset}`),
+  );
+  return grantees.json();
+};