fix(routing): ensure UiState is cleaned up allowing "undefined" for v…

…alues (#5956) fixes #5954
algolia · Dec 7, 2023 · 18cfece · 18cfece
1 parent 79ee485
commit 18cfece
Show file tree

Hide file tree

Showing 17 changed files with 684 additions and 170 deletions.
diff --git a/packages/instantsearch.js/src/connectors/breadcrumb/connectBreadcrumb.ts b/packages/instantsearch.js/src/connectors/breadcrumb/connectBreadcrumb.ts
@@ -244,13 +244,16 @@ const connectBreadcrumb: BreadcrumbConnector = function connectBreadcrumb(
           hierarchicalFacetName
         );
 
-        return removeEmptyRefinementsFromUiState({
-          ...uiState,
-          hierarchicalMenu: {
-            ...uiState.hierarchicalMenu,
-            [hierarchicalFacetName]: path,
+        return removeEmptyRefinementsFromUiState(
+          {
+            ...uiState,
+            hierarchicalMenu: {
+              ...uiState.hierarchicalMenu,
+              [hierarchicalFacetName]: path,
+            },
           },
-        });
+          hierarchicalFacetName
+        );
       },
 
       getWidgetSearchParameters(searchParameters, { uiState }) {
@@ -333,29 +336,26 @@ function shiftItemsValues(array: BreadcrumbConnectorParamsItem[]) {
   }));
 }
 
-function removeEmptyRefinementsFromUiState(indexUiState: IndexUiState) {
-  const { hierarchicalMenu, ...indexUiStateBase } = indexUiState;
-
-  if (!hierarchicalMenu) {
+function removeEmptyRefinementsFromUiState(
+  indexUiState: IndexUiState,
+  attribute: string
+): IndexUiState {
+  if (!indexUiState.hierarchicalMenu) {
     return indexUiState;
   }
 
-  const connectorUiState = Object.keys(hierarchicalMenu).reduce(
-    (acc, key) => ({
-      ...acc,
-      ...(hierarchicalMenu[key].length > 0
-        ? { [key]: hierarchicalMenu[key] }
-        : {}),
-    }),
-    {}
-  );
-
-  return {
-    ...indexUiStateBase,
-    ...(Object.keys(connectorUiState).length > 0
-      ? { hierarchicalMenu: connectorUiState }
-      : {}),
-  };
+  if (
+    !indexUiState.hierarchicalMenu[attribute] ||
+    !indexUiState.hierarchicalMenu[attribute].length
+  ) {
+    delete indexUiState.hierarchicalMenu[attribute];
+  }
+
+  if (Object.keys(indexUiState.hierarchicalMenu).length === 0) {
+    delete indexUiState.hierarchicalMenu;
+  }
+
+  return indexUiState;
 }
 
 export default connectBreadcrumb;
diff --git a/packages/instantsearch.js/src/connectors/hierarchical-menu/connectHierarchicalMenu.ts b/packages/instantsearch.js/src/connectors/hierarchical-menu/connectHierarchicalMenu.ts
@@ -397,13 +397,16 @@ const connectHierarchicalMenu: HierarchicalMenuConnector =
             hierarchicalFacetName
           );
 
-          return removeEmptyRefinementsFromUiState({
-            ...uiState,
-            hierarchicalMenu: {
-              ...uiState.hierarchicalMenu,
-              [hierarchicalFacetName]: path,
+          return removeEmptyRefinementsFromUiState(
+            {
+              ...uiState,
+              hierarchicalMenu: {
+                ...uiState.hierarchicalMenu,
+                [hierarchicalFacetName]: path,
+              },
             },
-          });
+            hierarchicalFacetName
+          );
         },
 
         getWidgetSearchParameters(searchParameters, { uiState }) {
@@ -479,29 +482,26 @@ As this is not supported, please make sure to remove this other widget or this H
     };
   };
 
