feat(infiniteHits): add previous button

package.json

@@ -130,19 +130,19 @@
     },
     {
       "path": "packages/react-instantsearch/dist/umd/Connectors.min.js",
-      "maxSize": "40.50 kB"
+      "maxSize": "40.75 kB"
     },
     {
       "path": "packages/react-instantsearch/dist/umd/Dom.min.js",
       "maxSize": "63.00 kB"
     },
     {
       "path": "packages/react-instantsearch-core/dist/umd/ReactInstantSearchCore.min.js",
-      "maxSize": "41.25 kB"
+      "maxSize": "41.50 kB"
     },
     {
       "path": "packages/react-instantsearch-dom/dist/umd/ReactInstantSearchDOM.min.js",
-      "maxSize": "62.75 kB"
+      "maxSize": "63.00 kB"
     },
     {
       "path": "packages/react-instantsearch-dom-maps/dist/umd/ReactInstantSearchDOMMaps.min.js",

packages/react-instantsearch-core/src/connectors/__tests__/connectInfiniteHits.js

@@ -8,6 +8,7 @@ describe('connectInfiniteHits', () => {
       context: {
         ais: {
           mainTargetedIndex: 'index',
+          onInternalStateUpdate: jest.fn(),
         },
       },
     });
@@ -23,7 +24,11 @@ describe('connectInfiniteHits', () => {
 
       expect(props).toEqual({
         hits: hits.map(hit => expect.objectContaining(hit)),
+        hasPrevious: false,
         hasMore: true,
+        refine: expect.any(Function),
+        refinePrevious: expect.any(Function),
+        refineNext: expect.any(Function),
       });
     });
 
@@ -55,6 +60,34 @@ describe('connectInfiniteHits', () => {
       expect(res2.hasMore).toBe(true);
     });
 
+    it('prepend hits internally', () => {
+      const context = createSingleIndexContext();
+      const getProvidedProps = connect.getProvidedProps.bind(context);
+
+      const hits = [{}, {}];
+      const hits0 = [{}, {}];
+      const res1 = getProvidedProps(null, null, {
+        results: { hits, page: 2, hitsPerPage: 2, nbPages: 3 },
+      });
+
+      expect(res1.hits).toEqual(hits.map(hit => expect.objectContaining(hit)));
+      expect(res1.hasPrevious).toBe(true);
+
+      const res0 = getProvidedProps(null, null, {
+        results: {
+          hits: hits0,
+          page: 1,
+          hitsPerPage: 2,
+          nbPages: 3,
+        },
+      });
+
+      expect(res0.hits).toEqual(
+        [...hits0, ...hits].map(hit => expect.objectContaining(hit))
+      );
+      expect(res0.hasPrevious).toBe(true);
+    });
+
     it('accumulate hits internally while changing hitsPerPage configuration', () => {
       const context = createSingleIndexContext();
       const getProvidedProps = connect.getProvidedProps.bind(context);
@@ -373,29 +406,56 @@ describe('connectInfiniteHits', () => {
       expect(props.hasMore).toBe(false);
     });
 
-    it('adds 1 to page when calling refine', () => {
+    it('adds 1 to page when calling refineNext', () => {
       const context = createSingleIndexContext();
-      const refine = connect.refine.bind(context);
+      const getProvidedProps = connect.getProvidedProps.bind(context);
 
-      const props = {};
-      const state0 = {};
+      const hits = [{}, {}];
+
+      const props = getProvidedProps(
+        {},
+        {},
+        {
+          results: {
+            hits,
+            page: 2,
+            hitsPerPage: 2,
+            nbPages: 3,
+          },
+        }
+      );
 
-      const state1 = refine(props, state0);
-      expect(state1).toEqual({ page: 2 });
+      props.refineNext.apply(context);
 
-      const state2 = refine(props, state1);
-      expect(state2).toEqual({ page: 3 });
+      expect(
+        context.context.ais.onInternalStateUpdate.mock.calls[0][0]
+      ).toEqual({ page: 4 });
     });
 
-    it('automatically converts String state to Number', () => {
+    it('removes 1 from page when calling refinePrevious', () => {
       const context = createSingleIndexContext();
-      const refine = connect.refine.bind(context);
+      const getProvidedProps = connect.getProvidedProps.bind(context);
 
-      const props = {};
-      const state0 = { page: '0' };
+      const hits = [{}, {}];
 
-      const state1 = refine(props, state0);
-      expect(state1).toEqual({ page: 1 });
+      const props = getProvidedProps(
+        {},
+        {},
+        {
+          results: {
+            hits,
+            page: 2,
+            hitsPerPage: 2,
+            nbPages: 3,
+          },
+        }
+      );
+
+      props.refinePrevious.apply(context);
+
+      expect(
+        context.context.ais.onInternalStateUpdate.mock.calls[0][0]
+      ).toEqual({ page: 2 });
     });
 
     it('expect to always return an array of hits', () => {
@@ -418,7 +478,11 @@ describe('connectInfiniteHits', () => {
 
       const expectation = {
         hits: [{}, {}, {}].map(hit => expect.objectContaining(hit)),
+        hasPrevious: true,
         hasMore: true,
+        refine: expect.any(Function),
+        refinePrevious: expect.any(Function),
+        refineNext: expect.any(Function),
       };
 
       const actual = getProvidedProps(props, searchState, searchResults);
@@ -450,7 +514,11 @@ describe('connectInfiniteHits', () => {
 
       expect(props).toEqual({
         hits: hits.map(hit => expect.objectContaining(hit)),
+        hasPrevious: false,
         hasMore: true,
+        refine: expect.any(Function),
+        refinePrevious: expect.any(Function),
+        refineNext: expect.any(Function),
       });
     });
 
@@ -480,6 +548,32 @@ describe('connectInfiniteHits', () => {
       expect(res2.hasMore).toBe(true);
     });
 
+    it('prepend hits internally', () => {
+      const context = createMultiIndexContext();
+      const getProvidedProps = connect.getProvidedProps.bind(context);
+
+      const hits = [{}, {}];
+      const hits0 = [{}, {}];
+
+      const res1 = getProvidedProps(null, null, {
+        results: { second: { hits, page: 2, hitsPerPage: 2, nbPages: 3 } },
+      });
+
+      expect(res1.hits).toEqual(hits.map(hit => expect.objectContaining(hit)));
+      expect(res1.hasPrevious).toBe(true);
+
+      const res0 = getProvidedProps(null, null, {
+        results: {
+          second: { hits: hits0, page: 1, hitsPerPage: 2, nbPages: 3 },
+        },
+      });
+
+      expect(res0.hits).toEqual(
+        [...hits0, ...hits].map(hit => expect.objectContaining(hit))
+      );
+      expect(res0.hasPrevious).toBe(true);
+    });
+
     it('accumulate hits internally while changing hitsPerPage configuration', () => {
       const context = createMultiIndexContext();
       const getProvidedProps = connect.getProvidedProps.bind(context);
@@ -530,6 +624,44 @@ describe('connectInfiniteHits', () => {
       expect(res3.hasMore).toBe(true);
     });
 
+    it('should not accumulate hits internally while changing query', () => {
+      const context = createMultiIndexContext();
+      const getProvidedProps = connect.getProvidedProps.bind(context);
+
+      const hits = [{}, {}, {}, {}, {}, {}];
+      const hits2 = [{}, {}, {}, {}, {}, {}];
+
+      const res1 = getProvidedProps(null, null, {
+        results: {
+          second: {
+            hits,
+            page: 0,
+            hitsPerPage: 6,
+            nbPages: 10,
+            _state: { page: 0, query: 'a' },
+          },
+        },
+      });
+
+      expect(res1.hits).toEqual(hits.map(hit => expect.objectContaining(hit)));
+      expect(res1.hasMore).toBe(true);
+
+      const res2 = getProvidedProps(null, null, {
+        results: {
+          second: {
+            hits: hits2,
+            page: 0,
+            hitsPerPage: 6,
+            nbPages: 10,
+            _state: { page: 0, query: 'b' },
+          },
+        },
+      });
+
+      expect(res2.hits).toEqual(hits2.map(hit => expect.objectContaining(hit)));
+      expect(res2.hasMore).toBe(true);
+    });
+
     it('should not reset while accumulating results', () => {
       const context = createMultiIndexContext();
       const getProvidedProps = connect.getProvidedProps.bind(context);

packages/react-instantsearch-core/src/connectors/connectInfiniteHits.js

@@ -1,3 +1,5 @@
+import { isEqual } from 'lodash';
+
 import createConnector from '../core/createConnector';
 import {
   getCurrentRefinementValue,
@@ -45,39 +47,69 @@ export default createConnector({
     const results = getResults(searchResults, this.context);
 
     this._allResults = this._allResults || [];
-    this._previousPage = this._previousPage || 0;
+    this._prevState = this._prevState || '';
 
     if (!results) {
       return {
         hits: [],
+        hasPrevious: false,
         hasMore: false,
+        refine: () => {},
+        refinePrevious: () => {},
+        refineNext: () => {},
       };
     }
 
-    const { hits, hitsPerPage, page, nbPages } = results;
+    const {
+      page,
+      hits,
+      hitsPerPage,
+      nbPages,
+      _state: { page: p, ...currentState } = {},
+    } = results;
 
     const hitsWithPositions = addAbsolutePositions(hits, hitsPerPage, page);
     const hitsWithPositionsAndQueryID = addQueryID(
       hitsWithPositions,
       results.queryID
     );
 
-    if (page === 0) {
-      this._allResults = hitsWithPositionsAndQueryID;
-    } else if (page > this._previousPage) {
+    if (
+      this._firstReceivedPage === undefined ||
+      !isEqual(currentState, this._prevState)
+    ) {
+      this._allResults = [...hitsWithPositionsAndQueryID];
+      this._firstReceivedPage = page;
+      this._lastReceivedPage = page;
+    } else if (this._lastReceivedPage < page) {
       this._allResults = [...this._allResults, ...hitsWithPositionsAndQueryID];
-    } else if (page < this._previousPage) {
-      this._allResults = hitsWithPositionsAndQueryID;
+      this._lastReceivedPage = page;
+    } else if (this._firstReceivedPage > page) {
+      this._allResults = [...hitsWithPositionsAndQueryID, ...this._allResults];
+      this._firstReceivedPage = page;
     }
 
+    this._prevState = currentState;
+
+    const hasPrevious = this._firstReceivedPage > 0;
     const lastPageIndex = nbPages - 1;
     const hasMore = page < lastPageIndex;
-
-    this._previousPage = page;
+    const refine = index => {
+      const id = getId();
+      const nextValue = { [id]: index };
+      const resetPage = false;
+      this.context.ais.onInternalStateUpdate(
+        refineValue(searchState, nextValue, this.context, resetPage)
+      );
+    };
 
     return {
       hits: this._allResults,
+      hasPrevious,
       hasMore,
+      refine: () => refine(this._lastReceivedPage + 2),
+      refinePrevious: () => refine(this._firstReceivedPage),
+      refineNext: () => refine(this._lastReceivedPage + 2),
     };
   },
 
@@ -86,12 +118,4 @@ export default createConnector({
       page: getCurrentRefinement(props, searchState, this.context) - 1,
     });
   },
-
-  refine(props, searchState) {
-    const id = getId();
-    const nextPage = getCurrentRefinement(props, searchState, this.context) + 1;
-    const nextValue = { [id]: nextPage };
-    const resetPage = false;
-    return refineValue(searchState, nextValue, this.context, resetPage);
-  },
 });