feat(index): add child indices to UiState correctly

Before this change, UiState was merging the indexIds directly with the other state, meaning it's very hard to do changes like IFW-933, which filter out the current UiState, as well as making routing later more easy to write (IFW-941 specifically) Merging this will prompt an update to #4070
algolia · Aug 26, 2019 · 5dc2dcb · 5dc2dcb
1 parent f69ea26
commit 5dc2dcb
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 56 deletions.
diff --git a/src/types/widget.ts b/src/types/widget.ts
@@ -101,6 +101,9 @@ export type UiState = {
   sortBy?: string;
   page?: number;
   hitsPerPage?: number;
+  indices?: {
+    [indexId: string]: UiState;
+  };
 };
 
 /**

diff --git a/src/widgets/index/__tests__/index-test.ts b/src/widgets/index/__tests__/index-test.ts
@@ -1007,21 +1007,23 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/index/js/"
           .setQueryParameter('page', 4);
 
         expect(level0.getWidgetState({})).toEqual({
-          level0IndexName: {
-            query: 'Apple',
-            page: 1,
-          },
-          level1IndexName: {
-            query: 'Apple iPhone',
-            page: 2,
-          },
-          level2IndexName: {
-            query: 'Apple iPhone XS',
-            page: 3,
-          },
-          level3IndexName: {
-            query: 'Apple iPhone XS Red',
-            page: 4,
+          indices: {
+            level0IndexName: {
+              query: 'Apple',
+              page: 1,
+            },
+            level1IndexName: {
+              query: 'Apple iPhone',
+              page: 2,
+            },
+            level2IndexName: {
+              query: 'Apple iPhone XS',
+              page: 3,
+            },
+            level3IndexName: {
+              query: 'Apple iPhone XS Red',
+              page: 4,
+            },
           },
         });
 
@@ -1032,17 +1034,19 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/index/js/"
           .search();
 
         expect(level0.getWidgetState({})).toEqual({
-          level0IndexName: {
-            query: 'Hey',
-          },
-          level1IndexName: {
-            query: 'Apple iPhone',
-          },
-          level2IndexName: {
-            query: 'Apple iPhone XS',
-          },
-          level3IndexName: {
-            query: 'Apple iPhone XS Red',
+          indices: {
+            level0IndexName: {
+              query: 'Hey',
+            },
+            level1IndexName: {
+              query: 'Apple iPhone',
+            },
+            level2IndexName: {
+              query: 'Apple iPhone XS',
+            },
+            level3IndexName: {
+              query: 'Apple iPhone XS Red',
+            },
           },
         });
       });
@@ -1328,9 +1332,11 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/index/js/"
           .setQueryParameter('page', 5);
 
         expect(instance.getWidgetState({})).toEqual({
-          indexName: {
-            query: 'Apple',
-            page: 5,
+          indices: {
+            indexName: {
+              query: 'Apple',
+              page: 5,
+            },
           },
         });
       });
@@ -1362,7 +1368,9 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/index/js/"
         );
 
         expect(instance.getWidgetState({})).toEqual({
-          indexName: {},
+          indices: {
+            indexName: {},
+          },
         });
       });
 
@@ -1427,43 +1435,49 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/index/js/"
           .setQueryParameter('page', 9);
 
         expect(level0.getWidgetState({})).toEqual({
-          level0IndexName: {
-            query: 'Apple',
-            page: 5,
-          },
-          level1IndexName: {
-            query: 'Apple iPhone',
-            page: 7,
-          },
-          level2IndexName: {
-            query: 'Apple iPhone 5S',
-            page: 9,
+          indices: {
+            level0IndexName: {
+              query: 'Apple',
+              page: 5,
+            },
+            level1IndexName: {
+              query: 'Apple iPhone',
+              page: 7,
+            },
+            level2IndexName: {
+              query: 'Apple iPhone 5S',
+              page: 9,
+            },
+            level3IndexName: {},
           },
-          level3IndexName: {},
         });
 
         expect(level1.getWidgetState({})).toEqual({
-          level1IndexName: {
-            query: 'Apple iPhone',
-            page: 7,
-          },
-          level2IndexName: {
-            query: 'Apple iPhone 5S',
-            page: 9,
+          indices: {
+            level1IndexName: {
+              query: 'Apple iPhone',
+              page: 7,
+            },
+            level2IndexName: {
+              query: 'Apple iPhone 5S',
+              page: 9,
+            },
+            level3IndexName: {},
           },
-          level3IndexName: {},
         });
 
         expect(level2.getWidgetState({})).toEqual({
-          level2IndexName: {
-            query: 'Apple iPhone 5S',
-            page: 9,
+          indices: {
+            level2IndexName: {
+              query: 'Apple iPhone 5S',
+              page: 9,
+            },
+            level3IndexName: {},
           },
-          level3IndexName: {},
         });
 
         expect(level3.getWidgetState({})).toEqual({
-          level3IndexName: {},
+          indices: { level3IndexName: {} },
         });
       });
     });

diff --git a/src/widgets/index/index.ts b/src/widgets/index/index.ts
@@ -393,7 +393,10 @@ const index = (props: IndexProps): Index => {
             innerIndex.getWidgetState(previousUiState),
           {
             ...uiState,
-            [this.getIndexId()]: localUiState,
+            indices: {
+              ...uiState.indices,
+              [this.getIndexId()]: localUiState,
+            },
           }
         );
     },