fix(createURL): correctly remove page in state (#4679)

Haroenv · web-flow · commit 48c080ef85b9 · 2021-03-24T13:49:11.000+01:00
* fix(createURL): correctly remove page in state fixes algolia/vue-instantsearch#932 * undo stale state change in breadcrumb * test(ratingmenu): avoid testing details
diff --git a/src/connectors/breadcrumb/connectBreadcrumb.ts b/src/connectors/breadcrumb/connectBreadcrumb.ts
@@ -5,7 +5,7 @@ import {
   isEqual,
   noop,
 } from '../../lib/utils';
-import { SearchResults } from 'algoliasearch-helper';
+import { SearchParameters, SearchResults } from 'algoliasearch-helper';
 import { Connector, TransformItems, CreateURL } from '../../types';
 
 const withUsage = createDocumentationMessageGenerator({
@@ -107,6 +107,22 @@ const connectBreadcrumb: BreadcrumbConnector = function connectBreadcrumb(
 
     const [hierarchicalFacetName] = attributes;
 
+    function getRefinedState(state: SearchParameters, facetValue: string) {
+      if (!facetValue) {
+        const breadcrumb = state.getHierarchicalFacetBreadcrumb(
+          hierarchicalFacetName
+        );
+        if (breadcrumb.length > 0) {
+          return state
+            .resetPage()
+            .toggleFacetRefinement(hierarchicalFacetName, breadcrumb[0]);
+        }
+      }
+      return state
+        .resetPage()
+        .toggleFacetRefinement(hierarchicalFacetName, facetValue);
+    }
+
     return {
       $$type: 'ais.breadcrumb',
 
@@ -166,44 +182,13 @@ const connectBreadcrumb: BreadcrumbConnector = function connectBreadcrumb(
 
         if (!connectorState.createURL) {
           connectorState.createURL = facetValue => {
-            if (!facetValue) {
-              const breadcrumb = helper.getHierarchicalFacetBreadcrumb(
-                hierarchicalFacetName
-              );
-              if (breadcrumb.length > 0) {
-                return createURL(
-                  helper.state.toggleFacetRefinement(
-                    hierarchicalFacetName,
-                    breadcrumb[0]
-                  )
-                );
-              }
-            }
-            return createURL(
-              helper.state.toggleFacetRefinement(
-                hierarchicalFacetName,
-                facetValue
-              )
-            );
+            return createURL(getRefinedState(helper.state, facetValue));
           };
         }
 
         if (!connectorState.refine) {
           connectorState.refine = facetValue => {
-            if (!facetValue) {
-              const breadcrumb = helper.getHierarchicalFacetBreadcrumb(
-                hierarchicalFacetName
-              );
-              if (breadcrumb.length > 0) {
-                helper
-                  .toggleRefinement(hierarchicalFacetName, breadcrumb[0])
-                  .search();
-              }
-            } else {
-              helper
-                .toggleRefinement(hierarchicalFacetName, facetValue)
-                .search();
-            }
+            helper.setState(getRefinedState(helper.state, facetValue)).search();
           };
         }
 
diff --git a/src/connectors/hierarchical-menu/connectHierarchicalMenu.js b/src/connectors/hierarchical-menu/connectHierarchicalMenu.js
@@ -185,7 +185,9 @@ export default function connectHierarchicalMenu(renderFn, unmountFn = noop) {
         // Bind createURL to this specific attribute
         function _createURL(facetValue) {
           return createURL(
-            state.toggleRefinement(hierarchicalFacetName, facetValue)
+            state
+              .resetPage()
+              .toggleFacetRefinement(hierarchicalFacetName, facetValue)
           );
         }
 
@@ -201,7 +203,9 @@ export default function connectHierarchicalMenu(renderFn, unmountFn = noop) {
         if (!this._refine) {
           this._refine = function(facetValue) {
             sendEvent('click', facetValue);
-            helper.toggleRefinement(hierarchicalFacetName, facetValue).search();
+            helper
+              .toggleFacetRefinement(hierarchicalFacetName, facetValue)
+              .search();
           };
         }
 
diff --git a/src/connectors/hits-per-page/connectHitsPerPage.ts b/src/connectors/hits-per-page/connectHitsPerPage.ts
@@ -159,10 +159,12 @@ const connectHitsPerPage: HitsPerPageConnector = function connectHitsPerPage(
       },
       createURLFactory: ({ state, createURL }) => value =>
         createURL(
-          state.setQueryParameter(
-            'hitsPerPage',
-            !value && value !== 0 ? undefined : value
-          )
+          state
+            .resetPage()
+            .setQueryParameter(
+              'hitsPerPage',
+              !value && value !== 0 ? undefined : value
+            )
         ),
     };
 
diff --git a/src/connectors/menu/connectMenu.ts b/src/connectors/menu/connectMenu.ts
@@ -232,7 +232,9 @@ const connectMenu: MenuConnector = function connectMenu(
         if (!_createURL) {
           _createURL = (facetValue: string) =>
             createURL(
-              helper.state.toggleFacetRefinement(attribute, facetValue)
+              helper.state
+                .resetPage()
+                .toggleFacetRefinement(attribute, facetValue)
             );
         }
 
diff --git a/src/connectors/rating-menu/connectRatingMenu.js b/src/connectors/rating-menu/connectRatingMenu.js
@@ -199,27 +199,28 @@ ${
 }`;
     };
 
-    const toggleRefinement = (helper, facetValue) => {
-      sendEvent('click', facetValue);
-      const isRefined = getRefinedStar(helper.state) === Number(facetValue);
-      helper.removeNumericRefinement(attribute);
+    function getRefinedState(state, facetValue) {
+      const isRefined = getRefinedStar(state) === Number(facetValue);
+
+      const emptyState = state.resetPage().removeNumericRefinement(attribute);
+
       if (!isRefined) {
-        helper
+        return emptyState
           .addNumericRefinement(attribute, '<=', max)
           .addNumericRefinement(attribute, '>=', facetValue);
       }
-      helper.search();
+      return emptyState;
+    }
+
+    const toggleRefinement = (helper, facetValue) => {
+      sendEvent('click', facetValue);
+      helper.setState(getRefinedState(helper.state, facetValue)).search();
     };
 
     const connectorState = {
       toggleRefinementFactory: helper => toggleRefinement.bind(this, helper),
       createURLFactory: ({ state, createURL }) => value =>
-        createURL(
-          state
-            .removeNumericRefinement(attribute)
-            .addNumericRefinement(attribute, '<=', max)
-            .addNumericRefinement(attribute, '>=', value)
-        ),
+        createURL(getRefinedState(state, value)),
     };
 
     return {
diff --git a/src/connectors/refinement-list/connectRefinementList.ts b/src/connectors/refinement-list/connectRefinementList.ts
@@ -435,7 +435,9 @@ const connectRefinementList: RefinementListConnector = function connectRefinemen
 
         return {
           createURL: facetValue =>
-            createURL(state.toggleFacetRefinement(attribute, facetValue)),
+            createURL(
+              state.resetPage().toggleFacetRefinement(attribute, facetValue)
+            ),
           items,
           refine: triggerRefine,
           searchForItems: searchFacetValues,
diff --git a/src/connectors/toggle-refinement/connectToggleRefinement.js b/src/connectors/toggle-refinement/connectToggleRefinement.js
@@ -161,17 +161,19 @@ export default function connectToggleRefinement(renderFn, unmountFn = noop) {
 
     const connectorState = {
       createURLFactory: (isRefined, { state, createURL }) => () => {
+        state = state.resetPage();
+
         const valuesToRemove = isRefined ? on : off;
         if (valuesToRemove) {
           valuesToRemove.forEach(v => {
-            state.removeDisjunctiveFacetRefinement(attribute, v);
+            state = state.removeDisjunctiveFacetRefinement(attribute, v);
           });
         }
 
         const valuesToAdd = isRefined ? off : on;
         if (valuesToAdd) {
           valuesToAdd.forEach(v => {
-            state.addDisjunctiveFacetRefinement(attribute, v);
+            state = state.addDisjunctiveFacetRefinement(attribute, v);
           });
         }
 
diff --git a/src/widgets/hierarchical-menu/__tests__/hierarchical-menu-test.js b/src/widgets/hierarchical-menu/__tests__/hierarchical-menu-test.js
@@ -50,7 +50,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/hierarchica
       data = { data: [{ name: 'foo' }, { name: 'bar' }] };
       results = { getFacetValues: jest.fn(() => data) };
       helper = algoliasearchHelper({}, '');
-      helper.toggleRefinement = jest.fn().mockReturnThis();
+      helper.toggleFacetRefinement = jest.fn().mockReturnThis();
       helper.search = jest.fn();
       state = new SearchParameters();
       state.toggleRefinement = jest.fn();
@@ -174,8 +174,8 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/hierarchica
       const elementToggleRefinement = firstRender[0].props.toggleRefinement;
       elementToggleRefinement('mom');
 
-      expect(helper.toggleRefinement).toHaveBeenCalledTimes(1);
-      expect(helper.toggleRefinement).toHaveBeenCalledWith('hello', 'mom');
+      expect(helper.toggleFacetRefinement).toHaveBeenCalledTimes(1);
+      expect(helper.toggleFacetRefinement).toHaveBeenCalledWith('hello', 'mom');
       expect(helper.search).toHaveBeenCalledTimes(1);
     });
 
diff --git a/src/widgets/rating-menu/__tests__/rating-menu-test.js b/src/widgets/rating-menu/__tests__/rating-menu-test.js
@@ -144,8 +144,18 @@ describe('ratingMenu()', () => {
       .getWidgetRenderState({ state: helper.state, helper, results, createURL })
       .refine('3');
 
-    expect(helper.removeNumericRefinement).toHaveBeenCalledTimes(1);
-    expect(helper.addNumericRefinement).toHaveBeenCalledTimes(2);
+    expect(helper.state).toEqual(
+      new SearchParameters({
+        index: '',
+        disjunctiveFacets: ['anAttrName'],
+        numericRefinements: {
+          anAttrName: {
+            '<=': [5],
+            '>=': [3],
+          },
+        },
+      })
+    );
     expect(helper.search).toHaveBeenCalledTimes(1);
   });
 
@@ -156,8 +166,17 @@ describe('ratingMenu()', () => {
       .getWidgetRenderState({ state: helper.state, helper, results, createURL })
       .refine('2');
 
-    expect(helper.removeNumericRefinement).toHaveBeenCalledTimes(1);
-    expect(helper.addNumericRefinement).toHaveBeenCalledTimes(0);
+    expect(helper.state).toEqual(
+      new SearchParameters({
+        index: '',
+        disjunctiveFacets: ['anAttrName'],
+        numericRefinements: {
+          anAttrName: {
+            '>=': [],
+          },
+        },
+      })
+    );
     expect(helper.search).toHaveBeenCalledTimes(1);
   });
 
@@ -167,8 +186,18 @@ describe('ratingMenu()', () => {
       .getWidgetRenderState({ state: helper.state, helper, results, createURL })
       .refine('4');
 
-    expect(helper.removeNumericRefinement).toHaveBeenCalledTimes(1);
-    expect(helper.addNumericRefinement).toHaveBeenCalledTimes(2);
+    expect(helper.state).toEqual(
+      new SearchParameters({
+        index: '',
+        disjunctiveFacets: ['anAttrName'],
+        numericRefinements: {
+          anAttrName: {
+            '<=': [5],
+            '>=': [4],
+          },
+        },
+      })
+    );
     expect(helper.search).toHaveBeenCalledTimes(1);
   });
 
