fix(pagination): disable buttons if not results (#2643)

* fix(pagination): if the results contains no hits, disable the buttons * fix(pagination): add tests for disabled behaviour * chore: add story to test #2014 * fix(pagination): display the current if no results We're still on page 1 after all. fix #2014
algolia · Dec 29, 2017 · 9017b72 · 9017b72
1 parent e73ff13
commit 9017b72
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 16 deletions.
diff --git a/dev/app/builtin/stories/pagination.stories.js b/dev/app/builtin/stories/pagination.stories.js
@@ -7,15 +7,27 @@ import { wrapWithHits } from '../../utils/wrap-with-hits.js';
 const stories = storiesOf('Pagination');
 
 export default () => {
-  stories.add(
-    'default',
-    wrapWithHits(container => {
-      window.search.addWidget(
-        instantsearch.widgets.pagination({
-          container,
-          maxPages: 20,
-        })
-      );
-    })
-  );
+  stories
+    .add(
+      'default',
+      wrapWithHits(container => {
+        window.search.addWidget(
+          instantsearch.widgets.pagination({
+            container,
+            maxPages: 20,
+          })
+        );
+      })
+    )
+    .add(
+      'without autoHideContainer',
+      wrapWithHits(container => {
+        window.search.addWidget(
+          instantsearch.widgets.pagination({
+            container,
+            autoHideContainer: false,
+          })
+        );
+      })
+    );
 };
diff --git a/src/components/Pagination/Pagination.js b/src/components/Pagination/Pagination.js
@@ -44,7 +44,7 @@ export class RawPagination extends React.Component {
         cssClasses={cssClasses}
         handleClick={this.handleClick}
         isDisabled={isDisabled}
-        key={label + pageNumber}
+        key={label + pageNumber + ariaLabel}
         label={label}
         pageNumber={pageNumber}
         url={url}
@@ -56,7 +56,7 @@ export class RawPagination extends React.Component {
     return this.pageLink({
       ariaLabel: 'Previous',
       additionalClassName: this.props.cssClasses.previous,
-      isDisabled: pager.isFirstPage(),
+      isDisabled: this.props.nbHits === 0 || pager.isFirstPage(),
       label: this.props.labels.previous,
       pageNumber: pager.currentPage - 1,
       createURL,
@@ -67,7 +67,7 @@ export class RawPagination extends React.Component {
     return this.pageLink({
       ariaLabel: 'Next',
       additionalClassName: this.props.cssClasses.next,
-      isDisabled: pager.isLastPage(),
+      isDisabled: this.props.nbHits === 0 || pager.isLastPage(),
       label: this.props.labels.next,
       pageNumber: pager.currentPage + 1,
       createURL,
@@ -78,7 +78,7 @@ export class RawPagination extends React.Component {
     return this.pageLink({
       ariaLabel: 'First',
       additionalClassName: this.props.cssClasses.first,
-      isDisabled: pager.isFirstPage(),
+      isDisabled: this.props.nbHits === 0 || pager.isFirstPage(),
       label: this.props.labels.first,
       pageNumber: 0,
       createURL,
@@ -89,7 +89,7 @@ export class RawPagination extends React.Component {
     return this.pageLink({
       ariaLabel: 'Last',
       additionalClassName: this.props.cssClasses.last,
-      isDisabled: pager.isLastPage(),
+      isDisabled: this.props.nbHits === 0 || pager.isLastPage(),
       label: this.props.labels.last,
       pageNumber: pager.total - 1,
       createURL,

diff --git a/src/components/Pagination/Paginator.js b/src/components/Pagination/Paginator.js
@@ -10,6 +10,8 @@ class Paginator {
   pages() {
     const { total, currentPage, padding } = this;
 
+    if (total === 0) return [0];
+
     const totalDisplayedPages = this.nbPagesDisplayed(padding, total);
     if (totalDisplayedPages === total) return range(0, total);
 

diff --git a/src/components/Pagination/__tests__/Pagination-test.js b/src/components/Pagination/__tests__/Pagination-test.js
@@ -67,4 +67,19 @@ describe('Pagination', () => {
     );
     expect(preventDefault.calledOnce).toBe(true, 'preventDefault called once');
   });
+
+  it('should have all buttons disabled if there are no results', () => {
+    const tree = renderer
+      .create(
+        <Pagination
+          {...defaultProps}
+          showFirstLast
+          currentPage={0}
+          nbHits={0}
+          nbPages={0}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });
diff --git a/src/components/Pagination/__tests__/__snapshots__/Pagination-test.js.snap b/src/components/Pagination/__tests__/__snapshots__/Pagination-test.js.snap
@@ -332,6 +332,76 @@ exports[`Pagination should display the first/last link 1`] = `
 </ul>
 `;
 
+exports[`Pagination should have all buttons disabled if there are no results 1`] = `
+<ul
+  className="root"
+>
+  <li
+    className="item first disabled"
+  >
+    <span
+      className=""
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "",
+        }
+      }
+    />
+  </li>
+  <li
+    className="item previous disabled"
+  >
+    <span
+      className=""
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "",
+        }
+      }
+    />
+  </li>
+  <li
+    className="item page active"
+  >
+    <a
+      aria-label={1}
+      className=""
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": 1,
+        }
+      }
+      href="[0]"
+      onClick={[Function]}
+    />
+  </li>
+  <li
+    className="item next disabled"
+  >
+    <span
+      className=""
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "",
+        }
+      }
+    />
+  </li>
+  <li
+    className="item last disabled"
+  >
+    <span
+      className=""
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "",
+        }
+      }
+    />
+  </li>
+</ul>
+`;
+
 exports[`Pagination should render five elements 1`] = `
 <ul
   className="root"