fix(infiniteHits): fix wrong behavior of showPrevious regarding cachedHits (#4725)

Author: Eunjae Lee

src/connectors/infinite-hits/__tests__/connectInfiniteHits-test.ts

@@ -255,6 +255,38 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/infinite-hi
     expect(thirdRenderOptions.results).toEqual(previousResults);
   });
 
+  it('Renders previous page after showing next page', () => {
+    const renderFn = jest.fn();
+    const makeWidget = connectInfiniteHits(renderFn);
+    const widget = makeWidget({});
+
+    const helper = algoliasearchHelper(createSearchClient(), '', {});
+    helper.setPage(4);
+    helper.overrideStateWithoutTriggeringChangeEvent = jest.fn(() => helper);
+    helper.searchWithoutTriggeringOnStateChange = jest.fn();
+
+    widget.init!(
+      createInitOptions({
+        state: helper.state,
+        helper,
+      })
+    );
+
+    const { showMore, showPrevious } = widget.getWidgetRenderState(
+      createRenderOptions({
+        state: helper.state,
+        helper,
+      })
+    );
+    showMore();
+    expect(helper.state.page).toBe(5);
+
+    showPrevious();
+    expect(
+      helper.overrideStateWithoutTriggeringChangeEvent
+    ).toHaveBeenCalledWith(expect.objectContaining({ page: 3 }));
+  });
+
   it('Provides the hits and flush hists cache on query changes', () => {
     const renderFn = jest.fn();
     const makeWidget = connectInfiniteHits(renderFn);

src/connectors/infinite-hits/connectInfiniteHits.ts

@@ -188,25 +188,29 @@ const connectInfiniteHits: InfiniteHitsConnector = function connectInfiniteHits(
       }
     };
 
-    const getShowPrevious = (
-      helper: Helper,
-      cachedHits: InfiniteHitsCachedHits
-    ): (() => void) => () => {
+    const getShowPrevious = (helper: Helper): (() => void) => () => {
       // Using the helper's `overrideStateWithoutTriggeringChangeEvent` method
       // avoid updating the browser URL when the user displays the previous page.
       helper
         .overrideStateWithoutTriggeringChangeEvent({
           ...helper.state,
-          page: getFirstReceivedPage(helper.state, cachedHits) - 1,
+          page:
+            getFirstReceivedPage(
+              helper.state,
+              cache.read({ state: helper.state }) || {}
+            ) - 1,
         })
         .searchWithoutTriggeringOnStateChange();
     };
-    const getShowMore = (
-      helper: Helper,
-      cachedHits: InfiniteHitsCachedHits
-    ): (() => void) => () => {
+
+    const getShowMore = (helper: Helper): (() => void) => () => {
       helper
-        .setPage(getLastReceivedPage(helper.state, cachedHits) + 1)
+        .setPage(
+          getLastReceivedPage(
+            helper.state,
+            cache.read({ state: helper.state }) || {}
+          ) + 1
+        )
         .search();
     };
 
@@ -252,8 +256,8 @@ const connectInfiniteHits: InfiniteHitsConnector = function connectInfiniteHits(
         const cachedHits = cache.read({ state }) || {};
 
         if (!results) {
-          showPrevious = getShowPrevious(helper, cachedHits);
-          showMore = getShowMore(helper, cachedHits);
+          showPrevious = getShowPrevious(helper);
+          showMore = getShowMore(helper);
           sendEvent = createSendEventForHits({
             instantSearchInstance,
             index: helper.getIndex(),