feat(infiniteHits): add previous button (#3645)

algolia · Apr 10, 2019 · 2c9e38d · 2c9e38d
1 parent db9b91e
commit 2c9e38d
Show file tree

Hide file tree

Showing 17 changed files with 838 additions and 27 deletions.
diff --git a/.storybook/MemoryRouter.ts 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
@@ -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.2.0/themes/algolia.min.css">
 <link rel="stylesheet" href="storybook.css">
diff --git 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
@@ -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
@@ -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>
 `;