-function removeEmptyRefinementsFromUiState(indexUiState: IndexUiState) {
-  const { hierarchicalMenu, ...indexUiStateBase } = indexUiState;
-
-  if (!hierarchicalMenu) {
+function removeEmptyRefinementsFromUiState(
+  indexUiState: IndexUiState,
+  attribute: string
+): IndexUiState {
+  if (!indexUiState.hierarchicalMenu) {
     return indexUiState;
   }
 
-  const connectorUiState = Object.keys(hierarchicalMenu).reduce(
-    (acc, key) => ({
-      ...acc,
-      ...(hierarchicalMenu[key].length > 0
-        ? { [key]: hierarchicalMenu[key] }
-        : {}),
-    }),
-    {}
-  );
-
-  return {
-    ...indexUiStateBase,
-    ...(Object.keys(connectorUiState).length > 0
-      ? { hierarchicalMenu: connectorUiState }
-      : {}),
-  };
+  if (
+    !indexUiState.hierarchicalMenu[attribute] ||
+    indexUiState.hierarchicalMenu[attribute].length === 0
+  ) {
+    delete indexUiState.hierarchicalMenu[attribute];
+  }
+
+  if (Object.keys(indexUiState.hierarchicalMenu).length === 0) {
+    delete indexUiState.hierarchicalMenu;
+  }
+
+  return indexUiState;
 }
 
 export default connectHierarchicalMenu;
diff --git a/packages/instantsearch.js/src/connectors/menu/connectMenu.ts b/packages/instantsearch.js/src/connectors/menu/connectMenu.ts
@@ -334,13 +334,16 @@ const connectMenu: MenuConnector = function connectMenu(
         const [value] =
           searchParameters.getHierarchicalFacetBreadcrumb(attribute);
 
-        return removeEmptyRefinementsFromUiState({
-          ...uiState,
-          menu: {
-            ...uiState.menu,
-            [attribute]: value,
+        return removeEmptyRefinementsFromUiState(
+          {
+            ...uiState,
+            menu: {
+              ...uiState.menu,
+              [attribute]: value,
+            },
           },
-        });
+          attribute
+        );
       },
 
       getWidgetSearchParameters(searchParameters, { uiState }) {
@@ -397,27 +400,23 @@ As this is not supported, please make sure to remove this other widget or this M
   };
 };
 
-function removeEmptyRefinementsFromUiState(indexUiState: IndexUiState) {
-  const { menu, ...indexUiStateBase } = indexUiState;
-
-  if (!menu) {
+function removeEmptyRefinementsFromUiState(
+  indexUiState: IndexUiState,
+  attribute: string
+): IndexUiState {
+  if (!indexUiState.menu) {
     return indexUiState;
   }
 
-  const connectorUiState = Object.keys(menu).reduce(
-    (acc, key) => ({
-      ...acc,
-      ...(menu[key]?.length > 0 ? { [key]: menu[key] } : {}),
-    }),
-    {}
-  );
-
-  return {
-    ...indexUiStateBase,
-    ...(Object.keys(connectorUiState).length > 0
-      ? { menu: connectorUiState }
-      : {}),
-  };
+  if (indexUiState.menu[attribute] === undefined) {
+    delete indexUiState.menu[attribute];
+  }
+
+  if (Object.keys(indexUiState.menu).length === 0) {
+    delete indexUiState.menu;
+  }
+
+  return indexUiState;
 }
 
 export default connectMenu;
diff --git a/packages/instantsearch.js/src/connectors/numeric-menu/connectNumericMenu.ts b/packages/instantsearch.js/src/connectors/numeric-menu/connectNumericMenu.ts
@@ -235,13 +235,16 @@ const connectNumericMenu: NumericMenuConnector = function connectNumericMenu(
         const min = (values['>='] && values['>='][0]) || '';
         const max = (values['<='] && values['<='][0]) || '';
 
-        return removeEmptyRefinementsFromUiState({
-          ...uiState,
-          numericMenu: {
-            ...uiState.numericMenu,
-            [attribute]: `${min}:${max}`,
+        return removeEmptyRefinementsFromUiState(
+          {
+            ...uiState,
+            numericMenu: {
+              ...uiState.numericMenu,
+              [attribute]: `${min}:${max}`,
+            },
           },
-        });
+          attribute
+        );
       },
 
       getWidgetSearchParameters(searchParameters, { uiState }) {
@@ -483,27 +486,23 @@ function hasNumericRefinement(
   );
 }
 
-function removeEmptyRefinementsFromUiState(indexUiState: IndexUiState) {
-  const { numericMenu, ...indexUiStateBase } = indexUiState;
-
-  if (!numericMenu) {
+function removeEmptyRefinementsFromUiState(
+  indexUiState: IndexUiState,
+  attribute: string
+): IndexUiState {
+  if (!indexUiState.numericMenu) {
     return indexUiState;
   }
 
-  const connectorUiState = Object.keys(numericMenu).reduce(
-    (acc, key) => ({
-      ...acc,
-      ...(numericMenu[key] !== ':' ? { [key]: numericMenu[key] } : {}),
-    }),
-    {}
-  );
+  if (indexUiState.numericMenu[attribute] === ':') {
+    delete indexUiState.numericMenu[attribute];
+  }
 
-  return {
-    ...indexUiStateBase,
-    ...(Object.keys(connectorUiState).length > 0
-      ? { numericMenu: connectorUiState }
-      : {}),
-  };
+  if (Object.keys(indexUiState.numericMenu).length === 0) {
+    delete indexUiState.numericMenu;
+  }
+
+  return indexUiState;
 }
 
 export default connectNumericMenu;
diff --git a/packages/instantsearch.js/src/connectors/rating-menu/connectRatingMenu.ts b/packages/instantsearch.js/src/connectors/rating-menu/connectRatingMenu.ts
@@ -439,13 +439,16 @@ const connectRatingMenu: RatingMenuConnector = function connectRatingMenu(
       getWidgetUiState(uiState, { searchParameters }) {
         const value = getRefinedStar(searchParameters);
 
-        return removeEmptyRefinementsFromUiState({
-          ...uiState,
-          ratingMenu: {
-            ...uiState.ratingMenu,
-            [attribute]: typeof value === 'number' ? value : undefined,
+        return removeEmptyRefinementsFromUiState(
+          {
+            ...uiState,
+            ratingMenu: {
+              ...uiState.ratingMenu,
+              [attribute]: typeof value === 'number' ? value : undefined,
+            },
           },
-        });
+          attribute
+        );
       },
 
       getWidgetSearchParameters(searchParameters, { uiState }) {
@@ -472,29 +475,23 @@ const connectRatingMenu: RatingMenuConnector = function connectRatingMenu(
   };
 };
 
-function removeEmptyRefinementsFromUiState(indexUiState: IndexUiState) {
-  const { ratingMenu, ...indexUiStateBase } = indexUiState;
-
-  if (!ratingMenu) {
+function removeEmptyRefinementsFromUiState(
+  indexUiState: IndexUiState,
+  attribute: string
+): IndexUiState {
+  if (!indexUiState.ratingMenu) {
     return indexUiState;
   }
 
-  const connectorUiState = Object.keys(ratingMenu).reduce(
-    (acc, key) => ({
-      ...acc,
-      ...(typeof ratingMenu[key] === 'number'
-        ? { [key]: ratingMenu[key] }
-        : {}),
-    }),
-    {}
-  );
-
-  return {
-    ...indexUiStateBase,
-    ...(Object.keys(connectorUiState).length > 0
-      ? { ratingMenu: connectorUiState }
-      : {}),
-  };
+  if (typeof indexUiState.ratingMenu[attribute] !== 'number') {
+    delete indexUiState.ratingMenu[attribute];
+  }
+
+  if (Object.keys(indexUiState.ratingMenu).length === 0) {
+    delete indexUiState.ratingMenu;
+  }
+
+  return indexUiState;
 }
 
 export default connectRatingMenu;