fix: provide both getWidgetRenderState and getRenderState in conn…

…ectors (#4518) * WIP * remove temporary implementation * rename getWidgetRenderState to getRenderState * fix wrong parameter name * update panel * update comment * chore: remove panel-related code * fixing types WIP * fix type * do not cast the return of getWidgetRenderState * Revert "do not cast the return of getWidgetRenderState" This reverts commit 614bc53. * Revert "fix type" This reverts commit 54e31fc. * add TWidgetRenderState to connector * add generics to Widget for getWidgetRenderState * fix to allow nullish getWidgetRenderState when unknown * remove exclamation marks * remove the type for widgetParams (was experimental) * make getRenderState optional for widgets with default generics * update other connectors to follow new connector type * update types in tests * add comment * do not declare individual widget render state types
algolia · Nov 30, 2020 · a4604a2 · a4604a2
1 parent ea4add4
commit a4604a2
Show file tree

Hide file tree

Showing 18 changed files with 234 additions and 214 deletions.
diff --git a/src/connectors/autocomplete/__tests__/connectAutocomplete-test.ts b/src/connectors/autocomplete/__tests__/connectAutocomplete-test.ts
@@ -429,17 +429,14 @@ search.addWidgets([
     });
   });
 
-  describe('getWidgetRenderState', () => {
+  describe('getRenderState', () => {
     test('returns the render state', () => {
       const renderFn = jest.fn();
       const unmountFn = jest.fn();
       const createAutocomplete = connectAutocomplete(renderFn, unmountFn);
       const autocomplete = createAutocomplete({});
 
-      const renderState1 = autocomplete.getWidgetRenderState!(
-        {},
-        createInitOptions()
-      );
+      const renderState1 = autocomplete.getRenderState({}, createInitOptions());
 
       expect(renderState1.autocomplete).toEqual({
         currentRefinement: '',
@@ -450,7 +447,7 @@ search.addWidgets([
 
       autocomplete.init!(createInitOptions());
 
-      const renderState2 = autocomplete.getWidgetRenderState!(
+      const renderState2 = autocomplete.getRenderState(
         {},
         createRenderOptions()
       );
@@ -474,7 +471,7 @@ search.addWidgets([
 
       autocomplete.init!(createInitOptions());
 
-      const renderState = autocomplete.getWidgetRenderState!(
+      const renderState = autocomplete.getRenderState(
         {},
         createRenderOptions({ helper })
       );

diff --git a/src/connectors/autocomplete/connectAutocomplete.ts b/src/connectors/autocomplete/connectAutocomplete.ts
@@ -110,35 +110,40 @@ search.addWidgets([
       $$type: 'ais.autocomplete',
 
       init(initOptions) {
-        const { helper, renderState, instantSearchInstance } = initOptions;
+        const { helper, instantSearchInstance } = initOptions;
         connectorState.refine = (query: string) => {
           helper.setQuery(query).search();
         };
 
         renderFn(
           {
-            ...this.getWidgetRenderState!(renderState, initOptions)
-              .autocomplete!,
+            ...this.getWidgetRenderState(initOptions),
             instantSearchInstance,
           },
           true
         );
       },
 
       render(renderOptions) {
-        const { renderState, instantSearchInstance } = renderOptions;
+        const { instantSearchInstance } = renderOptions;
 
         renderFn(
           {
-            ...this.getWidgetRenderState!(renderState, renderOptions)
-              .autocomplete!,
+            ...this.getWidgetRenderState(renderOptions),
             instantSearchInstance,
           },
           false
         );
       },
 
-      getWidgetRenderState(renderState, { helper, scopedResults }) {
+      getRenderState(renderState, renderOptions) {
+        return {
+          ...renderState,
+          autocomplete: this.getWidgetRenderState(renderOptions),
+        };
+      },
+
+      getWidgetRenderState({ helper, scopedResults }) {
         const indices = scopedResults.map(scopedResult => {
           // We need to escape the hits because highlighting
           // exposes HTML tags to the end-user.
@@ -164,13 +169,10 @@ search.addWidgets([
         });
 
         return {
-          ...renderState,
-          autocomplete: {
-            currentRefinement: helper.state.query || '',
-            indices,
-            refine: connectorState.refine!,
-            widgetParams,
-          },
+          currentRefinement: helper.state.query || '',
+          indices,
+          refine: connectorState.refine!,
+          widgetParams,
         };
       },
 

diff --git a/src/connectors/breadcrumb/__tests__/connectBreadcrumb-test.ts b/src/connectors/breadcrumb/__tests__/connectBreadcrumb-test.ts
@@ -67,7 +67,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/breadcrumb/
     );
   });
 
-  describe('getWidgetRenderState', () => {
+  describe('getRenderState', () => {
     test('returns the render state', () => {
       const renderFn = jest.fn();
       const unmountFn = jest.fn();
@@ -85,7 +85,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/breadcrumb/
 
       helper.toggleRefinement('category', 'Decoration');
 
-      const renderState1 = breadcrumb.getWidgetRenderState!(
+      const renderState1 = breadcrumb.getRenderState(
         {
           breadcrumb: {
             anotherCategory: {
@@ -119,7 +119,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/breadcrumb/
 
       breadcrumb.init!(createInitOptions({ helper }));
 
-      const renderState2 = breadcrumb.getWidgetRenderState!(
+      const renderState2 = breadcrumb.getRenderState(
         {
           breadcrumb: {
             anotherCategory: {

diff --git a/src/connectors/breadcrumb/connectBreadcrumb.ts b/src/connectors/breadcrumb/connectBreadcrumb.ts
@@ -150,8 +150,7 @@ const connectBreadcrumb: BreadcrumbConnector = function connectBreadcrumb(
 
         renderFn(
           {
-            ...this.getWidgetRenderState!(initOptions.renderState, initOptions)
-              .breadcrumb![hierarchicalFacetName],
+            ...this.getWidgetRenderState(initOptions),
             instantSearchInstance: initOptions.instantSearchInstance,
           },
           true
@@ -161,10 +160,7 @@ const connectBreadcrumb: BreadcrumbConnector = function connectBreadcrumb(
       render(renderOptions) {
         renderFn(
           {
-            ...this.getWidgetRenderState!(
-              renderOptions.renderState,
-              renderOptions
-            ).breadcrumb![hierarchicalFacetName],
+            ...this.getWidgetRenderState(renderOptions),
             instantSearchInstance: renderOptions.instantSearchInstance,
           },
           false
@@ -175,7 +171,17 @@ const connectBreadcrumb: BreadcrumbConnector = function connectBreadcrumb(
         unmountFn();
       },
 
-      getWidgetRenderState(renderState, { results, state }) {
+      getRenderState(renderState, renderOptions) {
+        return {
+          ...renderState,
+          breadcrumb: {
+            ...renderState.breadcrumb,
+            [hierarchicalFacetName]: this.getWidgetRenderState(renderOptions),
+          },
+        };
+      },
+
+      getWidgetRenderState({ results, state }) {
         function getItems() {
           if (!results) {
             return [];
@@ -196,17 +202,11 @@ const connectBreadcrumb: BreadcrumbConnector = function connectBreadcrumb(
         const items = getItems();
 
         return {
-          ...renderState,
-          breadcrumb: {
-            ...renderState.breadcrumb,
-            [hierarchicalFacetName]: {
-              canRefine: items.length > 0,
-              createURL: connectorState.createURL,
-              items,
-              refine: connectorState.refine,
-              widgetParams,
-            },
-          },
+          canRefine: items.length > 0,
+          createURL: connectorState.createURL,
+          items,
+          refine: connectorState.refine,
+          widgetParams,
         };
       },
 

diff --git a/src/connectors/clear-refinements/__tests__/connectClearRefinements-test.ts b/src/connectors/clear-refinements/__tests__/connectClearRefinements-test.ts
@@ -124,7 +124,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/clear-refin
       ).not.toThrow();
     });
 
-    describe('getWidgetRenderState', () => {
+    describe('getRenderState', () => {
       test('returns the render state', () => {
         const renderFn = jest.fn();
         const unmountFn = jest.fn();
@@ -144,7 +144,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/clear-refin
           ],
         });
 
-        const renderState1 = clearRefinements.getWidgetRenderState!(
+        const renderState1 = clearRefinements.getRenderState(
           {},
           createInitOptions()
         );
@@ -160,7 +160,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/clear-refin
 
         helper.toggleRefinement('category', 'Decoration');
 
-        const renderState2 = clearRefinements.getWidgetRenderState!(
+        const renderState2 = clearRefinements.getRenderState(
           {},
           createRenderOptions({
             helper,

diff --git a/src/connectors/clear-refinements/connectClearRefinements.ts b/src/connectors/clear-refinements/connectClearRefinements.ts
@@ -99,20 +99,19 @@ const connectClearRefinements: ClearRefinementsConnector = function connectClear
       $$type: 'ais.clearRefinements',
 
       init(initOptions) {
-        const { renderState, instantSearchInstance } = initOptions;
+        const { instantSearchInstance } = initOptions;
 
         renderFn(
           {
-            ...this.getWidgetRenderState!(renderState, initOptions)
-              .clearRefinements!,
+            ...this.getWidgetRenderState(initOptions),
             instantSearchInstance,
           },
           true
         );
       },
 
       render(renderOptions) {
-        const { createURL, renderState, instantSearchInstance } = renderOptions;
+        const { createURL, instantSearchInstance } = renderOptions;
 
         connectorState.refine = () => {
           connectorState.attributesToClear.forEach(
@@ -145,8 +144,7 @@ const connectClearRefinements: ClearRefinementsConnector = function connectClear
 
         renderFn(
           {
-            ...this.getWidgetRenderState!(renderState, renderOptions)
-              .clearRefinements!,
+            ...this.getWidgetRenderState(renderOptions),
             instantSearchInstance,
           },
           false
@@ -157,7 +155,14 @@ const connectClearRefinements: ClearRefinementsConnector = function connectClear
         unmountFn();
       },
 
-      getWidgetRenderState(renderState, { scopedResults }) {
+      getRenderState(renderState, renderOptions) {
+        return {
+          ...renderState,
+          clearRefinements: this.getWidgetRenderState(renderOptions),
+        };
+      },
+
+      getWidgetRenderState({ scopedResults }) {
         connectorState.attributesToClear = scopedResults.reduce<
           Array<ReturnType<typeof getAttributesToClear>>
         >((results, scopedResult) => {
@@ -172,15 +177,12 @@ const connectClearRefinements: ClearRefinementsConnector = function connectClear
         }, []);
 
         return {
-          ...renderState,
-          clearRefinements: {
-            hasRefinements: connectorState.attributesToClear.some(
-              attributeToClear => attributeToClear.items.length > 0
-            ),
-            refine: cachedRefine,
-            createURL: cachedCreateURL,
-            widgetParams,
-          },
+          hasRefinements: connectorState.attributesToClear.some(
+            attributeToClear => attributeToClear.items.length > 0
+          ),
+          refine: cachedRefine,
+          createURL: cachedCreateURL,
+          widgetParams,
         };
       },
     };

diff --git a/src/connectors/configure/__tests__/connectConfigure-test.ts b/src/connectors/configure/__tests__/connectConfigure-test.ts
@@ -241,7 +241,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/configure/j
     );
   });
 
-  describe('getWidgetRenderState', () => {
+  describe('getRenderState', () => {
     test('returns the render state', () => {
       const renderFn = jest.fn();
       const unmountFn = jest.fn();
@@ -250,10 +250,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/configure/j
         searchParameters: { facetFilters: ['brand:Samsung'] },
       });
 
-      const renderState1 = configure.getWidgetRenderState!(
-        {},
-        createInitOptions()
-      );
+      const renderState1 = configure.getRenderState({}, createInitOptions());
 
       expect(renderState1.configure).toEqual({
         refine: undefined,
@@ -264,10 +261,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/configure/j
 
       configure.init!(createInitOptions());
 
-      const renderState2 = configure.getWidgetRenderState!(
-        {},
-        createRenderOptions()
-      );
+      const renderState2 = configure.getRenderState({}, createRenderOptions());
 
       expect(renderState2.configure).toEqual({
         refine: expect.any(Function),

diff --git a/src/connectors/configure/connectConfigure.ts b/src/connectors/configure/connectConfigure.ts
@@ -100,26 +100,25 @@ const connectConfigure: ConfigureConnector = function connectConfigure(
       $$type: 'ais.configure',
 
       init(initOptions) {
-        const { renderState, helper, instantSearchInstance } = initOptions;
+        const { helper, instantSearchInstance } = initOptions;
 
         connectorState.refine = refine(helper);
 
         renderFn(
           {
-            ...this.getWidgetRenderState!(renderState, initOptions).configure!,
+            ...this.getWidgetRenderState(initOptions),
             instantSearchInstance,
           },
           true
         );
       },
 
       render(renderOptions) {
-        const { renderState, instantSearchInstance } = renderOptions;
+        const { instantSearchInstance } = renderOptions;
 
         renderFn(
           {
-            ...this.getWidgetRenderState!(renderState, renderOptions)
-              .configure!,
+            ...this.getWidgetRenderState(renderOptions),
             instantSearchInstance,
           },
           false
@@ -132,13 +131,21 @@ const connectConfigure: ConfigureConnector = function connectConfigure(
         return getInitialSearchParameters(state, widgetParams);
       },
 
-      getWidgetRenderState(renderState) {
+      getRenderState(renderState, renderOptions) {
         return {
           ...renderState,
-          configure: {
-            refine: connectorState.refine!,
-            widgetParams,
-          },
+          // Even if there are multiple configure widgets,
+          // the last configure widget will override the ones before.
+          // If we want to merge widgetRenderState of multiple configure widgets,
+          // we should modify this part.
+          configure: this.getWidgetRenderState(renderOptions),
+        };
+      },
+
+      getWidgetRenderState() {
+        return {
+          refine: connectorState.refine!,
+          widgetParams,
         };
       },