fix: pass maxFacetHits to SFFV (#863)

* refactor(createInstantSearchManager): rewrite the mock in order to have access to the instance * feat(createInstantSearchManager): enable the possibiliy to pass the maxFacetHits to SFFV * fix(connectMenu): handle limit for SFFV * fix(connectRefinementList): handle limit for SFFV * docs(CustomConnectors): add maxFacetHits to the signature * fix(createConnector): update wrong signature for legacy SFFV * refactor: use function for compute the limit
algolia · Jan 20, 2018 · de23a46 · de23a46
1 parent 84f862e
commit de23a46
Show file tree

Hide file tree

Showing 8 changed files with 216 additions and 58 deletions.
diff --git a/docgen/src/guide/Custom_connectors.md b/docgen/src/guide/Custom_connectors.md
@@ -203,7 +203,7 @@ const CoolWidget = createConnector({
 This method needs to be implemented if you want to have the ability to perform a search for facet values inside your widget.
 
 It takes in the current props of the higher-order component, the [search state](guide/Search_state.html) of all widgets, as well as all arguments passed to the `searchForFacetValues` props of stateful widgets, and returns an
-object of the shape: `{facetName: string, query: string}`
+object of the shape: `{facetName: string, query: string, maxFacetHits?: number}`. The default value for the `maxFacetHits` is the one set by [the API](https://www.algolia.com/doc/api-reference/api-parameters/maxFacetHits) which is `10`.
 
 ```jsx
 import {createConnector} from 'react-instantsearch';

diff --git a/packages/react-instantsearch/src/connectors/connectMenu.js b/packages/react-instantsearch/src/connectors/connectMenu.js
@@ -37,6 +37,10 @@ function getValue(name, props, searchState, context) {
   return name === currentRefinement ? '' : name;
 }
 
+function getLimit({ showMore, limitMin, limitMax }) {
+  return showMore ? limitMax : limitMin;
+}
+
 function refine(props, searchState, nextRefinement, context) {
   const id = getId(props);
   const nextValue = { [id]: nextRefinement ? nextRefinement : '' };
@@ -97,8 +101,7 @@ export default createConnector({
     meta,
     searchForFacetValuesResults
   ) {
-    const { attributeName, showMore, limitMin, limitMax } = props;
-    const limit = showMore ? limitMax : limitMin;
+    const { attributeName } = props;
     const results = getResults(searchResults, this.context);
 
     const canRefine =
@@ -166,7 +169,7 @@ export default createConnector({
       ? props.transformItems(sortedItems)
       : sortedItems;
     return {
-      items: transformedItems.slice(0, limit),
+      items: transformedItems.slice(0, getLimit(props)),
       currentRefinement: getCurrentRefinement(props, searchState, this.context),
       isFromSearch,
       withSearchBox,
@@ -179,21 +182,24 @@ export default createConnector({
   },
 
   searchForFacetValues(props, searchState, nextRefinement) {
-    return { facetName: props.attributeName, query: nextRefinement };
+    return {
+      facetName: props.attributeName,
+      query: nextRefinement,
+      maxFacetHits: getLimit(props),
+    };
   },
 
   cleanUp(props, searchState) {
     return cleanUp(props, searchState, this.context);
   },
 
   getSearchParameters(searchParameters, props, searchState) {
-    const { attributeName, showMore, limitMin, limitMax } = props;
-    const limit = showMore ? limitMax : limitMin;
+    const { attributeName } = props;
 
     searchParameters = searchParameters.setQueryParameters({
       maxValuesPerFacet: Math.max(
         searchParameters.maxValuesPerFacet || 0,
-        limit
+        getLimit(props)
       ),
     });
 

diff --git a/packages/react-instantsearch/src/connectors/connectMenu.test.js b/packages/react-instantsearch/src/connectors/connectMenu.test.js
@@ -369,15 +369,31 @@ describe('connectMenu', () => {
       });
     });
 
-    it('calling searchForItems return the right searchForItems parameters', () => {
+    it('calling searchForItems return the right searchForItems parameters with limitMin', () => {
       const parameters = searchForFacetValues(
-        { attributeName: 'ok' },
+        { attributeName: 'ok', limitMin: 15, limitMax: 25, showMore: false },
         {},
         'yep'
       );
+
+      expect(parameters).toEqual({
+        facetName: 'ok',
+        query: 'yep',
+        maxFacetHits: 15,
+      });
+    });
+
+    it('calling searchForItems return the right searchForItems parameters with limitMax', () => {
+      const parameters = searchForFacetValues(
+        { attributeName: 'ok', limitMin: 15, limitMax: 25, showMore: true },
+        {},
+        'yep'
+      );
+
       expect(parameters).toEqual({
         facetName: 'ok',
         query: 'yep',
+        maxFacetHits: 25,
       });
     });
 

diff --git a/packages/react-instantsearch/src/connectors/connectRefinementList.js b/packages/react-instantsearch/src/connectors/connectRefinementList.js
@@ -46,6 +46,10 @@ function getValue(name, props, searchState, context) {
   return nextRefinement;
 }
 
+function getLimit({ showMore, limitMin, limitMax }) {
+  return showMore ? limitMax : limitMin;
+}
+
 function refine(props, searchState, nextRefinement, context) {
   const id = getId(props);
   // Setting the value to an empty string ensures that it is persisted in
@@ -119,8 +123,7 @@ export default createConnector({
     metadata,
     searchForFacetValuesResults
   ) {
-    const { attributeName, showMore, limitMin, limitMax } = props;
-    const limit = showMore ? limitMax : limitMin;
+    const { attributeName } = props;
     const results = getResults(searchResults, this.context);
 
     const canRefine =
@@ -181,7 +184,7 @@ export default createConnector({
       : items;
 
     return {
-      items: transformedItems.slice(0, limit),
+      items: transformedItems.slice(0, getLimit(props)),
       currentRefinement: getCurrentRefinement(props, searchState, this.context),
       isFromSearch,
       withSearchBox,
@@ -194,24 +197,27 @@ export default createConnector({
   },
 
   searchForFacetValues(props, searchState, nextRefinement) {
-    return { facetName: props.attributeName, query: nextRefinement };
+    return {
+      facetName: props.attributeName,
+      query: nextRefinement,
+      maxFacetHits: getLimit(props),
+    };
   },
 
   cleanUp(props, searchState) {
     return cleanUp(props, searchState, this.context);
   },
 
   getSearchParameters(searchParameters, props, searchState) {
-    const { attributeName, operator, showMore, limitMin, limitMax } = props;
-    const limit = showMore ? limitMax : limitMin;
+    const { attributeName, operator } = props;
 
     const addKey = operator === 'and' ? 'addFacet' : 'addDisjunctiveFacet';
     const addRefinementKey = `${addKey}Refinement`;
 
     searchParameters = searchParameters.setQueryParameters({
       maxValuesPerFacet: Math.max(
         searchParameters.maxValuesPerFacet || 0,
-        limit
+        getLimit(props)
       ),
     });
 

diff --git a/packages/react-instantsearch/src/connectors/connectRefinementList.test.js b/packages/react-instantsearch/src/connectors/connectRefinementList.test.js
@@ -416,18 +416,35 @@ describe('connectRefinementList', () => {
       });
     });
 
-    it('calling searchForItems return the right searchForItems parameters', () => {
+    it('calling searchForItems return the right searchForItems parameters with limitMin', () => {
       const parameters = searchForFacetValues(
-        { attributeName: 'ok' },
+        { attributeName: 'ok', limitMin: 15, limitMax: 25, showMore: false },
+        {},
+        'yep'
+      );
+
+      expect(parameters).toEqual({
+        facetName: 'ok',
+        query: 'yep',
+        maxFacetHits: 15,
+      });
+    });
+
+    it('calling searchForItems return the right searchForItems parameters with limitMax', () => {
+      const parameters = searchForFacetValues(
+        { attributeName: 'ok', limitMin: 15, limitMax: 25, showMore: true },
         {},
         'yep'
       );
+
       expect(parameters).toEqual({
         facetName: 'ok',
         query: 'yep',
+        maxFacetHits: 25,
       });
     });
   });
+
   describe('multi index', () => {
     let context = {
       context: {

diff --git a/packages/react-instantsearch/src/core/createConnector.js b/packages/react-instantsearch/src/core/createConnector.js
@@ -290,15 +290,15 @@ export default function createConnector(connectorDesc) {
         const searchForFacetValuesProps = hasSearchForFacetValues
           ? {
               searchForItems: this.searchForFacetValues,
-              searchForFacetValues: (facetName, query) => {
+              searchForFacetValues: (...args) => {
                 if (process.env.NODE_ENV === 'development') {
                   // eslint-disable-next-line no-console
                   console.warn(
                     'react-instantsearch: `searchForFacetValues` has been renamed to' +
                       '`searchForItems`, this will break in the next major version.'
                   );
                 }
-                this.searchForFacetValues(facetName, query);
+                this.searchForFacetValues(...args);
               },
             }
           : {};

diff --git a/packages/react-instantsearch/src/core/createInstantSearchManager.js b/packages/react-instantsearch/src/core/createInstantSearchManager.js
@@ -1,9 +1,8 @@
+import { omit, isEmpty } from 'lodash';
 import algoliasearchHelper, { SearchParameters } from 'algoliasearch-helper';
-
 import createWidgetsManager from './createWidgetsManager';
 import createStore from './createStore';
 import highlightTags from './highlightTags.js';
-import { omit, isEmpty } from 'lodash';
 
 /**
  * Creates a new instance of the InstantSearchManager which controls the widgets and
@@ -274,22 +273,22 @@ export default function createInstantSearchManager({
     search();
   }
 
-  function onSearchForFacetValues(nextSearchState) {
+  function onSearchForFacetValues({ facetName, query, maxFacetHits }) {
     store.setState({
       ...store.getState(),
       searchingForFacetValues: true,
     });
 
     helper
-      .searchForFacetValues(nextSearchState.facetName, nextSearchState.query)
+      .searchForFacetValues(facetName, query, maxFacetHits)
       .then(
         content => {
           store.setState({
             ...store.getState(),
             resultsFacetValues: {
               ...store.getState().resultsFacetValues,
-              [nextSearchState.facetName]: content.facetHits,
-              query: nextSearchState.query,
+              [facetName]: content.facetHits,
+              query,
             },
             searchingForFacetValues: false,
           });