feat(connector): connectHitsPerPageSelector (iteration 2)

algolia · Mar 21, 2017 · 26bb273 · 26bb273
1 parent 589454c
commit 26bb273
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 53 deletions.
diff --git a/src/connectors/hits-per-page-selector/__tests__/connectHitsPerPageSelector-test.js b/src/connectors/hits-per-page-selector/__tests__/connectHitsPerPageSelector-test.js
@@ -43,10 +43,6 @@ describe('connectHitsPerPageSelector', () => {
     // test if isFirstRendering is true during init
     expect(rendering.lastCall.args[1]).toBe(true);
 
-    const firstRenderingOptions = rendering.lastCall.args[0];
-    expect(firstRenderingOptions.containerNode).toBe(container);
-    expect(firstRenderingOptions.shouldAutoHideContainer).toBe(false);
-
     widget.render({
       results: new SearchResults(helper.state, [{}]),
       state: helper.state,
@@ -57,10 +53,6 @@ describe('connectHitsPerPageSelector', () => {
     // test that rendering has been called during init with isFirstRendering = false
     expect(rendering.callCount).toBe(2);
     expect(rendering.lastCall.args[1]).toBe(false);
-
-    const secondRenderingOptions = rendering.lastCall.args[0];
-    expect(secondRenderingOptions.containerNode).toBe(container);
-    expect(secondRenderingOptions.shouldAutoHideContainer).toBe(false);
   });
 
   it('Provide a function to change the current hits per page, and provide the current value', () => {

diff --git a/src/connectors/hits-per-page-selector/connectHitsPerPageSelector.js b/src/connectors/hits-per-page-selector/connectHitsPerPageSelector.js
@@ -1,11 +1,4 @@
-import {
-  bemHelper,
-  getContainerNode,
-} from '../../lib/utils.js';
 import some from 'lodash/some';
-import cx from 'classnames';
-
-const bem = bemHelper('ais-hits-per-page-selector');
 
 /**
  * Instantiate a dropdown element to choose the number of hits to display per page
@@ -25,29 +18,17 @@ const usage = `Usage:
 hitsPerPageSelector({
   container,
   options,
-  [ cssClasses.{root,item}={} ],
-  [ autoHideContainer=false ]
 })`;
 
 const connectHitsPerPageSelector = renderHitsPerPageSelector => ({
-    container,
     options: userOptions,
-    cssClasses: userCssClasses = {},
-    autoHideContainer = false,
   } = {}) => {
   let options = userOptions;
 
-  if (!container || !options) {
+  if (!options) {
     throw new Error(usage);
   }
 
-  const containerNode = getContainerNode(container);
-
-  const cssClasses = {
-    root: cx(bem(null), userCssClasses.root),
-    item: cx(bem('item'), userCssClasses.item),
-  };
-
   return {
     init({helper, state}) {
       const isCurrentInOptions = some(
@@ -81,12 +62,10 @@ with \`value: hitsPerPage\` (hitsPerPage: ${state.hitsPerPage})`
         .search();
 
       renderHitsPerPageSelector({
-        cssClasses,
         currentValue,
         options,
         setValue: this.setHitsPerPage,
-        shouldAutoHideContainer: autoHideContainer,
-        containerNode,
+        hasNoResults: true,
       }, true);
     },
 
@@ -95,12 +74,10 @@ with \`value: hitsPerPage\` (hitsPerPage: ${state.hitsPerPage})`
       const hasNoResults = results.nbHits === 0;
 
       renderHitsPerPageSelector({
-        cssClasses,
         currentValue,
         options,
         setValue: this.setHitsPerPage,
-        shouldAutoHideContainer: autoHideContainer && hasNoResults,
-        containerNode,
+        hasNoResults,
       }, false);
     },
   };

diff --git a/src/widgets/hits-per-page-selector/hits-per-page-selector.js b/src/widgets/hits-per-page-selector/hits-per-page-selector.js
@@ -1,10 +1,42 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
+import {
+  bemHelper,
+  getContainerNode,
+} from '../../lib/utils.js';
+import cx from 'classnames';
+
+const bem = bemHelper('ais-hits-per-page-selector');
+
 import Selector from '../../components/Selector.js';
 
 import connectHitsPerPageSelector from '../../connectors/hits-per-page-selector/connectHitsPerPageSelector.js';
 
+const renderer = ({
+  containerNode,
+  cssClasses,
+  autoHideContainer,
+}) => ({
+  currentValue,
+  options,
+  setValue,
+  hasNoResults,
+}, isFirstRendering) => {
+  if (isFirstRendering) return;
+
+  ReactDOM.render(
+    <Selector
+      cssClasses={cssClasses}
+      currentValue={currentValue}
+      options={options}
+      setValue={setValue}
+      shouldAutoHideContainer={autoHideContainer && hasNoResults}
+    />,
+    containerNode
+  );
+};
+
 /**
  * Instantiate a dropdown element to choose the number of hits to display per page
  * @function hitsPerPageSelector
@@ -19,25 +51,43 @@ import connectHitsPerPageSelector from '../../connectors/hits-per-page-selector/
  * @return {Object}
  */
 
-export default connectHitsPerPageSelector(defaultRendering);
+const usage = `Usage:
+hitsPerPageSelector({
+  container,
+  options,
+  [ cssClasses.{root,item}={} ],
+  [ autoHideContainer=false ]
+})`;
 
-function defaultRendering({
-  cssClasses,
-  currentValue,
+export default function hitsPerPageSelector({
+  container,
   options,
-  setValue,
-  shouldAutoHideContainer,
-  containerNode,
-}, isFirstRendering) {
-  if (isFirstRendering) return;
-  ReactDOM.render(
-    <Selector
-      cssClasses={cssClasses}
-      currentValue={currentValue}
-      options={options}
-      setValue={setValue}
-      shouldAutoHideContainer={shouldAutoHideContainer}
-    />,
-    containerNode
-  );
+  cssClasses: userCssClasses = {},
+  autoHideContainer = false,
+} = {}) {
+  if (!container) {
+    throw new Error(usage);
+  }
+
+  const containerNode = getContainerNode(container);
+
+  const cssClasses = {
+    root: cx(bem(null), userCssClasses.root),
+    item: cx(bem('item'), userCssClasses.item),
+  };
+
+  const specializedRenderer = renderer({
+    containerNode,
+    cssClasses,
+    autoHideContainer,
+  });
+
+  try {
+    const makeHitsPerPageSelector = connectHitsPerPageSelector(specializedRenderer);
+    return makeHitsPerPageSelector({
+      options,
+    });
+  } catch (e) {
+    throw new Error(usage);
+  }
 }