fix(id): remmove id props (#1564)

fix #1556 Make structure of infinite hits consistent with the structure used by the pagination.
algolia · Nov 18, 2016 · a563894 · a563894
1 parent 54533e5
commit a563894
Show file tree

Hide file tree

Showing 37 changed files with 189 additions and 222 deletions.
diff --git a/docgen/src/examples/e-commerce-infinite/App.js b/docgen/src/examples/e-commerce-infinite/App.js
@@ -60,7 +60,6 @@ const Facets = () =>
         title="Show results for"
         items={[
           <HierarchicalMenu
-            id="categories"
             key="categories"
             attributes={[
               'category',
@@ -94,7 +93,6 @@ const Facets = () =>
             key="Price"
             item={ <CustomPriceRanges
               attributeName="price"
-              id="price_ranges"
               items={[
                 {end: 10},
                 {start: 10, end: 20},
@@ -106,7 +104,7 @@ const Facets = () =>
               ]}
             />}
           />,
-          <RangeInput key="price_input" attributeName="price" id="price_input"/>,
+          <RangeInput key="price_input" attributeName="price" />,
         ]}
       />
       <div className="thank-you">Data courtesy of <a href="http://www.ikea.com/">ikea.com</a></div>

diff --git a/docgen/src/examples/e-commerce/App.js b/docgen/src/examples/e-commerce/App.js
@@ -62,7 +62,6 @@ const Facets = () =>
         title="Show results for"
         items={[
           <HierarchicalMenu
-            id="categories"
             key="categories"
             attributes={[
               'category',
@@ -96,7 +95,6 @@ const Facets = () =>
             key="Price"
             item={ <CustomPriceRanges
               attributeName="price"
-              id="price_ranges"
               items={[
                 {end: 10},
                 {start: 10, end: 20},
@@ -108,7 +106,7 @@ const Facets = () =>
               ]}
             />}
           />,
-          <RangeInput key="price_input" attributeName="price" id="price_input"/>,
+          <RangeInput key="price_input" attributeName="price"/>,
         ]}
       />
       <div className="thank-you">Data courtesy of <a href="http://www.ikea.com/">ikea.com</a></div>

diff --git a/docgen/src/examples/material-ui/App.js b/docgen/src/examples/material-ui/App.js
@@ -98,7 +98,7 @@ const Content = React.createClass({
           </div>
           <div className="Sidebar__facets">
             <ConnectedNestedList
-              id="categories"
+              id="Categories"
               attributes={[
                 'category',
                 'sub_category',

diff --git a/packages/react-instantsearch/src/connectors/connectHierarchicalMenu.js b/packages/react-instantsearch/src/connectors/connectHierarchicalMenu.js
@@ -3,8 +3,10 @@ import {PropTypes} from 'react';
 import createConnector from '../core/createConnector';
 import {SearchParameters} from 'algoliasearch-helper';
 
+export const getId = props => props.attributes[0];
+
 function getCurrentRefinement(props, state) {
-  const id = props.id;
+  const id = getId(props);
   if (typeof state[id] !== 'undefined') {
     if (state[id] === '') {
       return null;
@@ -72,7 +74,6 @@ const sortBy = ['name:asc'];
  * @name connectHierarchicalMenu
  * @kind connector
  * @category connector
- * @propType {string} id - URL state serialization key. The state of this widget takes the shape of a `string`, which corresponds to the full path of the current selected refinement.
  * @propType {string} attributes - List of attributes to use to generate the hierarchy of the menu. See the example for the convention to follow.
  * @propType {string} defaultRefinement - the item value selected by default
  * @propType {boolean} [showMore=false] - Flag to activate the show more button, for toggling the number of items between limitMin and limitMax.
@@ -90,8 +91,13 @@ export default createConnector({
   displayName: 'AlgoliaHierarchicalMenu',
 
   propTypes: {
-    id: PropTypes.string.isRequired,
-    attributes: PropTypes.arrayOf(PropTypes.string).isRequired,
+    attributes: (props, propName, componentName) => {
+      const isNotString = val => typeof val !== 'string';
+      if (!Array.isArray(props[propName]) || props[propName].some(isNotString) || props[propName].length < 1) {
+        return new Error(`Invalid prop ${propName} supplied to ${componentName}. Expected an Array of Strings`);
+      }
+      return undefined;
+    },
     separator: PropTypes.string,
     rootPath: PropTypes.string,
     showParentLevel: PropTypes.bool,
@@ -133,7 +139,8 @@ export default createConnector({
   },
 
   getProps(props, state, search) {
-    const {id, showMore, limitMin, limitMax} = props;
+    const {showMore, limitMin, limitMax} = props;
+    const id = getId(props);
     const {results} = search;
 
     const isFacetPresent =
@@ -153,15 +160,15 @@ export default createConnector({
   },
 
   refine(props, state, nextRefinement) {
+    const id = getId(props);
     return {
       ...state,
-      [props.id]: nextRefinement || '',
+      [id]: nextRefinement || '',
     };
   },
 
   getSearchParameters(searchParameters, props, state) {
     const {
-      id,
       attributes,
       separator,
       rootPath,
@@ -170,6 +177,8 @@ export default createConnector({
       limitMin,
       limitMax,
     } = props;
+
+    const id = getId(props);
     const limit = showMore ? limitMax : limitMin;
 
     searchParameters = searchParameters
@@ -199,13 +208,15 @@ export default createConnector({
   },
 
   getMetadata(props, state) {
-    const {id} = props;
+    const rootAttribute = props.attributes[0];
+    const id = getId(props);
     const currentRefinement = getCurrentRefinement(props, state);
+
     return {
       id,
       items: !currentRefinement ? [] : [{
-        label: `${id}: ${currentRefinement}`,
-        attributeName: id,
+        label: `${rootAttribute}: ${currentRefinement}`,
+        attributeName: rootAttribute,
         value: nextState => ({
           ...nextState,
           [id]: '',

diff --git a/packages/react-instantsearch/src/connectors/connectHierarchicalMenu.test.js b/packages/react-instantsearch/src/connectors/connectHierarchicalMenu.test.js
@@ -23,15 +23,15 @@ describe('connectHierarchicalMenu', () => {
     };
 
     results.getFacetValues.mockImplementationOnce(() => ({}));
-    props = getProps({id: 'ok'}, {ok: 'wat'}, {results});
+    props = getProps({attributes: ['ok']}, {ok: 'wat'}, {results});
     expect(props).toEqual({items: [], currentRefinement: 'wat'});
 
     results.getFacetValues.mockImplementationOnce(() => ({}));
-    props = getProps({id: 'ok', defaultRefinement: 'wat'}, {}, {results});
+    props = getProps({attributes: ['ok'], defaultRefinement: 'wat'}, {}, {results});
     expect(props).toEqual({items: [], currentRefinement: 'wat'});
 
     results.getFacetValues.mockImplementationOnce(() => ({}));
-    props = getProps({id: 'ok'}, {}, {results});
+    props = getProps({attributes: ['ok']}, {}, {results});
     expect(props).toEqual({items: [], currentRefinement: null});
 
     results.getFacetValues.mockClear();
@@ -61,7 +61,7 @@ describe('connectHierarchicalMenu', () => {
         },
       ],
     }));
-    props = getProps({id: 'ok'}, {}, {results});
+    props = getProps({attributes: ['ok']}, {}, {results});
     expect(props.items).toEqual([
       {
         label: 'wat',
@@ -87,7 +87,7 @@ describe('connectHierarchicalMenu', () => {
       },
     ]);
 
-    props = getProps({id: 'ok', limitMin: 1}, {}, {results});
+    props = getProps({attributes: ['ok'], limitMin: 1}, {}, {results});
     expect(props.items).toEqual([
       {
         label: 'wat',
@@ -104,7 +104,7 @@ describe('connectHierarchicalMenu', () => {
     ]);
 
     props = getProps(
-      {id: 'ok', showMore: true, limitMin: 0, limitMax: 1},
+      {attributes: ['ok'], showMore: true, limitMin: 0, limitMax: 1},
       {},
       {results}
     );
@@ -125,12 +125,12 @@ describe('connectHierarchicalMenu', () => {
   });
 
   it('doesn\'t render when no results are available', () => {
-    props = getProps({id: 'ok'}, {}, {});
+    props = getProps({attributes: ['ok']}, {}, {});
     expect(props).toBe(null);
   });
 
   it('calling refine updates the widget\'s state', () => {
-    const nextState = refine({id: 'ok'}, {otherKey: 'val'}, 'yep');
+    const nextState = refine({attributes: ['ok']}, {otherKey: 'val'}, 'yep');
     expect(nextState).toEqual({
       otherKey: 'val',
       ok: 'yep',
@@ -141,22 +141,26 @@ describe('connectHierarchicalMenu', () => {
     const initSP = new SearchParameters({maxValuesPerFacet: 100});
 
     params = getSP(initSP, {
+      attributes: ['attribute'],
       limitMin: 101,
     }, {});
     expect(params.maxValuesPerFacet).toBe(101);
 
     params = getSP(initSP, {
+      attributes: ['attribute'],
       showMore: true,
       limitMax: 101,
     }, {});
     expect(params.maxValuesPerFacet).toBe(101);
 
     params = getSP(initSP, {
+      attributes: ['attribute'],
       limitMin: 99,
     }, {});
     expect(params.maxValuesPerFacet).toBe(100);
 
     params = getSP(initSP, {
+      attributes: ['attribute'],
       showMore: true,
       limitMax: 99,
     }, {});
@@ -167,34 +171,33 @@ describe('connectHierarchicalMenu', () => {
     const initSP = new SearchParameters();
 
     params = getSP(initSP, {
-      id: 'NAME',
       attributes: ['ATTRIBUTE'],
       separator: 'SEPARATOR',
       rootPath: 'ROOT_PATH',
       showParentLevel: true,
       limitMin: 1,
-    }, {NAME: 'ok'});
+    }, {ATTRIBUTE: 'ok'});
     expect(params).toEqual(
       initSP
       .addHierarchicalFacet({
-        name: 'NAME',
+        name: 'ATTRIBUTE',
         attributes: ['ATTRIBUTE'],
         separator: 'SEPARATOR',
         rootPath: 'ROOT_PATH',
         showParentLevel: true,
       })
-      .toggleHierarchicalFacetRefinement('NAME', 'ok')
+      .toggleHierarchicalFacetRefinement('ATTRIBUTE', 'ok')
       .setQueryParameter('maxValuesPerFacet', 1)
     );
   });
 
   it('registers its id in metadata', () => {
-    const metadata = getMetadata({id: 'ok'}, {});
+    const metadata = getMetadata({attributes: ['ok']}, {});
     expect(metadata).toEqual({items: [], id: 'ok'});
   });
 
   it('registers its filter in metadata', () => {
-    const metadata = getMetadata({id: 'ok'}, {ok: 'wat'});
+    const metadata = getMetadata({attributes: ['ok']}, {ok: 'wat'});
     expect(metadata).toEqual({
       id: 'ok',
       items: [{

diff --git a/packages/react-instantsearch/src/connectors/connectHitsPerPage.js b/packages/react-instantsearch/src/connectors/connectHitsPerPage.js
@@ -1,13 +1,16 @@
-import {PropTypes} from 'react';
-
 import createConnector from '../core/createConnector';
 
+function getId() {
+  return 'hPP';
+}
+
 function getCurrentRefinement(props, state) {
-  if (typeof state[props.id] !== 'undefined') {
-    if (typeof state[props.id] === 'string') {
-      return parseInt(state[props.id], 10);
+  const id = getId();
+  if (typeof state[id] !== 'undefined') {
+    if (typeof state[id] === 'string') {
+      return parseInt(state[id], 10);
     }
-    return state[props.id];
+    return state[id];
   }
   return props.defaultRefinement;
 }
@@ -18,7 +21,6 @@ function getCurrentRefinement(props, state) {
  * @name connectHitsPerPage
  * @kind connector
  * @category connector
- * @propType {string} [id="hPP"] - The id of the widget.
  * @propType {number} defaultRefinement - The number of items selected by default
  * @propType {{value, label}[]|number[]} items - List of hits per page options. Passing a list of numbers [n] is a shorthand for [{value: n, label: n}].
  * @providedPropType {function} refine - a function to remove a single filter
@@ -28,33 +30,25 @@ function getCurrentRefinement(props, state) {
 export default createConnector({
   displayName: 'AlgoliaHitsPerPage',
 
-  propTypes: {
-    id: PropTypes.string,
-    defaultRefinement: PropTypes.number.isRequired,
-  },
-
-  defaultProps: {
-    id: 'hPP',
-  },
-
   getProps(props, state) {
     return {
       currentRefinement: getCurrentRefinement(props, state),
     };
   },
 
   refine(props, state, nextHitsPerPage) {
+    const id = getId();
     return {
       ...state,
-      [props.id]: nextHitsPerPage,
+      [id]: nextHitsPerPage,
     };
   },
 
   getSearchParameters(searchParameters, props, state) {
     return searchParameters.setHitsPerPage(getCurrentRefinement(props, state));
   },
 
-  getMetadata(props) {
-    return {id: props.id};
+  getMetadata() {
+    return {id: getId()};
   },
 });
diff --git a/packages/react-instantsearch/src/connectors/connectHitsPerPage.test.js b/packages/react-instantsearch/src/connectors/connectHitsPerPage.test.js
@@ -17,18 +17,15 @@ let params;
 
 describe('connectHitsPerPage', () => {
   it('provides the correct props to the component', () => {
-    props = getProps({id: 'hPP'}, {hPP: 10});
+    props = getProps({}, {hPP: '10'});
     expect(props).toEqual({currentRefinement: 10});
 
-    props = getProps({id: 'hPP'}, {hPP: '10'});
-    expect(props).toEqual({currentRefinement: 10});
-
-    props = getProps({id: 'hPP', defaultRefinement: 20}, {});
+    props = getProps({defaultRefinement: 20}, {});
     expect(props).toEqual({currentRefinement: 20});
   });
 
   it('calling refine updates the widget\'s state', () => {
-    const nextState = refine({id: 'hPP'}, {otherKey: 'val'}, 30);
+    const nextState = refine({}, {otherKey: 'val'}, 30);
     expect(nextState).toEqual({
       otherKey: 'val',
       hPP: 30,
@@ -38,18 +35,18 @@ describe('connectHitsPerPage', () => {
   it('refines the hitsPerPage parameter', () => {
     const sp = new SearchParameters();
 
-    params = getSP(sp, {id: 'hPP'}, {hPP: 10});
+    params = getSP(sp, {}, {hPP: 10});
     expect(params).toEqual(sp.setQueryParameter('hitsPerPage', 10));
 
-    params = getSP(sp, {id: 'hPP'}, {hPP: '10'});
+    params = getSP(sp, {}, {hPP: '10'});
     expect(params).toEqual(sp.setQueryParameter('hitsPerPage', 10));
 
-    params = getSP(sp, {id: 'hPP', defaultRefinement: 20}, {});
+    params = getSP(sp, {defaultRefinement: 20}, {});
     expect(params).toEqual(sp.setQueryParameter('hitsPerPage', 20));
   });
 
   it('registers its id in metadata', () => {
-    const metadata = getMetadata({id: 'hPP'});
+    const metadata = getMetadata({});
     expect(metadata).toEqual({id: 'hPP'});
   });
 });