feat(connector): price ranges connector

Author: Alexandre Stanislawski

src/components/PriceRanges/PriceRanges.js

@@ -5,7 +5,10 @@ import PriceRangesForm from './PriceRangesForm.js';
 import cx from 'classnames';
 import isEqual from 'lodash/isEqual';
 
-class PriceRanges extends React.Component {
+import autoHideContainerHOC from '../../decorators/autoHideContainer.js';
+import headerFooterHOC from '../../decorators/headerFooter.js';
+
+export class RawPriceRanges extends React.Component {
   componentWillMount() {
     this.refine = this.refine.bind(this);
   }
@@ -81,7 +84,7 @@ class PriceRanges extends React.Component {
   }
 }
 
-PriceRanges.propTypes = {
+RawPriceRanges.propTypes = {
   cssClasses: React.PropTypes.shape({
     active: React.PropTypes.string,
     button: React.PropTypes.string,
@@ -103,8 +106,8 @@ PriceRanges.propTypes = {
   templateProps: React.PropTypes.object.isRequired,
 };
 
-PriceRanges.defaultProps = {
+RawPriceRanges.defaultProps = {
   cssClasses: {},
 };
 
-export default PriceRanges;
+export default autoHideContainerHOC(headerFooterHOC(RawPriceRanges));

src/components/PriceRanges/__tests__/PriceRanges-test.js

@@ -7,7 +7,7 @@ import sinon from 'sinon';
 import expectJSX from 'expect-jsx';
 expect.extend(expectJSX);
 import Template from '../../Template';
-import PriceRanges from '../PriceRanges';
+import {RawPriceRanges as PriceRanges} from '../PriceRanges';
 import PriceRangesForm from '../PriceRangesForm';
 
 describe('PriceRanges', () => {

…ranges/__tests__/generate-ranges-test.js …ranges/__tests__/generate-ranges-test.jssrc/widgets/price-ranges/__tests__/generate-ranges-test.js renamed to src/connectors/price-ranges/__tests__/generate-ranges-test.js src/widgets/price-ranges/__tests__/generate-ranges-test.js renamed to src/connectors/price-ranges/__tests__/generate-ranges-test.js

@@ -0,0 +1,206 @@
+import {
+  bemHelper,
+  prepareTemplateProps,
+  getContainerNode,
+} from '../../lib/utils.js';
+import generateRanges from './generate-ranges.js';
+import defaultTemplates from './defaultTemplates.js';
+import cx from 'classnames';
+
+const bem = bemHelper('ais-price-ranges');
+
+/**
+ * Instantiate a price ranges on a numerical facet
+ * @function priceRanges
+ * @param  {string|DOMElement} options.container Valid CSS Selector as a string or DOMElement
+ * @param  {string} options.attributeName Name of the attribute for faceting
+ * @param  {Object} [options.templates] Templates to use for the widget
+ * @param  {string|Function} [options.templates.item] Item template. Template data: `from`, `to` and `currency`
+ * @param  {string} [options.currency='$'] The currency to display
+ * @param  {Object} [options.labels] Labels to use for the widget
+ * @param  {string|Function} [options.labels.separator] Separator label, between min and max
+ * @param  {string|Function} [options.labels.button] Button label
+ * @param  {boolean} [options.autoHideContainer=true] Hide the container when no refinements available
+ * @param  {Object} [options.cssClasses] CSS classes to add
+ * @param  {string|string[]} [options.cssClasses.root] CSS class to add to the root element
+ * @param  {string|string[]} [options.cssClasses.header] CSS class to add to the header element
+ * @param  {string|string[]} [options.cssClasses.body] CSS class to add to the body element
+ * @param  {string|string[]} [options.cssClasses.list] CSS class to add to the wrapping list element
+ * @param  {string|string[]} [options.cssClasses.item] CSS class to add to each item element
+ * @param  {string|string[]} [options.cssClasses.active] CSS class to add to the active item element
+ * @param  {string|string[]} [options.cssClasses.link] CSS class to add to each link element
+ * @param  {string|string[]} [options.cssClasses.form] CSS class to add to the form element
+ * @param  {string|string[]} [options.cssClasses.label] CSS class to add to each wrapping label of the form
+ * @param  {string|string[]} [options.cssClasses.input] CSS class to add to each input of the form
+ * @param  {string|string[]} [options.cssClasses.currency] CSS class to add to each currency element of the form
+ * @param  {string|string[]} [options.cssClasses.separator] CSS class to add to the separator of the form
+ * @param  {string|string[]} [options.cssClasses.button] CSS class to add to the submit button of the form
+ * @param  {string|string[]} [options.cssClasses.footer] CSS class to add to the footer element
+ * @param  {object|boolean} [options.collapsible=false] Hide the widget body and footer when clicking on header
+ * @param  {boolean} [options.collapsible.collapsed] Initial collapsed state of a collapsible widget
+ * @return {Object}
+ */
+const usage = `Usage:
+priceRanges({
+  container,
+  attributeName,
+  [ currency=$ ],
+  [ cssClasses.{root,header,body,list,item,active,link,form,label,input,currency,separator,button,footer} ],
+  [ templates.{header,item,footer} ],
+  [ labels.{currency,separator,button} ],
+  [ autoHideContainer=true ],
+  [ collapsible=false ]
+})`;
+const connectPriceRanges = priceRangesRendering => ({
+    container,
+    attributeName,
+    cssClasses: userCssClasses = {},
+    templates = defaultTemplates,
+    collapsible = false,
+    labels: userLabels = {},
+    currency: userCurrency = '$',
+    autoHideContainer = true,
+  } = {}) => {
+  let currency = userCurrency;
+
+  if (!container || !attributeName) {
+    throw new Error(usage);
+  }
+
+  const containerNode = getContainerNode(container);
+
+  const labels = {
+    button: 'Go',
+    separator: 'to',
+    ...userLabels,
+  };
+
+  const cssClasses = {
+    root: cx(bem(null), userCssClasses.root),
+    header: cx(bem('header'), userCssClasses.header),
+    body: cx(bem('body'), userCssClasses.body),
+    list: cx(bem('list'), userCssClasses.list),
+    link: cx(bem('link'), userCssClasses.link),
+    item: cx(bem('item'), userCssClasses.item),
+    active: cx(bem('item', 'active'), userCssClasses.active),
+    form: cx(bem('form'), userCssClasses.form),
+    label: cx(bem('label'), userCssClasses.label),
+    input: cx(bem('input'), userCssClasses.input),
+    currency: cx(bem('currency'), userCssClasses.currency),
+    button: cx(bem('button'), userCssClasses.button),
+    separator: cx(bem('separator'), userCssClasses.separator),
+    footer: cx(bem('footer'), userCssClasses.footer),
+  };
+
+  // before we had opts.currency, you had to pass labels.currency
+  if (userLabels.currency !== undefined && userLabels.currency !== currency) currency = userLabels.currency;
+
+  return {
+    getConfiguration: () => ({
+      facets: [attributeName],
+    }),
+
+    _generateRanges(results) {
+      const stats = results.getFacetStats(attributeName);
+      return generateRanges(stats);
+    },
+
+    _extractRefinedRange(helper) {
+      const refinements = helper.getRefinements(attributeName);
+      let from;
+      let to;
+
+      if (refinements.length === 0) {
+        return [];
+      }
+
+      refinements.forEach(v => {
+        if (v.operator.indexOf('>') !== -1) {
+          from = Math.floor(v.value[0]);
+        } else if (v.operator.indexOf('<') !== -1) {
+          to = Math.ceil(v.value[0]);
+        }
+      });
+      return [{from, to, isRefined: true}];
+    },
+
+    _refine(helper, from, to) {
+      const facetValues = this._extractRefinedRange(helper);
+
+      helper.clearRefinements(attributeName);
+      if (facetValues.length === 0 || facetValues[0].from !== from || facetValues[0].to !== to) {
+        if (typeof from !== 'undefined') {
+          helper.addNumericRefinement(attributeName, '>=', Math.floor(from));
+        }
+        if (typeof to !== 'undefined') {
+          helper.addNumericRefinement(attributeName, '<=', Math.ceil(to));
+        }
+      }
+
+      helper.search();
+    },
+
+    init({helper, templatesConfig}) {
+      this._refine = this._refine.bind(this, helper);
+      this._templateProps = prepareTemplateProps({
+        defaultTemplates,
+        templatesConfig,
+        templates,
+      });
+
+      priceRangesRendering({
+        collapsible,
+        cssClasses,
+        currency,
+        facetValues: [],
+        labels,
+        refine: this._refine,
+        shouldAutoHideContainer: autoHideContainer,
+        templateProps: this._templateProps,
+        containerNode,
+      }, true);
+    },
+
+    render({results, helper, state, createURL}) {
+      let facetValues;
+
+      if (results.hits.length > 0) {
+        facetValues = this._extractRefinedRange(helper);
+
+        if (facetValues.length === 0) {
+          facetValues = this._generateRanges(results);
+        }
+      } else {
+        facetValues = [];
+      }
+
+      facetValues.map(facetValue => {
+        let newState = state.clearRefinements(attributeName);
+        if (!facetValue.isRefined) {
+          if (facetValue.from !== undefined) {
+            newState = newState.addNumericRefinement(attributeName, '>=', Math.floor(facetValue.from));
+          }
+          if (facetValue.to !== undefined) {
+            newState = newState.addNumericRefinement(attributeName, '<=', Math.ceil(facetValue.to));
+          }
+        }
+        facetValue.url = createURL(newState);
+        return facetValue;
+      });
+
+      priceRangesRendering({
+        collapsible,
+        cssClasses,
+        currency,
+        facetValues,
+        labels,
+        refine: this._refine,
+        shouldAutoHideContainer: autoHideContainer && facetValues.length === 0,
+        templateProps: this._templateProps,
+        containerNode,
+      }, false);
+    },
+  };
+};
+
+export default connectPriceRanges;

src/connectors/price-ranges/connectPriceRanges.js

@@ -6,9 +6,9 @@ import sinon from 'sinon';
 import expectJSX from 'expect-jsx';
 expect.extend(expectJSX);
 import priceRanges from '../price-ranges.js';
-import generateRanges from '../generate-ranges.js';
+import generateRanges from '../../../connectors/price-ranges/generate-ranges.js';
 import PriceRanges from '../../../components/PriceRanges/PriceRanges.js';
-import defaultTemplates from '../defaultTemplates.js';
+import defaultTemplates from '../../../connectors/price-ranges/defaultTemplates.js';
 
 describe('priceRanges call', () => {
   it('throws an exception when no container', () => {
@@ -29,18 +29,12 @@ describe('priceRanges()', () => {
   let results;
   let helper;
   let state;
-  let autoHideContainer;
-  let headerFooter;
   let createURL;
 
   beforeEach(() => {
     ReactDOM = {render: sinon.spy()};
-    autoHideContainer = sinon.stub().returns(PriceRanges);
-    headerFooter = sinon.stub().returns(PriceRanges);
 
     priceRanges.__Rewire__('ReactDOM', ReactDOM);
-    priceRanges.__Rewire__('autoHideContainerHOC', autoHideContainer);
-    priceRanges.__Rewire__('headerFooterHOC', headerFooter);
 
     container = document.createElement('div');
     widget = priceRanges({container, attributeName: 'aNumAttr', cssClasses: {root: ['root', 'cx']}});
@@ -128,12 +122,6 @@ describe('priceRanges()', () => {
       expect(ReactDOM.render.secondCall.args[1]).toEqual(container);
     });
 
-    it('calls the decorators', () => {
-      widget.render({results, helper, state, createURL});
-      expect(headerFooter.calledOnce).toBe(true);
-      expect(autoHideContainer.calledOnce).toBe(true);
-    });
-
     it('calls getRefinements to check if there are some refinements', () => {
       widget.render({results, helper, state, createURL});
       expect(helper.getRefinements.calledOnce).toBe(true, 'getRefinements called once');