fix(toggle): make autoHide check facetValue.count (#1213)

Activating a toggle with 0 hits puts the user in a state where they can't get back to the previous state. The toggle and many other widgets autoHide when no results are found. This change will autoHide the toggle if changing it's state would result in 0 hits.
algolia · Aug 24, 2016 · 86872eb · 86872eb
1 parent af77180
commit 86872eb
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 28 deletions.
diff --git a/src/widgets/toggle/implementations/__tests__/currentToggle-test.js b/src/widgets/toggle/implementations/__tests__/currentToggle-test.js
@@ -116,7 +116,7 @@ describe('currentToggle()', () => {
           nbHits: 1,
           getFacetValues: sinon.stub().returns([
             {name: 'true', count: 2, isRefined: false},
-            {name: 'false', count: 1, isRefined: true}
+            {name: 'false', count: 1, isRefined: false}
           ])
         };
         props.cssClasses.root = 'test';
@@ -125,7 +125,7 @@ describe('currentToggle()', () => {
             count: 2,
             isRefined: false,
             name: label,
-            offFacetValue: {count: 1, name: 'Hello, ', isRefined: true},
+            offFacetValue: {count: 1, name: 'Hello, ', isRefined: false},
             onFacetValue: {count: 2, name: 'Hello, ', isRefined: false}
           }],
           shouldAutoHideContainer: false,
@@ -153,7 +153,7 @@ describe('currentToggle()', () => {
           nbHits: 1,
           getFacetValues: sinon.stub().returns([
             {name: 'true', count: 2, isRefined: false},
-            {name: 'false', count: 1, isRefined: true}
+            {name: 'false', count: 1, isRefined: false}
           ])
         };
         widget = currentToggle({
@@ -176,7 +176,7 @@ describe('currentToggle()', () => {
             isRefined:
             false,
             name: label,
-            offFacetValue: {count: 1, name: 'Hello, ', isRefined: true},
+            offFacetValue: {count: 1, name: 'Hello, ', isRefined: false},
             onFacetValue: {count: 2, name: 'Hello, ', isRefined: false}
           }],
           shouldAutoHideContainer: false,
@@ -213,7 +213,7 @@ describe('currentToggle()', () => {
             isRefined: false,
             count: null,
             onFacetValue: {name: label, isRefined: false, count: null},
-            offFacetValue: {name: label, isRefined: false, count: null}
+            offFacetValue: {name: label, isRefined: false, count: 0}
           }],
           shouldAutoHideContainer: true,
           ...props

diff --git a/src/widgets/toggle/implementations/currentToggle.js b/src/widgets/toggle/implementations/currentToggle.js
@@ -55,11 +55,12 @@ const currentToggle = ({
 
     this.toggleRefinement = this.toggleRefinement.bind(this, helper);
 
-        // no need to refine anything at init if no custom off values
+    // no need to refine anything at init if no custom off values
     if (!hasAnOffValue) {
       return;
     }
-        // Add filtering on the 'off' value if set
+
+    // Add filtering on the 'off' value if set
     const isRefined = state.isDisjunctiveFacetRefined(attributeName, userValues.on);
     if (!isRefined) {
       helper.addDisjunctiveFacetRefinement(attributeName, userValues.off);
@@ -76,16 +77,16 @@ const currentToggle = ({
       isRefined: onData !== undefined ? onData.isRefined : false,
       count: onData === undefined ? null : onData.count
     };
-    const offData = find(allFacetValues, {name: offValue.toString()});
+    const offData = hasAnOffValue ? find(allFacetValues, {name: offValue.toString()}) : undefined;
     const offFacetValue = {
       name: label,
       isRefined: offData !== undefined ? offData.isRefined : false,
-      count: offData === undefined ? null : offData.count
+      count: offData === undefined ? results.nbHits : offData.count
     };
 
-        // what will we show by default,
-        // if checkbox is not checked, show: [ ] free shipping (countWhenChecked)
-        // if checkbox is checked, show: [x] free shipping (countWhenNotChecked)
+    // what will we show by default,
+    // if checkbox is not checked, show: [ ] free shipping (countWhenChecked)
+    // if checkbox is checked, show: [x] free shipping (countWhenNotChecked)
     const nextRefinement = isRefined ? offFacetValue : onFacetValue;
 
     const facetValue = {
@@ -96,27 +97,27 @@ const currentToggle = ({
       offFacetValue
     };
 
-        // Bind createURL to this specific attribute
+    // Bind createURL to this specific attribute
     function _createURL() {
       return createURL(
-            state
-              .removeDisjunctiveFacetRefinement(attributeName, isRefined ? onValue : userValues.off)
-              .addDisjunctiveFacetRefinement(attributeName, isRefined ? userValues.off : onValue)
-          );
+        state
+          .removeDisjunctiveFacetRefinement(attributeName, isRefined ? onValue : userValues.off)
+          .addDisjunctiveFacetRefinement(attributeName, isRefined ? userValues.off : onValue)
+      );
     }
 
     ReactDOM.render(
-          <RefinementList
-            collapsible={collapsible}
-            createURL={_createURL}
-            cssClasses={cssClasses}
-            facetValues={[facetValue]}
-            shouldAutoHideContainer={results.nbHits === 0}
-            templateProps={this._templateProps}
-            toggleRefinement={this.toggleRefinement}
-          />,
-          containerNode
-        );
+      <RefinementList
+        collapsible={collapsible}
+        createURL={_createURL}
+        cssClasses={cssClasses}
+        facetValues={[facetValue]}
+        shouldAutoHideContainer={(facetValue.count === 0 || facetValue.count === null)}
+        templateProps={this._templateProps}
+        toggleRefinement={this.toggleRefinement}
+      />,
+      containerNode
+    );
   }
 });