update filters:

consolidate filter

consolidate filter

save work

update options

delete company typeahead component since we genericized it with asynctypeaheadwrapper

remove wrapper and use typeahead directly

remove handleFetchSearch

fixing unit test

fixing nested

fixing test

fix test, lint

fixing tests

update tests

update dist

adding MSA and Cong Dist filters to frontend

remove zipcode filter

update dist

Author: flacoman91

dist/ccdb5.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 />

dist/ccdb5.js.map

@@ -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/FilterPanel/FilterPanel.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();