From 68b20f487fcd54fd7dec11b4c494b6aa94a18516 Mon Sep 17 00:00:00 2001
From: Eunjae Lee <eunjae.lee@algolia.com>
Date: Tue, 7 Jul 2020 16:48:34 +0200
Subject: [PATCH] fix(infiniteHits): work with controlled mode (#4435)

* fix(infiniteHits): WIP

* chore(test): expect searchWithoutTriggeringOnStateChange to be called

* fix: always include `page` in uiState

* chore: fix lint error

* fix: return correct page from getWidgetState

* fix: do not add page to uiState if it's the first page

* test: fix test to expect empty uiState on first page

* fix: update condition in getWidgetState

* Revert "fix: update condition in getWidgetState"

This reverts commit c77770f0ed775b7de6973d21c4f80bd554a38144.
---
 .../__tests__/connectInfiniteHits-test.ts          | 14 ++++++++++----
 .../infinite-hits/connectInfiniteHits.ts           |  7 ++++---
 src/widgets/index/index.ts                         |  4 ++++
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/connectors/infinite-hits/__tests__/connectInfiniteHits-test.ts b/src/connectors/infinite-hits/__tests__/connectInfiniteHits-test.ts
index 05a933e8e2..0644e8f5a5 100644
--- a/src/connectors/infinite-hits/__tests__/connectInfiniteHits-test.ts
+++ b/src/connectors/infinite-hits/__tests__/connectInfiniteHits-test.ts
@@ -191,6 +191,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/infinite-hi
     const helper = algoliasearchHelper({} as SearchClient, '', {});
     helper.setPage(1);
     helper.search = jest.fn();
+    (helper as any).searchWithoutTriggeringOnStateChange = jest.fn();
     helper.emit = jest.fn();
 
     widget.init!(
@@ -227,7 +228,10 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/infinite-hi
     showPrevious();
     expect(helper.state.page).toBe(0);
     expect(helper.emit).not.toHaveBeenCalled();
-    expect(helper.search).toHaveBeenCalledTimes(1);
+    expect(helper.search).toHaveBeenCalledTimes(0);
+    expect(
+      (helper as any).searchWithoutTriggeringOnStateChange
+    ).toHaveBeenCalledTimes(1);
 
     // the results should be prepended if there is an decrement in page
     const previousHits = [
@@ -789,7 +793,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/infinite-hi
   });
 
   describe('getWidgetState', () => {
-    test('returns the `uiState` empty without `showPrevious` option', () => {
+    test('returns the `uiState` with `page` when `showPrevious` not given', () => {
       const render = jest.fn();
       const makeWidget = connectInfiniteHits(render);
       const helper = algoliasearchHelper(createSearchClient(), 'indexName', {
@@ -805,10 +809,12 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/infinite-hi
         }
       );
 
-      expect(actual).toEqual({});
+      expect(actual).toEqual({
+        page: 2,
+      });
     });
 
-    test('returns the `uiState` empty with `showPrevious` option on first page', () => {
+    test('returns the `uiState` without `page` on first page', () => {
       const render = jest.fn();
       const makeWidget = connectInfiniteHits(render);
       const helper = algoliasearchHelper(createSearchClient(), 'indexName', {
diff --git a/src/connectors/infinite-hits/connectInfiniteHits.ts b/src/connectors/infinite-hits/connectInfiniteHits.ts
index 82321752de..adb070d856 100644
--- a/src/connectors/infinite-hits/connectInfiniteHits.ts
+++ b/src/connectors/infinite-hits/connectInfiniteHits.ts
@@ -137,7 +137,6 @@ const connectInfiniteHits: InfiniteHitsConnector = function connectInfiniteHits(
     const {
       escapeHTML = true,
       transformItems = (items: any[]) => items,
-      showPrevious: hasShowPrevious = false,
       cache = getInMemoryCache(),
     } = widgetParams || ({} as typeof widgetParams);
     let cachedHits: InfiniteHitsCachedHits | undefined = undefined;
@@ -158,7 +157,7 @@ const connectInfiniteHits: InfiniteHitsConnector = function connectInfiniteHits(
           ...helper.state,
           page: getFirstReceivedPage() - 1,
         })
-        .search();
+        .searchWithoutTriggeringOnStateChange();
     };
     const getShowMore = (helper: Helper): (() => void) => () => {
       helper.setPage(getLastReceivedPage() + 1).search();
@@ -305,7 +304,9 @@ const connectInfiniteHits: InfiniteHitsConnector = function connectInfiniteHits(
       getWidgetState(uiState, { searchParameters }) {
         const page = searchParameters.page || 0;
 
-        if (!hasShowPrevious || !page) {
+        if (!page) {
+          // return without adding `page` to uiState
+          // because we don't want `page=1` in the URL
           return uiState;
         }
 
diff --git a/src/widgets/index/index.ts b/src/widgets/index/index.ts
index ae1d92bfca..fffd503849 100644
--- a/src/widgets/index/index.ts
+++ b/src/widgets/index/index.ts
@@ -365,6 +365,10 @@ const index = (props: IndexProps): Index => {
         return mainHelper.search();
       };
 
+      (helper as any).searchWithoutTriggeringOnStateChange = () => {
+        return mainHelper.search();
+      };
+
       // We use the same pattern for the `searchForFacetValues`.
       helper.searchForFacetValues = (
         facetName,