diff --git a/src/common/SimplePaginator.js b/src/common/SimplePaginator.js
index abc59c6c..fcb890df 100644
--- a/src/common/SimplePaginator.js
+++ b/src/common/SimplePaginator.js
@@ -10,9 +10,9 @@ const propTypes = {
setCurrentPage: PropTypes.func.isRequired,
};
-export const ellipsis = '...';
+export const ELLIPSIS = '...';
-const pagination = (currentPage, pageCount) => {
+export const progressivePagination = (currentPage, pageCount) => {
const delta = 2;
const pages = range(
max(delta, currentPage - delta),
@@ -20,10 +20,10 @@ const pagination = (currentPage, pageCount) => {
);
if (currentPage - delta > delta) {
- pages.unshift(ellipsis);
+ pages.unshift(ELLIPSIS);
}
if (currentPage + delta < pageCount - 1) {
- pages.push(ellipsis);
+ pages.push(ELLIPSIS);
}
pages.unshift(1);
@@ -44,11 +44,11 @@ const SimplePaginator = ({ pagesCount, currentPage, setCurrentPage }) => {
- {pagination(currentPage, pagesCount).map((page, index) => (
+ {progressivePagination(currentPage, pagesCount).map((page, index) => (
{page}
diff --git a/src/short-urls/Paginator.js b/src/short-urls/Paginator.js
index c1458c02..2528770a 100644
--- a/src/short-urls/Paginator.js
+++ b/src/short-urls/Paginator.js
@@ -2,7 +2,7 @@ import React from 'react';
import { Link } from 'react-router-dom';
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
import PropTypes from 'prop-types';
-import { rangeOf } from '../utils/utils';
+import { ELLIPSIS, progressivePagination } from '../common/SimplePaginator';
const propTypes = {
serverId: PropTypes.string.isRequired,
@@ -12,7 +12,7 @@ const propTypes = {
}),
};
-export default function Paginator({ paginator = {}, serverId }) {
+const Paginator = ({ paginator = {}, serverId }) => {
const { currentPage, pagesCount = 0 } = paginator;
if (pagesCount <= 1) {
@@ -20,8 +20,12 @@ export default function Paginator({ paginator = {}, serverId }) {
}
const renderPages = () =>
- rangeOf(pagesCount, (pageNumber) => (
-
+ progressivePagination(currentPage, pagesCount).map((pageNumber, index) => (
+
);
-}
+};
Paginator.propTypes = propTypes;
+
+export default Paginator;
diff --git a/test/common/SimplePaginator.test.js b/test/common/SimplePaginator.test.js
index 97a083fc..a34aefdc 100644
--- a/test/common/SimplePaginator.test.js
+++ b/test/common/SimplePaginator.test.js
@@ -2,7 +2,7 @@ import React from 'react';
import { shallow } from 'enzyme';
import { identity } from 'ramda';
import { PaginationItem } from 'reactstrap';
-import SimplePaginator, { ellipsis } from '../../src/common/SimplePaginator';
+import SimplePaginator, { ELLIPSIS } from '../../src/common/SimplePaginator';
describe('', () => {
let wrapper;
@@ -18,34 +18,34 @@ describe('', () => {
expect(createWrapper(pagesCount).text()).toEqual('');
});
- describe('ellipsis are rendered where expected', () => {
+ describe('ELLIPSIS are rendered where expected', () => {
const getItemsForPages = (pagesCount, currentPage) => {
const paginator = createWrapper(pagesCount, currentPage);
const items = paginator.find(PaginationItem);
- const itemsWithEllipsis = items.filterWhere((item) => item.key() && item.key().includes(ellipsis));
+ const itemsWithEllipsis = items.filterWhere((item) => item.key() && item.key().includes(ELLIPSIS));
return { items, itemsWithEllipsis };
};
- it('renders first ellipsis', () => {
+ it('renders first ELLIPSIS', () => {
const { items, itemsWithEllipsis } = getItemsForPages(9, 7);
- expect(items.at(2).html()).toContain(ellipsis);
+ expect(items.at(2).html()).toContain(ELLIPSIS);
expect(itemsWithEllipsis).toHaveLength(1);
});
- it('renders last ellipsis', () => {
+ it('renders last ELLIPSIS', () => {
const { items, itemsWithEllipsis } = getItemsForPages(9, 2);
- expect(items.at(items.length - 3).html()).toContain(ellipsis);
+ expect(items.at(items.length - 3).html()).toContain(ELLIPSIS);
expect(itemsWithEllipsis).toHaveLength(1);
});
- it('renders both ellipsis', () => {
+ it('renders both ELLIPSIS', () => {
const { items, itemsWithEllipsis } = getItemsForPages(20, 9);
- expect(items.at(2).html()).toContain(ellipsis);
- expect(items.at(items.length - 3).html()).toContain(ellipsis);
+ expect(items.at(2).html()).toContain(ELLIPSIS);
+ expect(items.at(items.length - 3).html()).toContain(ELLIPSIS);
expect(itemsWithEllipsis).toHaveLength(2);
});
});