feat(connector): star rating connector

Author: Alexandre Stanislawski

src/connectors/star-rating/connectStarRating.js

@@ -0,0 +1,185 @@
+import {
+  bemHelper,
+  prepareTemplateProps,
+  getContainerNode,
+} from '../../lib/utils.js';
+import cx from 'classnames';
+import defaultTemplates from './defaultTemplates.js';
+import defaultLabels from './defaultLabels.js';
+
+const bem = bemHelper('ais-star-rating');
+
+/**
+ * Instantiate a list of refinements based on a rating attribute
+ * The ratings must be integer values. You can still keep the precise float value in another attribute
+ * to be used in the custom ranking configuration. So that the actual hits ranking is precise.
+ * @function starRating
+ * @param  {string|DOMElement} options.container CSS Selector or DOMElement to insert the widget
+ * @param  {string} options.attributeName Name of the attribute for filtering
+ * @param  {number} [options.max] The maximum rating value
+ * @param  {Object} [options.labels] Labels used by the default template
+ * @param  {string} [options.labels.andUp] The label suffixed after each line
+ * @param  {Object} [options.templates] Templates to use for the widget
+ * @param  {string|Function} [options.templates.header] Header template
+ * @param  {string|Function} [options.templates.item] Item template, provided with `name`, `count`, `isRefined`, `url` data properties
+ * @param  {string|Function} [options.templates.footer] Footer template
+ * @param  {Function} [options.transformData.item] Function to change the object passed to the `item` template
+ * @param  {boolean} [options.autoHideContainer=true] Hide the container when no results match
+ * @param  {Object} [options.cssClasses] CSS classes to add to the wrapping elements
+ * @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.footer] CSS class to add to the footer element
+ * @param  {string|string[]} [options.cssClasses.list] CSS class to add to the list element
+ * @param  {string|string[]} [options.cssClasses.item] CSS class to add to each item element
+ * @param  {string|string[]} [options.cssClasses.link] CSS class to add to each link element
+ * @param  {string|string[]} [options.cssClasses.disabledLink] CSS class to add to each disabled link (when using the default template)
+ * @param  {string|string[]} [options.cssClasses.star] CSS class to add to each star element (when using the default template)
+ * @param  {string|string[]} [options.cssClasses.emptyStar] CSS class to add to each empty star element (when using the default template)
+ * @param  {string|string[]} [options.cssClasses.active] CSS class to add to each active 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:
+starRating({
+  container,
+  attributeName,
+  [ max=5 ],
+  [ cssClasses.{root,header,body,footer,list,item,active,link,disabledLink,star,emptyStar,count} ],
+  [ templates.{header,item,footer} ],
+  [ transformData.{item} ],
+  [ labels.{andUp} ],
+  [ autoHideContainer=true ],
+  [ collapsible=false ]
+})`;
+const connectStarRating = starRatingRendering => ({
+    container,
+    attributeName,
+    max = 5,
+    cssClasses: userCssClasses = {},
+    labels = defaultLabels,
+    templates = defaultTemplates,
+    collapsible = false,
+    transformData,
+    autoHideContainer = true,
+  }) => {
+  const containerNode = getContainerNode(container);
+
+  if (!container || !attributeName) {
+    throw new Error(usage);
+  }
+
+  const cssClasses = {
+    root: cx(bem(null), userCssClasses.root),
+    header: cx(bem('header'), userCssClasses.header),
+    body: cx(bem('body'), userCssClasses.body),
+    footer: cx(bem('footer'), userCssClasses.footer),
+    list: cx(bem('list'), userCssClasses.list),
+    item: cx(bem('item'), userCssClasses.item),
+    link: cx(bem('link'), userCssClasses.link),
+    disabledLink: cx(bem('link', 'disabled'), userCssClasses.disabledLink),
+    count: cx(bem('count'), userCssClasses.count),
+    star: cx(bem('star'), userCssClasses.star),
+    emptyStar: cx(bem('star', 'empty'), userCssClasses.emptyStar),
+    active: cx(bem('item', 'active'), userCssClasses.active),
+  };
+
+  return {
+    getConfiguration: () => ({disjunctiveFacets: [attributeName]}),
+
+    init({templatesConfig, helper, createURL}) {
+      this._templateProps = prepareTemplateProps({
+        transformData,
+        defaultTemplates,
+        templatesConfig,
+        templates,
+      });
+      this._toggleRefinement = this._toggleRefinement.bind(this, helper);
+      this._createURL = state => facetValue => createURL(state.toggleRefinement(attributeName, facetValue));
+
+      starRatingRendering({
+        collapsible,
+        createURL: this._createURL(helper.state),
+        cssClasses,
+        facetValues: [],
+        shouldAutoHideContainer: autoHideContainer,
+        templateProps: this._templateProps,
+        toggleRefinement: this._toggleRefinement,
+        containerNode,
+      }, true);
+    },
+
+    render({helper, results, state}) {
+      const facetValues = [];
+      const allValues = {};
+      for (let v = max - 1; v >= 0; --v) {
+        allValues[v] = 0;
+      }
+      results.getFacetValues(attributeName).forEach(facet => {
+        const val = Math.round(facet.name);
+        if (!val || val > max - 1) {
+          return;
+        }
+        for (let v = val; v >= 1; --v) {
+          allValues[v] += facet.count;
+        }
+      });
+      const refinedStar = this._getRefinedStar(helper);
+      for (let star = max - 1; star >= 1; --star) {
+        const count = allValues[star];
+        if (refinedStar && star !== refinedStar && count === 0) {
+          // skip count==0 when at least 1 refinement is enabled
+          // eslint-disable-next-line no-continue
+          continue;
+        }
+        const stars = [];
+        for (let i = 1; i <= max; ++i) {
+          stars.push(i <= star);
+        }
+        facetValues.push({
+          stars,
+          name: String(star),
+          count,
+          isRefined: refinedStar === star,
+          labels,
+        });
+      }
+
+      starRatingRendering({
+        collapsible,
+        createURL: this._createURL(state),
+        cssClasses,
+        facetValues,
+        shouldAutoHideContainer: autoHideContainer && results.nbHits === 0,
+        templateProps: this._templateProps,
+        toggleRefinement: this._toggleRefinement,
+        containerNode,
+      }, false);
+    },
+
+    _toggleRefinement(helper, facetValue) {
+      const isRefined = this._getRefinedStar(helper) === Number(facetValue);
+      helper.clearRefinements(attributeName);
+      if (!isRefined) {
+        for (let val = Number(facetValue); val <= max; ++val) {
+          helper.addDisjunctiveFacetRefinement(attributeName, val);
+        }
+      }
+      helper.search();
+    },
+
+    _getRefinedStar(helper) {
+      let refinedStar = undefined;
+      const refinements = helper.getRefinements(attributeName);
+      refinements.forEach(r => {
+        if (!refinedStar || Number(r.value) < refinedStar) {
+          refinedStar = Number(r.value);
+        }
+      });
+      return refinedStar;
+    },
+  };
+};
+
+export default connectStarRating;

src/widgets/star-rating/defaultLabels.js …/connectors/star-rating/defaultLabels.jssrc/widgets/star-rating/defaultLabels.js renamed to src/connectors/star-rating/defaultLabels.js src/widgets/star-rating/defaultLabels.js renamed to src/connectors/star-rating/defaultLabels.js

@@ -7,8 +7,8 @@ import sinon from 'sinon';
 import expectJSX from 'expect-jsx';
 expect.extend(expectJSX);
 
-import defaultTemplates from '../defaultTemplates.js';
-import defaultLabels from '../defaultLabels.js';
+import defaultTemplates from '../../../connectors/star-rating/defaultTemplates.js';
+import defaultLabels from '../../../connectors/star-rating/defaultLabels.js';
 import starRating from '../star-rating.js';
 import RefinementList from '../../../components/RefinementList/RefinementList.js';
 
@@ -20,17 +20,11 @@ describe('starRating()', () => {
   let state;
   let createURL;
 
-  let autoHideContainer;
-  let headerFooter;
   let results;
 
   beforeEach(() => {
     ReactDOM = {render: sinon.spy()};
     starRating.__Rewire__('ReactDOM', ReactDOM);
-    autoHideContainer = sinon.stub().returns(RefinementList);
-    starRating.__Rewire__('autoHideContainerHOC', autoHideContainer);
-    headerFooter = sinon.stub().returns(RefinementList);
-    starRating.__Rewire__('headerFooterHOC', headerFooter);
 
     container = document.createElement('div');
     widget = starRating({container, attributeName: 'anAttrName', cssClasses: {body: ['body', 'cx']}});
@@ -97,9 +91,7 @@ describe('starRating()', () => {
       },
     };
 
-    expect(ReactDOM.render.calledTwice).toBe(true, 'ReactDOM.render called twice');
-    expect(autoHideContainer.calledOnce).toBe(true, 'autoHideContainer called once');
-    expect(headerFooter.calledOnce).toBe(true, 'headerFooter called once');
+    expect(ReactDOM.render.callCount).toBe(2);
     expect(ReactDOM.render.firstCall.args[0]).toEqualJSX(<RefinementList {...props} />);
     expect(ReactDOM.render.firstCall.args[1]).toEqual(container);
     expect(ReactDOM.render.secondCall.args[0]).toEqualJSX(<RefinementList {...props} />);
@@ -110,7 +102,7 @@ describe('starRating()', () => {
     helper.getRefinements = sinon.stub().returns([{value: '1'}]);
     results.getFacetValues = sinon.stub().returns([{name: '1', count: 42}]);
     widget.render({state, helper, results, createURL});
-    expect(ReactDOM.render.calledOnce).toBe(true, 'ReactDOM.render called once');
+    expect(ReactDOM.render.callCount).toBe(1);
     expect(ReactDOM.render.firstCall.args[0].props.facetValues).toEqual([
       {
         count: 42,