From 2e6137b5bd659ee0efdbb6193e257709cc5a2199 Mon Sep 17 00:00:00 2001
From: Yannick Croissant <yannick.croissant@gmail.com>
Date: Mon, 15 Apr 2019 18:32:31 +0200
Subject: [PATCH] feat(infiniteHits): add previous button (#3675)

---
 .storybook/MemoryRouter.ts                    |  27 ++
 .storybook/preview-head.html                  |   2 +-
 src/components/InfiniteHits/InfiniteHits.js   |  25 +-
 .../__tests__/InfiniteHits-test.js            |  98 +++++
 .../__snapshots__/InfiniteHits-test.js.snap   |  96 +++++
 .../connectInfiniteHits-test.js.snap          | 121 +++++++
 .../__tests__/connectInfiniteHits-test.js     | 334 +++++++++++++++++-
 .../infinite-hits/connectInfiniteHits.js      |  78 +++-
 .../__snapshots__/infinite-hits-test.js.snap  |  37 +-
 .../__tests__/defaultTemplates-test.js        |   6 +
 .../__tests__/infinite-hits-test.js           |  44 +++
 src/widgets/infinite-hits/defaultTemplates.js |   1 +
 src/widgets/infinite-hits/infinite-hits.js    |  34 +-
 stories/infinite-hits.stories.js              |  22 ++
 website/examples/calendar-widget/index.html   |   2 +-
 website/examples/e-commerce/index.html        |   2 +-
 website/examples/tourism/index.html           |   2 +-
 17 files changed, 904 insertions(+), 27 deletions(-)
 create mode 100644 .storybook/MemoryRouter.ts
 create mode 100644 src/connectors/infinite-hits/__tests__/__snapshots__/connectInfiniteHits-test.js.snap

diff --git a/.storybook/MemoryRouter.ts b/.storybook/MemoryRouter.ts
new file mode 100644
index 0000000000..f7b059b619
--- /dev/null
+++ b/.storybook/MemoryRouter.ts
@@ -0,0 +1,27 @@
+import { action } from '@storybook/addon-actions';
+
+const urlLogger = action('Routing state');
+
+interface MemoryState {
+  [key: string]: string | number;
+}
+
+export class MemoryRouter {
+  private _memoryState: MemoryState;
+  constructor(initialState: MemoryState = {}) {
+    this._memoryState = initialState;
+  }
+  write(routeState: MemoryState) {
+    this._memoryState = routeState;
+    urlLogger(JSON.stringify(routeState, null, 2));
+  }
+  read() {
+    return this._memoryState;
+  }
+  createURL() {
+    return '';
+  }
+  onUpdate() {
+    return {};
+  }
+}
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index a957de0631..4bf8de6a99 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,2 +1,2 @@
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.1.1/themes/algolia.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.3.1/themes/algolia.min.css">
 <link rel="stylesheet" href="storybook.css">
diff --git a/src/components/InfiniteHits/InfiniteHits.js b/src/components/InfiniteHits/InfiniteHits.js
index 4de989b62e..281ec43dd6 100644
--- a/src/components/InfiniteHits/InfiniteHits.js
+++ b/src/components/InfiniteHits/InfiniteHits.js
@@ -6,7 +6,10 @@ import Template from '../Template/Template';
 const InfiniteHits = ({
   results,
   hits,
+  hasShowPrevious,
+  showPrevious,
   showMore,
+  isFirstPage,
   isLastPage,
   cssClasses,
   templateProps,
@@ -26,6 +29,21 @@ const InfiniteHits = ({
 
   return (
     <div className={cssClasses.root}>
+      {hasShowPrevious && (
+        <Template
+          {...templateProps}
+          templateKey="showPreviousText"
+          rootTagName="button"
+          rootProps={{
+            className: cx(cssClasses.loadPrevious, {
+              [cssClasses.disabledLoadPrevious]: isFirstPage,
+            }),
+            disabled: isFirstPage,
+            onClick: showPrevious,
+          }}
+        />
+      )}
+
       <ol className={cssClasses.list}>
         {hits.map((hit, position) => (
           <Template
@@ -64,13 +82,18 @@ InfiniteHits.propTypes = {
     emptyRoot: PropTypes.string.isRequired,
     list: PropTypes.string.isRequired,
     item: PropTypes.string.isRequired,
+    loadPrevious: PropTypes.string.isRequired,
+    disabledLoadPrevious: PropTypes.string.isRequired,
     loadMore: PropTypes.string.isRequired,
     disabledLoadMore: PropTypes.string.isRequired,
   }).isRequired,
   hits: PropTypes.array.isRequired,
   results: PropTypes.object.isRequired,
-  showMore: PropTypes.func,
+  hasShowPrevious: PropTypes.bool.isRequired,
+  showPrevious: PropTypes.func.isRequired,
+  showMore: PropTypes.func.isRequired,
   templateProps: PropTypes.object.isRequired,
+  isFirstPage: PropTypes.bool.isRequired,
   isLastPage: PropTypes.bool.isRequired,
 };
 
diff --git a/src/components/InfiniteHits/__tests__/InfiniteHits-test.js b/src/components/InfiniteHits/__tests__/InfiniteHits-test.js
index 8ef56ff127..022b25d0a2 100644
--- a/src/components/InfiniteHits/__tests__/InfiniteHits-test.js
+++ b/src/components/InfiniteHits/__tests__/InfiniteHits-test.js
@@ -8,6 +8,8 @@ describe('InfiniteHits', () => {
     emptyRoot: 'emptyRoot',
     item: 'item',
     list: 'list',
+    loadPrevious: 'loadPrevious',
+    disabledLoadPrevious: 'disabledLoadPrevious',
     loadMore: 'loadMore',
     disabledLoadMore: 'disabledLoadMore',
   };
@@ -26,8 +28,12 @@ describe('InfiniteHits', () => {
       ];
 
       const props = {
+        hasShowPrevious: false,
+        showPrevious: () => {},
+        showMore: () => {},
         results: { hits },
         hits,
+        isFirstPage: true,
         isLastPage: false,
         templateProps: {
           templates: {
@@ -56,8 +62,12 @@ describe('InfiniteHits', () => {
       ];
 
       const props = {
+        hasShowPrevious: false,
+        showPrevious: () => {},
+        showMore: () => {},
         results: { hits },
         hits,
+        isFirstPage: false,
         isLastPage: true,
         templateProps: {
           templates: {
@@ -77,8 +87,12 @@ describe('InfiniteHits', () => {
       const hits = [];
 
       const props = {
+        hasShowPrevious: false,
+        showPrevious: () => {},
+        showMore: () => {},
         results: { hits },
         hits,
+        isFirstPage: true,
         isLastPage: false,
         templateProps: {
           templates: {
@@ -98,8 +112,12 @@ describe('InfiniteHits', () => {
       const hits = [];
 
       const props = {
+        hasShowPrevious: false,
+        showPrevious: () => {},
+        showMore: () => {},
         results: { hits },
         hits,
+        isFirstPage: false,
         isLastPage: true,
         templateProps: {
           templates: {
@@ -114,5 +132,85 @@ describe('InfiniteHits', () => {
 
       expect(tree).toMatchSnapshot();
     });
+
+    it('should render <InfiniteHits /> with "Show previous" button on first page', () => {
+      const hits = [
+        {
+          objectID: 'one',
+          foo: 'bar',
+        },
+        {
+          objectID: 'two',
+          foo: 'baz',
+        },
+      ];
+
+      const props = {
+        hasShowPrevious: true,
+        showPrevious: () => {},
+        showMore: () => {},
+        results: { hits },
+        hits,
+        isFirstPage: true,
+        isLastPage: false,
+        templateProps: {
+          templates: {
+            item: 'item',
+            showMoreText: 'showMoreText',
+            showPreviousText: 'showPreviousText',
+          },
+        },
+        cssClasses,
+      };
+
+      const tree = mount(<InfiniteHits {...props} />);
+
+      const previousButton = tree.find('.loadPrevious');
+
+      expect(previousButton.exists()).toEqual(true);
+      expect(previousButton.hasClass('disabledLoadPrevious')).toEqual(true);
+      expect(previousButton.props().disabled).toEqual(true);
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('should render <InfiniteHits /> with "Show previous" button on last page', () => {
+      const hits = [
+        {
+          objectID: 'one',
+          foo: 'bar',
+        },
+        {
+          objectID: 'two',
+          foo: 'baz',
+        },
+      ];
+
+      const props = {
+        hasShowPrevious: true,
+        showPrevious: () => {},
+        showMore: () => {},
+        results: { hits },
+        hits,
+        isFirstPage: false,
+        isLastPage: true,
+        templateProps: {
+          templates: {
+            item: 'item',
+            showMoreText: 'showMoreText',
+            showPreviousText: 'showPreviousText',
+          },
+        },
+        cssClasses,
+      };
+
+      const tree = mount(<InfiniteHits {...props} />);
+
+      const previousButton = tree.find('.loadPrevious');
+
+      expect(previousButton.exists()).toEqual(true);
+      expect(previousButton.hasClass('disabledLoadPrevious')).toEqual(false);
+      expect(previousButton.props().disabled).toEqual(false);
+      expect(tree).toMatchSnapshot();
+    });
   });
 });
diff --git a/src/components/InfiniteHits/__tests__/__snapshots__/InfiniteHits-test.js.snap b/src/components/InfiniteHits/__tests__/__snapshots__/InfiniteHits-test.js.snap
index f9839812e0..b62c5c4a2e 100644
--- a/src/components/InfiniteHits/__tests__/__snapshots__/InfiniteHits-test.js.snap
+++ b/src/components/InfiniteHits/__tests__/__snapshots__/InfiniteHits-test.js.snap
@@ -32,6 +32,7 @@ exports[`InfiniteHits markup should render <InfiniteHits /> on first page 1`] =
       }
     }
     disabled={false}
+    onClick={[Function]}
   />
 </div>
 `;
@@ -68,6 +69,101 @@ exports[`InfiniteHits markup should render <InfiniteHits /> on last page 1`] = `
       }
     }
     disabled={true}
+    onClick={[Function]}
+  />
+</div>
+`;
+
+exports[`InfiniteHits markup should render <InfiniteHits /> with "Show previous" button on first page 1`] = `
+<div
+  className="root"
+>
+  <button
+    className="loadPrevious disabledLoadPrevious"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "showPreviousText",
+      }
+    }
+    disabled={true}
+    onClick={[Function]}
+  />
+  <ol
+    className="list"
+  >
+    <li
+      className="item"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "item",
+        }
+      }
+    />
+    <li
+      className="item"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "item",
+        }
+      }
+    />
+  </ol>
+  <button
+    className="loadMore"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "showMoreText",
+      }
+    }
+    disabled={false}
+    onClick={[Function]}
+  />
+</div>
+`;
+
+exports[`InfiniteHits markup should render <InfiniteHits /> with "Show previous" button on last page 1`] = `
+<div
+  className="root"
+>
+  <button
+    className="loadPrevious"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "showPreviousText",
+      }
+    }
+    disabled={false}
+    onClick={[Function]}
+  />
+  <ol
+    className="list"
+  >
+    <li
+      className="item"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "item",
+        }
+      }
+    />
+    <li
+      className="item"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "item",
+        }
+      }
+    />
+  </ol>
+  <button
+    className="loadMore disabledLoadMore"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "showMoreText",
+      }
+    }
+    disabled={true}
+    onClick={[Function]}
   />
 </div>
 `;
diff --git a/src/connectors/infinite-hits/__tests__/__snapshots__/connectInfiniteHits-test.js.snap b/src/connectors/infinite-hits/__tests__/__snapshots__/connectInfiniteHits-test.js.snap
new file mode 100644
index 0000000000..4533985c54
--- /dev/null
+++ b/src/connectors/infinite-hits/__tests__/__snapshots__/connectInfiniteHits-test.js.snap
@@ -0,0 +1,121 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`connectInfiniteHits routing getWidgetSearchParameters should add the refinements according to the UI state provided 1`] = `
+SearchParameters {
+  "advancedSyntax": undefined,
+  "allowTyposOnNumericTokens": undefined,
+  "analytics": undefined,
+  "analyticsTags": undefined,
+  "aroundLatLng": undefined,
+  "aroundLatLngViaIP": undefined,
+  "aroundPrecision": undefined,
+  "aroundRadius": undefined,
+  "attributesToHighlight": undefined,
+  "attributesToRetrieve": undefined,
+  "attributesToSnippet": undefined,
+  "disableExactOnAttributes": undefined,
+  "disjunctiveFacets": Array [],
+  "disjunctiveFacetsRefinements": Object {},
+  "distinct": undefined,
+  "enableExactOnSingleWordQuery": undefined,
+  "facets": Array [],
+  "facetsExcludes": Object {},
+  "facetsRefinements": Object {},
+  "getRankingInfo": undefined,
+  "hierarchicalFacets": Array [],
+  "hierarchicalFacetsRefinements": Object {},
+  "highlightPostTag": undefined,
+  "highlightPreTag": undefined,
+  "hitsPerPage": undefined,
+  "ignorePlurals": undefined,
+  "index": "",
+  "insideBoundingBox": undefined,
+  "insidePolygon": undefined,
+  "length": undefined,
+  "maxValuesPerFacet": undefined,
+  "minProximity": undefined,
+  "minWordSizefor1Typo": undefined,
+  "minWordSizefor2Typos": undefined,
+  "minimumAroundRadius": undefined,
+  "numericFilters": undefined,
+  "numericRefinements": Object {},
+  "offset": undefined,
+  "optionalFacetFilters": undefined,
+  "optionalTagFilters": undefined,
+  "optionalWords": undefined,
+  "page": 1,
+  "query": "",
+  "queryType": undefined,
+  "removeWordsIfNoResults": undefined,
+  "replaceSynonymsInHighlight": undefined,
+  "restrictSearchableAttributes": undefined,
+  "snippetEllipsisText": undefined,
+  "synonyms": undefined,
+  "tagFilters": undefined,
+  "tagRefinements": Array [],
+  "typoTolerance": undefined,
+}
+`;
+
+exports[`connectInfiniteHits routing getWidgetSearchParameters should enforce the default value if no value is in the UI State 1`] = `
+SearchParameters {
+  "advancedSyntax": undefined,
+  "allowTyposOnNumericTokens": undefined,
+  "analytics": undefined,
+  "analyticsTags": undefined,
+  "aroundLatLng": undefined,
+  "aroundLatLngViaIP": undefined,
+  "aroundPrecision": undefined,
+  "aroundRadius": undefined,
+  "attributesToHighlight": undefined,
+  "attributesToRetrieve": undefined,
+  "attributesToSnippet": undefined,
+  "disableExactOnAttributes": undefined,
+  "disjunctiveFacets": Array [],
+  "disjunctiveFacetsRefinements": Object {},
+  "distinct": undefined,
+  "enableExactOnSingleWordQuery": undefined,
+  "facets": Array [],
+  "facetsExcludes": Object {},
+  "facetsRefinements": Object {},
+  "getRankingInfo": undefined,
+  "hierarchicalFacets": Array [],
+  "hierarchicalFacetsRefinements": Object {},
+  "highlightPostTag": undefined,
+  "highlightPreTag": undefined,
+  "hitsPerPage": undefined,
+  "ignorePlurals": undefined,
+  "index": "",
+  "insideBoundingBox": undefined,
+  "insidePolygon": undefined,
+  "length": undefined,
+  "maxValuesPerFacet": undefined,
+  "minProximity": undefined,
+  "minWordSizefor1Typo": undefined,
+  "minWordSizefor2Typos": undefined,
+  "minimumAroundRadius": undefined,
+  "numericFilters": undefined,
+  "numericRefinements": Object {},
+  "offset": undefined,
+  "optionalFacetFilters": undefined,
+  "optionalTagFilters": undefined,
+  "optionalWords": undefined,
+  "page": 0,
+  "query": "",
+  "queryType": undefined,
+  "removeWordsIfNoResults": undefined,
+  "replaceSynonymsInHighlight": undefined,
+  "restrictSearchableAttributes": undefined,
+  "snippetEllipsisText": undefined,
+  "synonyms": undefined,
+  "tagFilters": undefined,
+  "tagRefinements": Array [],
+  "typoTolerance": undefined,
+}
+`;
+
+exports[`connectInfiniteHits routing getWidgetState should add an entry equal to the refinement 1`] = `
+Object {
+  "page": 2,
+}
+`;
diff --git a/src/connectors/infinite-hits/__tests__/connectInfiniteHits-test.js b/src/connectors/infinite-hits/__tests__/connectInfiniteHits-test.js
index 39715e7ee0..17f05dbd35 100644
--- a/src/connectors/infinite-hits/__tests__/connectInfiniteHits-test.js
+++ b/src/connectors/infinite-hits/__tests__/connectInfiniteHits-test.js
@@ -1,4 +1,7 @@
-import jsHelper, { SearchResults } from 'algoliasearch-helper';
+import jsHelper, {
+  SearchResults,
+  SearchParameters,
+} from 'algoliasearch-helper';
 import { TAG_PLACEHOLDER } from '../../../lib/escape-highlight';
 
 import connectInfiniteHits from '../connectInfiniteHits';
@@ -51,8 +54,10 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/infinite-hi
     expect(rendering).toHaveBeenLastCalledWith(
       expect.objectContaining({
         hits: [],
+        showPrevious: expect.any(Function),
         showMore: expect.any(Function),
         results: undefined,
+        isFirstPage: true,
         isLastPage: true,
         instantSearchInstance: undefined,
         widgetParams: {
@@ -77,8 +82,10 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/infinite-hi
     expect(rendering).toHaveBeenLastCalledWith(
       expect.objectContaining({
         hits: [],
+        showPrevious: expect.any(Function),
         showMore: expect.any(Function),
         results: expect.any(Object),
+        isFirstPage: true,
         isLastPage: false,
         instantSearchInstance: undefined,
         widgetParams: {
@@ -100,7 +107,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/infinite-hi
     });
   });
 
-  it('Provides the hits and the whole results', () => {
+  it('Provides the hits and accumulates results on next page', () => {
     const rendering = jest.fn();
     const makeWidget = connectInfiniteHits(rendering);
     const widget = makeWidget();
@@ -152,27 +159,116 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/infinite-hi
     const thirdRenderingOptions = rendering.mock.calls[2][0];
     expect(thirdRenderingOptions.hits).toEqual([...hits, ...otherHits]);
     expect(thirdRenderingOptions.results).toEqual(otherResults);
+  });
 
-    helper.setPage(0);
+  it('Provides the hits and prepends results on previous page', () => {
+    const rendering = jest.fn();
+    const makeWidget = connectInfiniteHits(rendering);
+    const widget = makeWidget();
 
-    // If the page goes back to 0, the hits cache should be flushed
+    const helper = jsHelper({}, '', {});
+    helper.setPage(1);
+    helper.search = jest.fn();
+    helper.emit = jest.fn();
 
-    const thirdHits = [{ fake: 'data 3' }, { sample: 'infos 3' }];
-    const thirdResults = new SearchResults(helper.state, [
+    widget.init({
+      helper,
+      state: helper.state,
+      createURL: () => '#',
+      onHistoryChange: () => {},
+    });
+
+    const firstRenderingOptions = rendering.mock.calls[0][0];
+    expect(firstRenderingOptions.hits).toEqual([]);
+    expect(firstRenderingOptions.results).toBe(undefined);
+
+    const hits = [{ fake: 'data' }, { sample: 'infos' }];
+    const results = new SearchResults(helper.state, [
       {
-        hits: thirdHits,
+        hits,
       },
     ]);
     widget.render({
-      results: thirdResults,
+      results,
       state: helper.state,
       helper,
       createURL: () => '#',
     });
 
-    const fourthRenderingOptions = rendering.mock.calls[3][0];
-    expect(fourthRenderingOptions.hits).toEqual(thirdHits);
-    expect(fourthRenderingOptions.results).toEqual(thirdResults);
+    const secondRenderingOptions = rendering.mock.calls[1][0];
+    const { showPrevious } = secondRenderingOptions;
+    expect(secondRenderingOptions.hits).toEqual(hits);
+    expect(secondRenderingOptions.results).toEqual(results);
+    showPrevious();
+    expect(helper.getPage()).toBe(0);
+    expect(helper.emit).not.toHaveBeenCalled();
+    expect(helper.search).toHaveBeenCalledTimes(1);
+
+    // the results should be prepended if there is an decrement in page
+    const previousHits = [{ fake: 'data 2' }, { sample: 'infos 2' }];
+    const previousResults = new SearchResults(helper.state, [
+      {
+        hits: previousHits,
+      },
+    ]);
+    widget.render({
+      results: previousResults,
+      state: helper.state,
+      helper,
+      createURL: () => '#',
+    });
+
+    const thirdRenderingOptions = rendering.mock.calls[2][0];
+    expect(thirdRenderingOptions.hits).toEqual([...previousHits, ...hits]);
+    expect(thirdRenderingOptions.results).toEqual(previousResults);
+  });
+
+  it('Provides the hits and flush hists cache on query changes', () => {
+    const rendering = jest.fn();
+    const makeWidget = connectInfiniteHits(rendering);
+    const widget = makeWidget();
+
+    const helper = jsHelper({}, '', {});
+    helper.search = jest.fn();
+
+    widget.init({
+      helper,
+      state: helper.state,
+      createURL: () => '#',
+      onHistoryChange: () => {},
+    });
+
+    const firstRenderingOptions = rendering.mock.calls[0][0];
+    expect(firstRenderingOptions.hits).toEqual([]);
+    expect(firstRenderingOptions.results).toBe(undefined);
+
+    const hits = [{ fake: 'data' }, { sample: 'infos' }];
+    const results = new SearchResults(helper.state, [{ hits }]);
+    widget.render({
+      results,
+      state: helper.state,
+      helper,
+      createURL: () => '#',
+    });
+
+    const secondRenderingOptions = rendering.mock.calls[1][0];
+    expect(secondRenderingOptions.hits).toEqual(hits);
+    expect(secondRenderingOptions.results).toEqual(results);
+
+    helper.setQuery('data');
+
+    // If the query changes, the hits cache should be flushed
+    const otherHits = [{ fake: 'data 2' }, { sample: 'infos 2' }];
+    const otherResults = new SearchResults(helper.state, [{ hits: otherHits }]);
+    widget.render({
+      results: otherResults,
+      state: helper.state,
+      helper,
+      createURL: () => '#',
+    });
+    const thirdRenderingOptions = rendering.mock.calls[2][0];
+    expect(thirdRenderingOptions.hits).toEqual(otherHits);
+    expect(thirdRenderingOptions.results).toEqual(otherResults);
   });
 
   it('escape highlight properties if requested', () => {
@@ -488,4 +584,220 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/infinite-hi
       false
     );
   });
+
+  describe('routing', () => {
+    describe('getWidgetState', () => {
+      it('should give back the object unmodified if the default value is selected', () => {
+        const rendering = jest.fn();
+        const makeWidget = connectInfiniteHits(rendering);
+        const widget = makeWidget({ showPrevious: true });
+
+        const helper = jsHelper({}, '', {});
+        helper.search = jest.fn();
+
+        widget.init({
+          helper,
+          state: helper.state,
+          createURL: () => '#',
+          onHistoryChange: () => {},
+        });
+
+        const uiStateBefore = { page: 1 };
+        const uiStateAfter = widget.getWidgetState(uiStateBefore, {
+          searchParameters: helper.state,
+          helper,
+        });
+
+        expect(uiStateAfter).toBe(uiStateBefore);
+      });
+
+      it('should add an entry equal to the refinement', () => {
+        const rendering = jest.fn();
+        const makeWidget = connectInfiniteHits(rendering);
+        const widget = makeWidget({ showPrevious: true });
+
+        const helper = jsHelper({}, '', {});
+        helper.search = jest.fn();
+
+        widget.init({
+          helper,
+          state: helper.state,
+          createURL: () => '#',
+          onHistoryChange: () => {},
+        });
+
+        const { showMore } = rendering.mock.calls[0][0];
+
+        showMore();
+
+        const uiStateBefore = { page: 1 };
+        const uiStateAfter = widget.getWidgetState(uiStateBefore, {
+          searchParameters: helper.state,
+          helper,
+        });
+
+        expect(uiStateAfter).toMatchSnapshot();
+      });
+
+      it('should give back the object unmodified if showPrevious is disabled', () => {
+        const rendering = jest.fn();
+        const makeWidget = connectInfiniteHits(rendering);
+        const widget = makeWidget({ showPrevious: false });
+
+        const helper = jsHelper({}, '', {});
+        helper.search = jest.fn();
+
+        widget.init({
+          helper,
+          state: helper.state,
+          createURL: () => '#',
+          onHistoryChange: () => {},
+        });
+
+        const { showMore } = rendering.mock.calls[0][0];
+
+        showMore();
+
+        const uiStateBefore = { page: 1 };
+        const uiStateAfter = widget.getWidgetState(uiStateBefore, {
+          searchParameters: helper.state,
+          helper,
+        });
+
+        expect(uiStateAfter).toBe(uiStateBefore);
+      });
+    });
+
+    describe('getWidgetSearchParameters', () => {
+      it('should return the same SP if there are no refinements in the UI state', () => {
+        const rendering = jest.fn();
+        const makeWidget = connectInfiniteHits(rendering);
+        const widget = makeWidget({ showPrevious: true });
+
+        const helper = jsHelper({}, '', {});
+        helper.search = jest.fn();
+
+        widget.init({
+          helper,
+          state: helper.state,
+          createURL: () => '#',
+          onHistoryChange: () => {},
+        });
+
+        // The user presses back (browser), and the URL contains no parameters
+        const uiState = {};
+        // The current state is empty (and page is set to 0 by default)
+        const searchParametersBefore = SearchParameters.make(helper.state);
+        const searchParametersAfter = widget.getWidgetSearchParameters(
+          searchParametersBefore,
+          { uiState }
+        );
+        // Applying the same values should not return a new object
+        expect(searchParametersAfter).toBe(searchParametersBefore);
+      });
+
+      it('should enforce the default value if no value is in the UI State', () => {
+        const rendering = jest.fn();
+        const makeWidget = connectInfiniteHits(rendering);
+        const widget = makeWidget({ showPrevious: true });
+
+        const helper = jsHelper({}, '', {});
+        helper.search = jest.fn();
+
+        widget.init({
+          helper,
+          state: helper.state,
+          createURL: () => '#',
+          onHistoryChange: () => {},
+        });
+
+        const { showMore } = rendering.mock.calls[0][0];
+
+        // The user presses back (browser), and the URL contains no parameters
+        const uiState = {};
+        // The current state is set to next page
+        showMore();
+        const searchParametersBefore = SearchParameters.make(helper.state);
+        const searchParametersAfter = widget.getWidgetSearchParameters(
+          searchParametersBefore,
+          {
+            uiState,
+          }
+        );
+        // Applying an empty state, should force back to page 0
+        expect(searchParametersAfter).toMatchSnapshot();
+        expect(searchParametersAfter.page).toBe(0);
+      });
+
+      it('should add the refinements according to the UI state provided', () => {
+        global.window = { location: { pathname: null } };
+        const rendering = jest.fn();
+        const makeWidget = connectInfiniteHits(rendering);
+        const widget = makeWidget({ showPrevious: true });
+
+        const helper = jsHelper({}, '', {});
+        helper.search = jest.fn();
+
+        widget.init({
+          helper,
+          state: helper.state,
+          createURL: () => '#',
+          onHistoryChange: () => {},
+        });
+
+        const { showMore } = rendering.mock.calls[0][0];
+
+        // The user presses back (browser), and the URL contains some parameters
+        const uiState = {
+          page: 2,
+        };
+        // The current state is set to next page
+        showMore();
+        const searchParametersBefore = SearchParameters.make(helper.state);
+        const searchParametersAfter = widget.getWidgetSearchParameters(
+          searchParametersBefore,
+          {
+            uiState,
+          }
+        );
+        // Applying a state with new parameters should apply them on the search
+        expect(searchParametersAfter).toMatchSnapshot();
+        expect(searchParametersAfter.page).toBe(1);
+      });
+    });
+
+    it('should return the same SP if showPrevious is disabled', () => {
+      global.window = { location: { pathname: null } };
+      const rendering = jest.fn();
+      const makeWidget = connectInfiniteHits(rendering);
+      const widget = makeWidget({ showPrevious: false });
+
+      const helper = jsHelper({}, '', {});
+      helper.search = jest.fn();
+
+      widget.init({
+        helper,
+        state: helper.state,
+        createURL: () => '#',
+        onHistoryChange: () => {},
+      });
+
+      const { showMore } = rendering.mock.calls[0][0];
+
+      // The user presses back (browser), and the URL contains some parameters
+      const uiState = {
+        page: 4,
+      };
+      // The current state is set to next page
+      showMore();
+      const searchParametersBefore = SearchParameters.make(helper.state);
+      const searchParametersAfter = widget.getWidgetSearchParameters(
+        searchParametersBefore,
+        {
+          uiState,
+        }
+      );
+      expect(searchParametersAfter).toBe(searchParametersBefore);
+    });
+  });
 });
diff --git a/src/connectors/infinite-hits/connectInfiniteHits.js b/src/connectors/infinite-hits/connectInfiniteHits.js
index b48c9ef084..e72bbedd94 100644
--- a/src/connectors/infinite-hits/connectInfiniteHits.js
+++ b/src/connectors/infinite-hits/connectInfiniteHits.js
@@ -1,3 +1,5 @@
+import isEqual from 'lodash/isEqual';
+
 import escapeHits, { TAG_PLACEHOLDER } from '../../lib/escape-highlight';
 import {
   checkRendering,
@@ -70,11 +72,29 @@ export default function connectInfiniteHits(renderFn, unmountFn) {
   checkRendering(renderFn, withUsage());
 
   return (widgetParams = {}) => {
-    const { escapeHTML = true, transformItems = items => items } = widgetParams;
+    const {
+      escapeHTML = true,
+      transformItems = items => items,
+      showPrevious = false,
+    } = widgetParams;
     let hitsCache = [];
+    let firstReceivedPage = Infinity;
     let lastReceivedPage = -1;
-
-    const getShowMore = helper => () => helper.nextPage().search();
+    let prevState;
+
+    const getShowPrevious = helper => () => {
+      // Using the helper's `overrideStateWithoutTriggeringChangeEvent` method
+      // avoid updating the browser URL when the user displays the previous page.
+      helper
+        .overrideStateWithoutTriggeringChangeEvent({
+          ...helper.state,
+          page: firstReceivedPage - 1,
+        })
+        .search();
+    };
+    const getShowMore = helper => () => {
+      helper.setPage(lastReceivedPage + 1).search();
+    };
 
     return {
       getConfiguration() {
@@ -82,13 +102,18 @@ export default function connectInfiniteHits(renderFn, unmountFn) {
       },
 
       init({ instantSearchInstance, helper }) {
+        this.showPrevious = getShowPrevious(helper);
         this.showMore = getShowMore(helper);
+        firstReceivedPage = helper.state.page;
+        lastReceivedPage = helper.state.page;
 
         renderFn(
           {
             hits: hitsCache,
             results: undefined,
+            showPrevious: this.showPrevious,
             showMore: this.showMore,
+            isFirstPage: firstReceivedPage === 0,
             isLastPage: true,
             instantSearchInstance,
             widgetParams,
@@ -98,9 +123,18 @@ export default function connectInfiniteHits(renderFn, unmountFn) {
       },
 
       render({ results, state, instantSearchInstance }) {
-        if (state.page === 0) {
+        // Reset cache and received pages if anything changes in the
+        // search state, except for the page.
+        //
+        // We're doing this to "reset" the widget if a refinement or the
+        // query changes between renders, but we want to keep it as is
+        // if we only change pages.
+        const { page, ...currentState } = state;
+        if (!isEqual(currentState, prevState)) {
           hitsCache = [];
-          lastReceivedPage = -1;
+          firstReceivedPage = page;
+          lastReceivedPage = page;
+          prevState = currentState;
         }
 
         if (escapeHTML && results.hits && results.hits.length > 0) {
@@ -117,18 +151,24 @@ export default function connectInfiniteHits(renderFn, unmountFn) {
 
         results.hits = transformItems(results.hits);
 
-        if (lastReceivedPage < state.page) {
+        if (lastReceivedPage < page || !hitsCache.length) {
           hitsCache = [...hitsCache, ...results.hits];
-          lastReceivedPage = state.page;
+          lastReceivedPage = page;
+        } else if (firstReceivedPage > page) {
+          hitsCache = [...results.hits, ...hitsCache];
+          firstReceivedPage = page;
         }
 
+        const isFirstPage = firstReceivedPage === 0;
         const isLastPage = results.nbPages <= results.page + 1;
 
         renderFn(
           {
             hits: hitsCache,
             results,
+            showPrevious: this.showPrevious,
             showMore: this.showMore,
+            isFirstPage,
             isLastPage,
             instantSearchInstance,
             widgetParams,
@@ -140,6 +180,30 @@ export default function connectInfiniteHits(renderFn, unmountFn) {
       dispose() {
         unmountFn();
       },
+
+      getWidgetState(uiState, { searchParameters }) {
+        const page = searchParameters.page;
+
+        if (!showPrevious || page === 0 || page + 1 === uiState.page) {
+          return uiState;
+        }
+
+        return {
+          ...uiState,
+          page: page + 1,
+        };
+      },
+
+      getWidgetSearchParameters(searchParameters, { uiState }) {
+        if (!showPrevious) {
+          return searchParameters;
+        }
+        const uiPage = uiState.page;
+        if (uiPage) {
+          return searchParameters.setQueryParameter('page', uiPage - 1);
+        }
+        return searchParameters.setQueryParameter('page', 0);
+      },
     };
   };
 }
diff --git a/src/widgets/infinite-hits/__tests__/__snapshots__/infinite-hits-test.js.snap b/src/widgets/infinite-hits/__tests__/__snapshots__/infinite-hits-test.js.snap
index cb43af3839..b3e707ead3 100644
--- a/src/widgets/infinite-hits/__tests__/__snapshots__/infinite-hits-test.js.snap
+++ b/src/widgets/infinite-hits/__tests__/__snapshots__/infinite-hits-test.js.snap
@@ -5,13 +5,16 @@ exports[`infiniteHits() calls twice render(<Hits props />, container) 1`] = `
   cssClasses={
     Object {
       "disabledLoadMore": "ais-InfiniteHits-loadMore--disabled",
+      "disabledLoadPrevious": "ais-InfiniteHits-loadPrevious--disabled",
       "emptyRoot": "ais-InfiniteHits--empty",
       "item": "ais-InfiniteHits-item",
       "list": "ais-InfiniteHits-list",
       "loadMore": "ais-InfiniteHits-loadMore",
+      "loadPrevious": "ais-InfiniteHits-loadPrevious",
       "root": "ais-InfiniteHits root cx",
     }
   }
+  hasShowPrevious={false}
   hits={
     Array [
       Object {
@@ -21,6 +24,7 @@ exports[`infiniteHits() calls twice render(<Hits props />, container) 1`] = `
       },
     ]
   }
+  isFirstPage={true}
   isLastPage={false}
   results={
     Object {
@@ -36,18 +40,21 @@ exports[`infiniteHits() calls twice render(<Hits props />, container) 1`] = `
     }
   }
   showMore={[Function]}
+  showPrevious={[Function]}
   templateProps={
     Object {
       "templates": Object {
         "empty": "No results",
         "item": [Function],
         "showMoreText": "Show more results",
+        "showPreviousText": "Show previous results",
       },
       "templatesConfig": undefined,
       "useCustomCompileOptions": Object {
         "empty": false,
         "item": false,
         "showMoreText": false,
+        "showPreviousText": false,
       },
     }
   }
@@ -59,13 +66,16 @@ exports[`infiniteHits() calls twice render(<Hits props />, container) 2`] = `
   cssClasses={
     Object {
       "disabledLoadMore": "ais-InfiniteHits-loadMore--disabled",
+      "disabledLoadPrevious": "ais-InfiniteHits-loadPrevious--disabled",
       "emptyRoot": "ais-InfiniteHits--empty",
       "item": "ais-InfiniteHits-item",
       "list": "ais-InfiniteHits-list",
       "loadMore": "ais-InfiniteHits-loadMore",
+      "loadPrevious": "ais-InfiniteHits-loadPrevious",
       "root": "ais-InfiniteHits root cx",
     }
   }
+  hasShowPrevious={false}
   hits={
     Array [
       Object {
@@ -75,6 +85,7 @@ exports[`infiniteHits() calls twice render(<Hits props />, container) 2`] = `
       },
     ]
   }
+  isFirstPage={true}
   isLastPage={false}
   results={
     Object {
@@ -90,18 +101,21 @@ exports[`infiniteHits() calls twice render(<Hits props />, container) 2`] = `
     }
   }
   showMore={[Function]}
+  showPrevious={[Function]}
   templateProps={
     Object {
       "templates": Object {
         "empty": "No results",
         "item": [Function],
         "showMoreText": "Show more results",
+        "showPreviousText": "Show previous results",
       },
       "templatesConfig": undefined,
       "useCustomCompileOptions": Object {
         "empty": false,
         "item": false,
         "showMoreText": false,
+        "showPreviousText": false,
       },
     }
   }
@@ -113,13 +127,16 @@ exports[`infiniteHits() if it is the last page, then the props should contain is
   cssClasses={
     Object {
       "disabledLoadMore": "ais-InfiniteHits-loadMore--disabled",
+      "disabledLoadPrevious": "ais-InfiniteHits-loadPrevious--disabled",
       "emptyRoot": "ais-InfiniteHits--empty",
       "item": "ais-InfiniteHits-item",
       "list": "ais-InfiniteHits-list",
       "loadMore": "ais-InfiniteHits-loadMore",
+      "loadPrevious": "ais-InfiniteHits-loadPrevious",
       "root": "ais-InfiniteHits root cx",
     }
   }
+  hasShowPrevious={false}
   hits={
     Array [
       Object {
@@ -129,6 +146,7 @@ exports[`infiniteHits() if it is the last page, then the props should contain is
       },
     ]
   }
+  isFirstPage={true}
   isLastPage={false}
   results={
     Object {
@@ -145,18 +163,21 @@ exports[`infiniteHits() if it is the last page, then the props should contain is
     }
   }
   showMore={[Function]}
+  showPrevious={[Function]}
   templateProps={
     Object {
       "templates": Object {
         "empty": "No results",
         "item": [Function],
         "showMoreText": "Show more results",
+        "showPreviousText": "Show previous results",
       },
       "templatesConfig": undefined,
       "useCustomCompileOptions": Object {
         "empty": false,
         "item": false,
         "showMoreText": false,
+        "showPreviousText": false,
       },
     }
   }
@@ -168,22 +189,26 @@ exports[`infiniteHits() if it is the last page, then the props should contain is
   cssClasses={
     Object {
       "disabledLoadMore": "ais-InfiniteHits-loadMore--disabled",
+      "disabledLoadPrevious": "ais-InfiniteHits-loadPrevious--disabled",
       "emptyRoot": "ais-InfiniteHits--empty",
       "item": "ais-InfiniteHits-item",
       "list": "ais-InfiniteHits-list",
       "loadMore": "ais-InfiniteHits-loadMore",
+      "loadPrevious": "ais-InfiniteHits-loadPrevious",
       "root": "ais-InfiniteHits root cx",
     }
   }
+  hasShowPrevious={false}
   hits={
     Array [
       Object {
-        "__position": 3,
+        "__position": 1,
         "first": "hit",
         "second": "hit",
       },
     ]
   }
+  isFirstPage={true}
   isLastPage={true}
   results={
     Object {
@@ -200,18 +225,21 @@ exports[`infiniteHits() if it is the last page, then the props should contain is
     }
   }
   showMore={[Function]}
+  showPrevious={[Function]}
   templateProps={
     Object {
       "templates": Object {
         "empty": "No results",
         "item": [Function],
         "showMoreText": "Show more results",
+        "showPreviousText": "Show previous results",
       },
       "templatesConfig": undefined,
       "useCustomCompileOptions": Object {
         "empty": false,
         "item": false,
         "showMoreText": false,
+        "showPreviousText": false,
       },
     }
   }
@@ -223,13 +251,16 @@ exports[`infiniteHits() renders transformed items 1`] = `
   cssClasses={
     Object {
       "disabledLoadMore": "ais-InfiniteHits-loadMore--disabled",
+      "disabledLoadPrevious": "ais-InfiniteHits-loadPrevious--disabled",
       "emptyRoot": "ais-InfiniteHits--empty",
       "item": "ais-InfiniteHits-item",
       "list": "ais-InfiniteHits-list",
       "loadMore": "ais-InfiniteHits-loadMore",
+      "loadPrevious": "ais-InfiniteHits-loadPrevious",
       "root": "ais-InfiniteHits",
     }
   }
+  hasShowPrevious={false}
   hits={
     Array [
       Object {
@@ -240,6 +271,7 @@ exports[`infiniteHits() renders transformed items 1`] = `
       },
     ]
   }
+  isFirstPage={true}
   isLastPage={false}
   results={
     Object {
@@ -256,18 +288,21 @@ exports[`infiniteHits() renders transformed items 1`] = `
     }
   }
   showMore={[Function]}
+  showPrevious={[Function]}
   templateProps={
     Object {
       "templates": Object {
         "empty": "No results",
         "item": [Function],
         "showMoreText": "Show more results",
+        "showPreviousText": "Show previous results",
       },
       "templatesConfig": undefined,
       "useCustomCompileOptions": Object {
         "empty": false,
         "item": false,
         "showMoreText": false,
+        "showPreviousText": false,
       },
     }
   }
diff --git a/src/widgets/infinite-hits/__tests__/defaultTemplates-test.js b/src/widgets/infinite-hits/__tests__/defaultTemplates-test.js
index 5d0916bf11..7db192eeb7 100644
--- a/src/widgets/infinite-hits/__tests__/defaultTemplates-test.js
+++ b/src/widgets/infinite-hits/__tests__/defaultTemplates-test.js
@@ -22,4 +22,10 @@ describe('hits defaultTemplates', () => {
 
     expect(defaultTemplates.item(item)).toBe(expected);
   });
+
+  it('has a `showPreviousText` default template', () => {
+    expect(defaultTemplates.showPreviousText).toMatchInlineSnapshot(
+      `"Show previous results"`
+    );
+  });
 });
diff --git a/src/widgets/infinite-hits/__tests__/infinite-hits-test.js b/src/widgets/infinite-hits/__tests__/infinite-hits-test.js
index 6101ef2cfa..63f7ef4cd4 100644
--- a/src/widgets/infinite-hits/__tests__/infinite-hits-test.js
+++ b/src/widgets/infinite-hits/__tests__/infinite-hits-test.js
@@ -40,6 +40,7 @@ describe('infiniteHits()', () => {
       container,
       escapeHTML: true,
       cssClasses: { root: ['root', 'cx'] },
+      showPrevious: false,
     });
     widget.init({ helper, instantSearchInstance: {} });
     results = {
@@ -75,6 +76,7 @@ describe('infiniteHits()', () => {
       container,
       transformItems: items =>
         items.map(item => ({ ...item, transformed: true })),
+      showPrevious: false,
     });
 
     widget.init({ helper, instantSearchInstance: {} });
@@ -121,4 +123,46 @@ describe('infiniteHits()', () => {
     widget.render({ results, state });
     expect(results.hits[0].__position).toEqual(41);
   });
+
+  it('if it is the first page, then the props should contain isFirstPage true', () => {
+    const state = { page: 0 };
+    widget.render({
+      results: { ...results, page: 0, nbPages: 2 },
+      state,
+    });
+    widget.render({
+      results: { ...results, page: 1, nbPages: 2 },
+      state,
+    });
+
+    expect(render).toHaveBeenCalledTimes(2);
+
+    const [
+      firstRenderingParameters,
+      secondRenderingParameters,
+    ] = render.mock.calls;
+
+    expect(firstRenderingParameters[0].props.isFirstPage).toEqual(true);
+    expect(firstRenderingParameters[1]).toEqual(container);
+
+    expect(secondRenderingParameters[0].props.isFirstPage).toEqual(true);
+    expect(secondRenderingParameters[1]).toEqual(container);
+  });
+
+  it('if it is not the first page, then the props should contain isFirstPage false', () => {
+    // Init widget at page 1
+    helper.setPage(1);
+    widget.init({ helper, instantSearchInstance: {} });
+
+    const state = { page: 1 };
+    widget.render({
+      results: { ...results, page: 1, nbPages: 2 },
+      state,
+    });
+
+    expect(render).toHaveBeenCalledTimes(1);
+
+    expect(render.mock.calls[0][0].props.isFirstPage).toEqual(false);
+    expect(render.mock.calls[0][1]).toEqual(container);
+  });
 });
diff --git a/src/widgets/infinite-hits/defaultTemplates.js b/src/widgets/infinite-hits/defaultTemplates.js
index 220849dbf0..79bc7270c8 100644
--- a/src/widgets/infinite-hits/defaultTemplates.js
+++ b/src/widgets/infinite-hits/defaultTemplates.js
@@ -1,5 +1,6 @@
 export default {
   empty: 'No results',
+  showPreviousText: 'Show previous results',
   showMoreText: 'Show more results',
   item(data) {
     return JSON.stringify(data, null, 2);
diff --git a/src/widgets/infinite-hits/infinite-hits.js b/src/widgets/infinite-hits/infinite-hits.js
index ebf8038020..5a2cc5c23f 100644
--- a/src/widgets/infinite-hits/infinite-hits.js
+++ b/src/widgets/infinite-hits/infinite-hits.js
@@ -19,8 +19,23 @@ const withUsage = createDocumentationMessageGenerator({
 const suit = component('InfiniteHits');
 const InfiniteHitsWithInsightsListener = withInsightsListener(InfiniteHits);
 
-const renderer = ({ cssClasses, containerNode, renderState, templates }) => (
-  { hits, results, showMore, isLastPage, instantSearchInstance, insights },
+const renderer = ({
+  cssClasses,
+  containerNode,
+  renderState,
+  templates,
+  showPrevious: hasShowPrevious,
+}) => (
+  {
+    hits,
+    results,
+    showMore,
+    showPrevious,
+    isFirstPage,
+    isLastPage,
+    instantSearchInstance,
+    insights,
+  },
   isFirstRendering
 ) => {
   if (isFirstRendering) {
@@ -37,8 +52,11 @@ const renderer = ({ cssClasses, containerNode, renderState, templates }) => (
       cssClasses={cssClasses}
       hits={hits}
       results={results}
+      hasShowPrevious={hasShowPrevious}
+      showPrevious={showPrevious}
       showMore={showMore}
       templateProps={renderState.templateProps}
+      isFirstPage={isFirstPage}
       isLastPage={isLastPage}
       insights={insights}
     />,
@@ -102,6 +120,7 @@ export default function infiniteHits({
   transformItems,
   templates = defaultTemplates,
   cssClasses: userCssClasses = {},
+  showPrevious,
 } = {}) {
   if (!container) {
     throw new Error(withUsage('The `container` option is required.'));
@@ -124,6 +143,14 @@ export default function infiniteHits({
     emptyRoot: cx(suit({ modifierName: 'empty' }), userCssClasses.emptyRoot),
     item: cx(suit({ descendantName: 'item' }), userCssClasses.item),
     list: cx(suit({ descendantName: 'list' }), userCssClasses.list),
+    loadPrevious: cx(
+      suit({ descendantName: 'loadPrevious' }),
+      userCssClasses.loadPrevious
+    ),
+    disabledLoadPrevious: cx(
+      suit({ descendantName: 'loadPrevious', modifierName: 'disabled' }),
+      userCssClasses.disabledLoadPrevious
+    ),
     loadMore: cx(suit({ descendantName: 'loadMore' }), userCssClasses.loadMore),
     disabledLoadMore: cx(
       suit({ descendantName: 'loadMore', modifierName: 'disabled' }),
@@ -135,6 +162,7 @@ export default function infiniteHits({
     containerNode,
     cssClasses,
     templates,
+    showPrevious,
     renderState: {},
   });
 
@@ -143,5 +171,5 @@ export default function infiniteHits({
     () => unmountComponentAtNode(containerNode)
   );
 
-  return makeInfiniteHits({ escapeHTML, transformItems });
+  return makeInfiniteHits({ escapeHTML, transformItems, showPrevious });
 }
diff --git a/stories/infinite-hits.stories.js b/stories/infinite-hits.stories.js
index 7186f4cee1..67b219bd17 100644
--- a/stories/infinite-hits.stories.js
+++ b/stories/infinite-hits.stories.js
@@ -1,6 +1,7 @@
 import { storiesOf } from '@storybook/html';
 import { action } from '@storybook/addon-actions';
 import { withHits } from '../.storybook/decorators';
+import { MemoryRouter } from '../.storybook/MemoryRouter';
 import insights from '../src/helpers/insights';
 
 storiesOf('InfiniteHits', module)
@@ -103,4 +104,25 @@ storiesOf('InfiniteHits', module)
           action(`[InsightsClient] sent "${method}" with payload`)(payload),
       }
     )
+  )
+  .add(
+    'with previous button enabled',
+    withHits(
+      ({ search, container, instantsearch }) => {
+        search.addWidget(
+          instantsearch.widgets.infiniteHits({
+            container,
+            showPrevious: true,
+            templates: {
+              item: '{{name}}',
+            },
+          })
+        );
+      },
+      {
+        routing: {
+          router: new MemoryRouter({ page: 3 }),
+        },
+      }
+    )
   );
diff --git a/website/examples/calendar-widget/index.html b/website/examples/calendar-widget/index.html
index cdfbd6b0df..7c8b3b8bc8 100644
--- a/website/examples/calendar-widget/index.html
+++ b/website/examples/calendar-widget/index.html
@@ -1,7 +1,7 @@
 <html>
 
 <head>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.1.1/themes/algolia.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.3.1/themes/algolia.min.css">
   <link rel="stylesheet" type="text/css" href="main.css">
   <link rel="stylesheet" type="text/css" href="calendar.css">
   <title>InstantSearch Calendar Widget</title>
diff --git a/website/examples/e-commerce/index.html b/website/examples/e-commerce/index.html
index c2304d4838..d365b81a10 100644
--- a/website/examples/e-commerce/index.html
+++ b/website/examples/e-commerce/index.html
@@ -14,7 +14,7 @@
     />
     <link
       rel="stylesheet"
-      href="https://unpkg.com/instantsearch.css@7.1.1/themes/algolia-min.css"
+      href="https://unpkg.com/instantsearch.css@7.3.1/themes/algolia-min.css"
     />
     <link
       rel="stylesheet"
diff --git a/website/examples/tourism/index.html b/website/examples/tourism/index.html
index f4826d2c31..d392496166 100644
--- a/website/examples/tourism/index.html
+++ b/website/examples/tourism/index.html
@@ -14,7 +14,7 @@
     />
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.1.1/themes/reset-min.css"
+      href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.3.1/themes/reset-min.css"
     />
     <link
       rel="stylesheet"