convert company to nested filter

move limit to top 50 from the matched company filters

delete company filter, passing title to props

update nested filter test

remove show less logic, update icon, update unit tests

adding plus icon

remove typo

Author: flacoman91

src/components/Common/Icon/iconMap.js

@@ -14,6 +14,7 @@ import { ReactComponent as LineChart } from '../../../icons/line-chart-custom.sv
 import { ReactComponent as List } from '../../../icons/list.svg';
 import { ReactComponent as Map } from '../../../icons/map.svg';
 import { ReactComponent as MinusRound } from '../../../icons/minus-round.svg';
+import { ReactComponent as Plus } from '../../../icons/plus.svg';
 import { ReactComponent as PlusRound } from '../../../icons/plus-round.svg';
 import { ReactComponent as Printer } from '../../../icons/print.svg';
 import { ReactComponent as Right } from '../../../icons/right.svg';
@@ -52,6 +53,7 @@ const iconMap = {
   map: <Map />,
   // cf-icon-svg--minus-round
   'minus-round': <MinusRound />,
+  plus: <Plus />,
   // cf-icon-svg--plus-round
   'plus-round': <PlusRound />,
   // cf-icon-svg--print

src/components/Filters/Company/Company.js

@@ -1,5 +1,4 @@
 import './FilterPanel.scss';
-import { Company } from '../Company/Company';
 import { CompanyReceivedFilter } from '../Date/CompanyReceivedFilter';
 import { useDispatch, useSelector } from 'react-redux';
 import { DateFilter } from '../Date/DateFilter';
@@ -55,6 +54,7 @@ export const FilterPanel = () => {
               'in the complaint'
             }
             fieldName="product"
+            filterTitle="Product / Sub-product"
           />
           <hr />
           <NestedFilter
@@ -63,13 +63,21 @@ export const FilterPanel = () => {
               'in the complaint'
             }
             fieldName="issue"
+            filterTitle="Issue / Sub-issue"
           />
           <hr />
           <FederalState />
           <hr />
           <ZipCode />
           <hr />
-          <Company />
+          <NestedFilter
+            desc={
+              'The type of issue and sub-issue the consumer identified ' +
+              'in the complaint'
+            }
+            fieldName="company"
+            filterTitle="Company"
+          />
           <hr />
           <SimpleFilter
             title="Did company provide a timely response?"

src/components/Filters/Company/Company.spec.js

@@ -1,20 +1,18 @@
 import PropTypes from 'prop-types';
 import { createElement, useState } from 'react';
+import getIcon from '../../Common/Icon/iconMap';
 
-//TODO: will make much less complex in implementation
 export const MoreOrLess = ({
   listComponent,
   listComponentProps = {},
   options,
   perBucketProps = (bucket, props) => props,
-  hasMore = false,
 }) => {
-  const [currentlyHasMore, setCurrentlyHasMore] = useState(hasMore);
-
-  const all = options;
-  const some = all.length > 5 ? all.slice(0, 5) : all;
-  const remain = all.length - 5;
-
+  const [limit, setLimit] = useState(5);
+  const step = 50;
+  const some = options.slice(0, limit);
+  // either 50, or remaining count
+  const nextStep = step < options.length ? step : options.length - limit;
   const buildListComponent = (bucket) => {
     const itemProps = perBucketProps(bucket, {
       ...listComponentProps,
@@ -28,25 +26,20 @@ export const MoreOrLess = ({
   };
 
   const toggleShowMore = () => {
-    setCurrentlyHasMore(!currentlyHasMore);
+    setLimit(limit + nextStep);
   };
 
   return (
     <>
-      <ul>
-        {currentlyHasMore
-          ? all.map((bucket) => buildListComponent(bucket))
-          : some.map((bucket) => buildListComponent(bucket))}
-      </ul>
-      {remain > 0 ? (
+      <ul>{some.map((bucket) => buildListComponent(bucket))}</ul>
+      {some.length < options.length && (
         <div>
           <button className="a-btn a-btn--link more" onClick={toggleShowMore}>
-            {currentlyHasMore
-              ? `- Show ${remain} less`
-              : `+ Show ${remain} more`}
+            {getIcon('plus')}
+            <span>{`Show ${nextStep} more`}</span>
           </button>
         </div>
-      ) : null}
+      )}
     </>
   );
 };
@@ -60,5 +53,4 @@ MoreOrLess.propTypes = {
   listComponentProps: PropTypes.object,
   options: PropTypes.array.isRequired,
   perBucketProps: PropTypes.func,
-  hasMore: PropTypes.bool,
 };

src/components/Filters/Company/fixture.js

@@ -24,35 +24,28 @@ describe('component:MoreOrLess', () => {
 
   beforeEach(() => {
     props = {
-      hasMore: true,
       listComponent: AggregationItem,
-      listComponentProps: { fieldName: 'myfield' },
+      listComponentProps: { fieldName: 'product' },
       options: fixture,
     };
   });
 
   it('displays and toggles properly when more results are available', async () => {
     renderComponent(props);
-
-    const lessButton = screen.getByRole('button', { name: /Show 3 less/ });
-    expect(lessButton).toBeInTheDocument();
-
-    await user.click(lessButton);
     expect(
       screen.getByRole('button', { name: /Show 3 more/ }),
     ).toBeInTheDocument();
   });
 
   it('displays and toggles properly when no more results are available', async () => {
-    props.hasMore = false;
     renderComponent(props);
-
-    const moreButton = screen.getByRole('button', { name: /Show 3 more/ });
-    expect(moreButton).toBeInTheDocument();
-
-    await user.click(moreButton);
     expect(
-      screen.getByRole('button', { name: /Show 3 less/ }),
+      screen.getByRole('button', { name: /Show 3 more/ }),
     ).toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: /Show 3 more/ }));
+    expect(
+      screen.queryByRole('button', { name: /Show 3 more/ }),
+    ).not.toBeInTheDocument();
   });
 });

src/components/Filters/FilterPanel/FilterPanel.js

@@ -2,7 +2,7 @@ import { MODE_TRENDS } from '../../../constants';
 import { AggregationBranch } from '../Aggregation/AggregationBranch/AggregationBranch';
 import { CollapsibleFilter } from '../CollapsibleFilter/CollapsibleFilter';
 import { useSelector } from 'react-redux';
-import { capitalize, sortSelThenCount } from '../../../utils';
+import { sortSelThenCount } from '../../../utils';
 import { MoreOrLess } from '../MoreOrLess/MoreOrLess';
 import {
   selectTrendsFocus,
@@ -51,16 +51,18 @@ export const generateOptions = (
       }
     });
   }
