Product converted

src/components/Filters/Product.js

@@ -2,60 +2,27 @@ import { coalesce, sortSelThenCount } from '../../utils';
 import { MODE_TRENDS, SLUG_SEPARATOR } from '../../constants';
 import AggregationBranch from './AggregationBranch';
 import CollapsibleFilter from './CollapsibleFilter';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 import MoreOrLess from './MoreOrLess';
 import PropTypes from 'prop-types';
 import React from 'react';
+import {
+  selectQueryFocus,
+  selectQueryLens,
+  selectQueryState,
+  selectQueryTab,
+} from '../../reducers/query/selectors';
+import { selectAggsProduct } from '../../reducers/aggs/selectors';
 
-export class Product extends React.Component {
-  constructor(props) {
-    super(props);
+export const Product = ({ hasChildren }) => {
+  const query = useSelector(selectQueryState);
+  const focus = useSelector(selectQueryFocus);
+  const lens = useSelector(selectQueryLens);
+  const tab = useSelector(selectQueryTab);
+  const product = useSelector(selectAggsProduct);
 
-    this._onBucket = this._onBucket.bind(this);
-  }
-
-  render() {
-    const desc =
-      'The type of product and sub-product the consumer ' +
-      'identified in the complaint';
-
-    const listComponentProps = {
-      fieldName: 'product',
-    };
-
-    return (
-      <CollapsibleFilter
-        title="Product / sub-product"
-        desc={desc}
-        hasChildren={this.props.hasChildren}
-        className="aggregation product"
-      >
-        <MoreOrLess
-          listComponent={AggregationBranch}
-          listComponentProps={listComponentProps}
-          options={this.props.options}
-          perBucketProps={this._onBucket}
-        />
-      </CollapsibleFilter>
-    );
-  }
-
-  // --------------------------------------------------------------------------
-  // MoreOrLess Helpers
-
-  _onBucket(bucket, props) {
-    props.subitems = bucket['sub_product.raw'].buckets;
-    return props;
-  }
-}
-
-export const mapStateToProps = (state) => {
-  // See if there are an active product filters
-  const { focus, lens, tab } = state.query;
-  const allProducts = coalesce(state.query, 'product', []);
+  const allProducts = coalesce(query, 'product', []);
   const selections = [];
-
-  // Reduce the products to the parent keys (and dedup)
   allProducts.forEach((prod) => {
     const idx = prod.indexOf(SLUG_SEPARATOR);
     const key = idx === -1 ? prod : prod.substr(0, idx);
@@ -64,8 +31,7 @@ export const mapStateToProps = (state) => {
     }
   });
 
-  // Make a cloned, sorted version of the aggs
-  const options = sortSelThenCount(state.aggs.product, selections);
+  const options = sortSelThenCount(product, selections);
   if (focus) {
     const isProductFocus = tab === MODE_TRENDS && lens === 'Product';
     options.forEach((opt) => {
@@ -76,15 +42,38 @@ export const mapStateToProps = (state) => {
     });
   }
 
-  return {
-    options,
+  const desc =
+    'The type of product and sub-product the consumer ' +
+    'identified in the complaint';
+
+  const listComponentProps = {
+    fieldName: 'product',
   };
-};
 
-// eslint-disable-next-line react-redux/prefer-separate-component-file
-export default connect(mapStateToProps)(Product);
+  // --------------------------------------------------------------------------
+  // MoreOrLess Helpers
+
+  const _onBucket = (bucket) => {
+    return bucket['sub_product.raw'].buckets;
+  };
+
+  return (
+    <CollapsibleFilter
+      title="Product / sub-product"
+      desc={desc}
+      hasChildren={hasChildren}
+      className="aggregation product"
+    >
+      <MoreOrLess
+        listComponent={AggregationBranch}
+        listComponentProps={listComponentProps}
+        options={options}
+        perBucketProps={_onBucket}
+      />
+    </CollapsibleFilter>
+  );
+};
 
 Product.propTypes = {
   hasChildren: PropTypes.bool,
-  options: PropTypes.array.isRequired,
 };

src/reducers/aggs/selectors.js

@@ -4,4 +4,5 @@ export const selectAggsHasDataIssue = (state) => state.aggs.hasDataIssue;
 export const selectAggsHasError = (state) => state.aggs.error;
 export const selectAggsIsDataStale = (state) => state.aggs.isDataStale;
 export const selectAggsLastIndexed = (state) => state.aggs.lastIndexed;
+export const selectAggsProduct = (state) => state.aggs.product;
 export const selectAggsTotal = (state) => state.aggs.total;