feat: update UiState definition (#4075)

This PR updates the type definitions to match the new format of the `UiState`. We introduce a new type called `IndexUiState`. The `UiState` is the global structure that represents the InstantSearch instance with each indices. The `IndexUiState` is the previous version of the `UiState`, it represents the state of an "index". Here is their definitions:

```ts
export type IndexUiState = {
  query?: string;
  hitsPerPage?: number;
  // ...
};

export type UiState = {
  [indexId: string]: IndexUiState;
};
```

The introduction of this type mainly impact the `StateMapping` & `RoutingManager`. Both have been updated. The changes applied to `RoutingManager` are there to make the tests pass don't pay too much attention to them since we'll rework this part soon.

**Note**: Name are just a proposition, we could use something else like `WidgetsState`, ... ideas are welcome! We could rename `UiState` for consistency if we find a better name for both.

Author: samouss

src/lib/RoutingManager.ts

@@ -3,6 +3,7 @@ import { isEqual } from './utils';
 import {
   InstantSearch,
   UiState,
+  IndexUiState,
   Router,
   StateMapping,
   Widget,
@@ -21,6 +22,7 @@ class RoutingManager implements Widget {
   private readonly stateMapping: StateMapping;
 
   private isFirstRender: boolean = true;
+  private indexId: string;
   private currentUiState: UiState;
   private initState?: UiState;
   private renderURLFromState?: (event: HelperChangeEvent) => void;
@@ -33,6 +35,7 @@ class RoutingManager implements Widget {
     this.router = router;
     this.stateMapping = stateMapping;
     this.instantSearchInstance = instantSearchInstance;
+    this.indexId = this.instantSearchInstance.indexName;
     this.currentUiState = this.stateMapping.routeToState(this.router.read());
   }
 
@@ -44,14 +47,15 @@ class RoutingManager implements Widget {
     uiState: UiState;
   }): SearchParameters {
     const widgets = this.instantSearchInstance.mainIndex.getWidgets();
+    const indexUiState = uiState[this.indexId] || {};
 
     return widgets.reduce((parameters, widget) => {
       if (!widget.getWidgetSearchParameters) {
         return parameters;
       }
 
       return widget.getWidgetSearchParameters(parameters, {
-        uiState,
+        uiState: indexUiState,
       });
     }, currentSearchParameters);
   }
@@ -64,16 +68,18 @@ class RoutingManager implements Widget {
     const widgets = this.instantSearchInstance.mainIndex.getWidgets();
     const helper = this.instantSearchInstance.mainIndex.getHelper()!;
 
-    return widgets.reduce<UiState>((state, widget) => {
-      if (!widget.getWidgetState) {
-        return state;
-      }
-
-      return widget.getWidgetState(state, {
-        helper,
-        searchParameters,
-      });
-    }, {});
+    return {
+      [this.indexId]: widgets.reduce<IndexUiState>((state, widget) => {
+        if (!widget.getWidgetState) {
+          return state;
+        }
+
+        return widget.getWidgetState(state, {
+          helper,
+          searchParameters,
+        });
+      }, {}),
+    };
   }
 
   private setupRouting(state: SearchParameters): void {

src/lib/__tests__/InstantSearch-test.js

@@ -1029,7 +1029,9 @@ describe('createURL', () => {
 
     expect(search.createURL()).toBe('http://algolia.com');
     expect(router.createURL).toHaveBeenCalledWith({
-      query: 'Apple',
+      indexName: {
+        query: 'Apple',
+      },
     });
   });
 
@@ -1060,8 +1062,10 @@ describe('createURL', () => {
 
     expect(search.createURL({ page: 5 })).toBe('http://algolia.com');
     expect(router.createURL).toHaveBeenCalledWith({
-      query: 'Apple',
-      page: 5,
+      indexName: {
+        query: 'Apple',
+        page: 5,
+      },
     });
   });
 });

src/lib/__tests__/RoutingManager-test.ts

@@ -4,7 +4,7 @@ import qs from 'qs';
 import { createSearchClient } from '../../../test/mock/createSearchClient';
 import { createWidget } from '../../../test/mock/createWidget';
 import { runAllMicroTasks } from '../../../test/utils/runAllMicroTasks';
-import { Router, Widget, StateMapping, RouteState } from '../../types';
+import { Router, Widget, UiState, StateMapping, RouteState } from '../../types';
 import historyRouter from '../routers/history';
 import RoutingManager from '../RoutingManager';
 import instantsearch from '../main';
@@ -119,7 +119,7 @@ describe('RoutingManager', () => {
     test('reads the state of widgets with a getWidgetState implementation', () => {
       const searchClient = createSearchClient();
       const search = instantsearch({
-        indexName: '',
+        indexName: 'indexName',
         searchClient,
       });
 
@@ -135,7 +135,9 @@ describe('RoutingManager', () => {
       search.addWidget(widget);
 
       const actualInitialState = {
-        query: 'query',
+        indexName: {
+          query: 'query',
+        },
       };
 
       search.start();
@@ -156,7 +158,9 @@ describe('RoutingManager', () => {
         searchParameters: search.mainIndex.getHelper()!.state,
       });
 
-      expect(uiStates).toEqual(widgetState);
+      expect(uiStates).toEqual({
+        indexName: widgetState,
+      });
 
       expect(widget.getWidgetState).toHaveBeenCalledTimes(1);
       expect(widget.getWidgetState).toHaveBeenCalledWith(
@@ -171,7 +175,7 @@ describe('RoutingManager', () => {
     test('Does not read UI state from widgets without an implementation of getWidgetState', () => {
       const searchClient = createSearchClient();
       const search = instantsearch({
-        indexName: '',
+        indexName: 'indexName',
         searchClient,
       });
 
@@ -182,7 +186,9 @@ describe('RoutingManager', () => {
       search.start();
 
       const actualInitialState = {
-        query: 'query',
+        indexName: {
+          query: 'query',
+        },
       };
 
       const router = new RoutingManager({
@@ -201,15 +207,17 @@ describe('RoutingManager', () => {
         searchParameters: search.mainIndex.getHelper()!.state,
       });
 
-      expect(uiStates).toEqual({});
+      expect(uiStates).toEqual({
+        indexName: {},
+      });
     });
   });
 
   describe('getAllSearchParameters', () => {
     test('should get searchParameters from widget that implements getWidgetSearchParameters', () => {
       const searchClient = createSearchClient();
       const search = instantsearch({
-        indexName: '',
+        indexName: 'indexName',
         searchClient,
       });
 
@@ -221,7 +229,9 @@ describe('RoutingManager', () => {
       search.addWidget(widget);
 
       const actualInitialState = {
-        query: 'query',
+        indexName: {
+          query: 'query',
+        },
       };
 
       search.start();
@@ -299,7 +309,7 @@ describe('RoutingManager', () => {
       });
 
       const search = instantsearch({
-        indexName: 'instant_search',
+        indexName: 'indexName',
         searchClient,
         routing: {
           router,
@@ -330,7 +340,9 @@ describe('RoutingManager', () => {
 
         expect(router.write).toHaveBeenCalledTimes(1);
         expect(router.write).toHaveBeenCalledWith({
-          q: 'q',
+          indexName: {
+            q: 'q',
+          },
         });
 
         done();
@@ -340,15 +352,15 @@ describe('RoutingManager', () => {
     test('should update the searchParameters on router state update', done => {
       const searchClient = createSearchClient();
 
-      let onRouterUpdateCallback: (args: object) => void;
+      let onRouterUpdateCallback: (args: UiState) => void;
       const router = createFakeRouter({
         onUpdate: fn => {
           onRouterUpdateCallback = fn;
         },
       });
 
       const search = instantsearch({
-        indexName: 'instant_search',
+        indexName: 'indexName',
         searchClient,
         routing: {
           router,
@@ -358,9 +370,10 @@ describe('RoutingManager', () => {
       const widget = {
         render: jest.fn(),
         getWidgetSearchParameters: jest.fn((searchParameters, { uiState }) =>
-          searchParameters.setQuery(uiState.q)
+          searchParameters.setQuery(uiState.query)
         ),
       };
+
       search.addWidget(widget);
 
       search.start();
@@ -370,9 +383,11 @@ describe('RoutingManager', () => {
 
         expect(search.mainIndex.getHelper()!.state.query).toBeUndefined();
 
-        // this simulates a router update with a uiState of {q: 'a'}
+        // this simulates a router update with a uiState of {query: 'a'}
         onRouterUpdateCallback({
-          q: 'a',
+          indexName: {
+            query: 'a',
+          },
         });
 
         search.once('render', () => {
@@ -393,14 +408,21 @@ describe('RoutingManager', () => {
 
       const stateMapping = createFakeStateMapping({
         stateToRoute(uiState) {
-          return {
-            query: uiState.query && uiState.query.toUpperCase(),
-          };
+          return Object.keys(uiState).reduce((state, indexId) => {
+            const indexState = uiState[indexId];
+
+            return {
+              ...state,
+              [indexId]: {
+                query: indexState.query && indexState.query.toUpperCase(),
+              },
+            };
+          }, {});
         },
       });
 
       const search = instantsearch({
-        indexName: 'instant_search',
+        indexName: 'indexName',
         searchFunction: helper => {
           helper.setQuery('test').search();
         },
@@ -431,7 +453,9 @@ describe('RoutingManager', () => {
         expect(search.mainIndex.getHelper()!.state.query).toEqual('test');
 
         expect(router.write).toHaveBeenLastCalledWith({
-          query: 'TEST',
+          indexName: {
+            query: 'TEST',
+          },
         });
 
         done();
@@ -446,7 +470,7 @@ describe('RoutingManager', () => {
       });
 
       const search = instantsearch({
-        indexName: 'instant_search',
+        indexName: 'indexName',
         searchClient,
         routing: {
           stateMapping,
@@ -469,7 +493,9 @@ describe('RoutingManager', () => {
 
       expect(router.write).toHaveBeenCalledTimes(1);
       expect(router.write).toHaveBeenLastCalledWith({
-        query: 'Apple',
+        indexName: {
+          query: 'Apple',
+        },
       });
 
       await runAllMicroTasks();
@@ -481,7 +507,9 @@ describe('RoutingManager', () => {
 
       expect(router.write).toHaveBeenCalledTimes(2);
       expect(router.write).toHaveBeenLastCalledWith({
-        query: 'Apple',
+        indexName: {
+          query: 'Apple',
+        },
       });
     });
 
@@ -493,7 +521,7 @@ describe('RoutingManager', () => {
       });
 
       const search = instantsearch({
-        indexName: 'instant_search',
+        indexName: 'indexName',
         searchFunction(helper) {
           // Force the value of the query
           helper.setQuery('Apple iPhone').search();
@@ -518,7 +546,9 @@ describe('RoutingManager', () => {
 
       expect(router.write).toHaveBeenCalledTimes(1);
       expect(router.write).toHaveBeenLastCalledWith({
-        query: 'Apple iPhone',
+        indexName: {
+          query: 'Apple iPhone',
+        },
       });
 
       // Trigger getConfiguration
@@ -528,7 +558,9 @@ describe('RoutingManager', () => {
 
       expect(router.write).toHaveBeenCalledTimes(2);
       expect(router.write).toHaveBeenLastCalledWith({
-        query: 'Apple iPhone',
+        indexName: {
+          query: 'Apple iPhone',
+        },
       });
     });
 
@@ -548,7 +580,7 @@ describe('RoutingManager', () => {
       });
 
       const search = instantsearch({
-        indexName: 'instant_search',
+        indexName: 'indexName',
         searchClient,
         routing: {
           router,
@@ -571,15 +603,19 @@ describe('RoutingManager', () => {
 
       expect(router.write).toHaveBeenCalledTimes(1);
       expect(router.write).toHaveBeenLastCalledWith({
-        query: 'Apple',
+        indexName: {
+          query: 'Apple',
+        },
       });
 
       // Trigger an update - push a change
       fakeSearchBox.refine('Apple iPhone');
 
       expect(router.write).toHaveBeenCalledTimes(2);
       expect(router.write).toHaveBeenLastCalledWith({
-        query: 'Apple iPhone',
+        indexName: {
+          query: 'Apple iPhone',
+        },
       });
 
       await runAllMicroTasks();
@@ -596,7 +632,9 @@ describe('RoutingManager', () => {
 
       expect(router.write).toHaveBeenCalledTimes(3);
       expect(router.write).toHaveBeenLastCalledWith({
-        query: 'Apple',
+        indexName: {
+          query: 'Apple',
+        },
       });
     });
   });