+
   return options;
 };
 
 /**
  * @param {object} params - Params needed to initialize the filter
  * @param {string} params.desc - Description of the filter, used in mouseover tooltips
  * @param {string} params.fieldName - Name of the filter field, used to pick out aggregations
+ * @param {string} params.filterTitle - Name of the filter group, Zip Code, Product / Sub-product
  * @returns {JSX.Element} Element containing a collapsible filter with a list of options
  */
-export const NestedFilter = ({ desc, fieldName }) => {
+export const NestedFilter = ({ desc, fieldName, filterTitle }) => {
   const { data, error } = useGetAggregations();
   // See if there are any active product filters
   const filtersState = useSelector(selectFiltersRoot);
@@ -92,7 +94,7 @@ export const NestedFilter = ({ desc, fieldName }) => {
 
   return (
     <CollapsibleFilter
-      title={capitalize(fieldName) + ' / sub-' + fieldName}
+      title={filterTitle}
       desc={desc}
       className={'aggregation ' + fieldName}
     >
@@ -112,4 +114,5 @@ export const NestedFilter = ({ desc, fieldName }) => {
 NestedFilter.propTypes = {
   desc: PropTypes.string.isRequired,
   fieldName: PropTypes.string.isRequired,
+  filterTitle: PropTypes.string.isRequired,
 };

src/components/Filters/MoreOrLess/MoreOrLess.js

@@ -23,9 +23,16 @@ const renderComponent = (newFiltersState, newTrendsState, newViewState) => {
     view: newViewState,
   };
 
-  render(<NestedFilter desc="Product filter" fieldName="product" />, {
-    preloadedState: data,
-  });
+  render(
+    <NestedFilter
+      desc="Product filter"
+      fieldName="product"
+      filterTitle="Product / Sub-product"
+    />,
+    {
+      preloadedState: data,
+    },
+  );
 };
 
 fetchMock.enableMocks();
@@ -59,7 +66,7 @@ describe('component:NestedFilter', () => {
     expect(screen.getAllByRole('checkbox').length).toBe(5);
     // show only 5 items
     expect(
-      screen.getByRole('button', { name: '+ Show 1 more' }),
+      screen.getByRole('button', { name: /Show 1 more/ }),
     ).toBeInTheDocument();
   });
 

src/components/Filters/MoreOrLess/MoreOrLess.spec.js

@@ -1,7 +1,7 @@
 import { SearchPanel } from './SearchPanel';
 import { screen, testRender as render } from '../../testUtils/test-utils';
 import fetchMock from 'jest-fetch-mock';
-import { aggResponse } from '../Filters/Company/fixture';
+import { aggResponse } from '../../api/fixture';
 
 const renderComponent = () => {
   const data = {