fix(hierarchicalFacets): use a real attribute name for the hierarchicalFacet name

To avoid collisions when reordering widgets.

Author: vvo

widgets/hierarchicalMenu.js

@@ -7,7 +7,6 @@ var headerFooter = require('../decorators/headerFooter');
 var RefinementList = autoHide(headerFooter(require('../components/RefinementList')));
 var Template = require('../components/Template');
 
-var hierarchicalCounter = 0;
 var defaultTemplates = {
   header: '',
   item: '<a href="{{href}}">{{name}}</a> {{count}}',
@@ -48,16 +47,17 @@ function hierarchicalMenu({
     templates = defaultTemplates,
     transformData
   }) {
-  hierarchicalCounter++;
-
   var containerNode = utils.getContainerNode(container);
   var usage = 'Usage: hierarchicalMenu({container, attributes, [separator, sortBy, limit, cssClasses.{root, list, item}, templates.{header, item, footer}, transformData]})';
 
   if (!container || !attributes || !attributes.length) {
     throw new Error(usage);
   }
 
-  var hierarchicalFacetName = 'instantsearch.js-hierarchicalMenu' + hierarchicalCounter;
+  // we need to provide a hierarchicalFacet name for the search state
+  // so that we can always map $hierarchicalFacetName => real attributes
+  // we use the first attribute name
+  var hierarchicalFacetName = attributes[0];
 
   return {
     getConfiguration: () => ({

widgets/menu.js

@@ -7,7 +7,6 @@ var headerFooter = require('../decorators/headerFooter');
 var RefinementList = autoHide(headerFooter(require('../components/RefinementList')));
 var Template = require('../components/Template');
 
-var hierarchicalCounter = 0;
 var defaultTemplates = {
   header: '',
   item: '<a href="{{href}}">{{name}}</a> {{count}}',
@@ -46,16 +45,16 @@ function menu({
     transformData,
     hideWhenNoResults = true
   }) {
-  hierarchicalCounter++;
-
   var containerNode = utils.getContainerNode(container);
   var usage = 'Usage: menu({container, facetName, [sortBy, limit, cssClasses.{root,list,item}, templates.{header,item,footer}, transformData, hideWhenResults]})';
 
   if (container === null || facetName === null) {
     throw new Error(usage);
   }
 
-  var hierarchicalFacetName = 'instantsearch.js-menu' + hierarchicalCounter;
+  // we use a hierarchicalFacet for the menu because that's one of the use cases
+  // of hierarchicalFacet: a flat menu
+  var hierarchicalFacetName = facetName;
 
   return {
     getConfiguration: () => ({