DATAP-1726 - adding MSA and Cong Dist filters to frontend

src/components/Filters/FilterPanel/FilterPanel.js

@@ -7,7 +7,7 @@ import { FederalState } from '../FederalState/FederalState';
 import { HasNarrative } from '../HasNarrative/HasNarrative';
 import getIcon from '../../Common/Icon/iconMap';
 import { SimpleFilter } from '../SimpleFilter/SimpleFilter';
-import { ZipCode } from '../ZipCode/ZipCode';
+import { RemoteTypeaheadFilter } from '../RemoteTypeaheadFilter/RemoteTypeaheadFilter';
 import { updateFilterVisibility } from '../../../reducers/view/viewSlice';
 import {
   selectViewHasFilters,
@@ -67,7 +67,29 @@ export const FilterPanel = () => {
           <hr />
           <FederalState />
           <hr />
-          <ZipCode />
+          <RemoteTypeaheadFilter
+            desc="The metropolitan statistical area (MSA) of the mailing address provided by the consumer"
+            fieldName="msa"
+            labelText="Start typing to begin listing MSA names"
+            placeholderText="Enter city or metro area name"
+            title="Metropolitan statistical area (MSA)"
+          />
+          <hr />
+          <RemoteTypeaheadFilter
+            desc="The mailing ZIP code provided by the consumer"
+            fieldName="zip_code"
+            labelText="Start typing to begin listing zip codes"
+            placeholderText="Enter ZIP code"
+            title="ZIP code"
+          />
+          <hr />
+          <RemoteTypeaheadFilter
+            desc="The congressional district of the mailing address provided by the consumer, for example, `Maryland Congressional District 4`"
+            fieldName="cong_district"
+            labelText="Start typing to begin listing MSA names"
+            placeholderText="Enter state name"
+            title="Congressional District"
+          />
           <hr />
           <Company />
           <hr />

src/components/Filters/RemoteTypeaheadFilter/RemoteTypeaheadFilter.js

@@ -0,0 +1,48 @@
+import { useSelector } from 'react-redux';
+import { CollapsibleFilter } from '../CollapsibleFilter/CollapsibleFilter';
+import { selectFiltersRoot } from '../../../reducers/filters/selectors';
+import { StickyOptions } from '../StickyOptions/StickyOptions';
+import { useGetAggregations } from '../../../api/hooks/useGetAggregations';
+import { AsyncTypeahead } from '../../Typeahead/AsyncTypeahead/AsyncTypeahead';
+import PropTypes from 'prop-types';
+
+export const RemoteTypeaheadFilter = ({
+  desc,
+  fieldName,
+  labelText,
+  placeholderText,
+  title,
+}) => {
+  const { data: aggsData, error } = useGetAggregations();
+  const filtersRoot = useSelector(selectFiltersRoot);
+  const filters = filtersRoot?.[fieldName] || [];
+  const aggs = error ? [] : aggsData?.[fieldName] || [];
+  // Zip code, CD, MSA aggregations coming from API
+  const stickyOptions = structuredClone(aggs);
+
+  return (
+    <CollapsibleFilter title={title} desc={desc} className="aggregation">
+      <AsyncTypeahead
+        fieldName={fieldName}
+        label={labelText}
+        placeholder={placeholderText}
+        ariaLabel={labelText}
+        htmlId={fieldName + 'typeahead'}
+        hasClearButton={true}
+      />
+      <StickyOptions
+        fieldName={fieldName}
+        options={stickyOptions}
+        selections={filters}
+      />
+    </CollapsibleFilter>
+  );
+};
+
+RemoteTypeaheadFilter.propTypes = {
+  desc: PropTypes.string.isRequired,
+  fieldName: PropTypes.string.isRequired,
+  labelText: PropTypes.string.isRequired,
+  placeholderText: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+};

src/components/Filters/ZipCode/ZipCode.spec.js → src/components/Filters/RemoteTypeaheadFilter/RemoteTypeaheadFilter.spec.js

@@ -7,7 +7,7 @@ import userEvent from '@testing-library/user-event';
 import fetchMock from 'jest-fetch-mock';
 import * as filterActions from '../../../reducers/filters/filtersSlice';
 import { filtersState } from '../../../reducers/filters/filtersSlice';
-import { ZipCode } from './ZipCode';
+import { RemoteTypeaheadFilter } from './RemoteTypeaheadFilter';
 import { cloneDeep, merge } from 'lodash';
 import { aggResponse } from '../../List/ListPanel/fixture';
 
@@ -21,12 +21,12 @@ const renderComponent = (newFiltersState) => {
     routes: { queryString: '?foo=bar' },
   };
 
-  render(<ZipCode />, {
+  render(<RemoteTypeaheadFilter />, {
     preloadedState: data,
   });
 };
 
-describe('ZipCode', () => {
+describe('RemoteTypeaheadFilter', () => {
   let zipAggsResponse;
   beforeEach(() => {
     fetchMock.resetMocks();