mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-11 02:37:22 +03:00
Code Issues Projects Releases Packages Wiki Activity

Used progressive pagination for the short URLs list

Browse source
This commit is contained in:
Alejandro Celaya 2020-03-28 17:19:33 +01:00
parent ea5ec63a22
commit 06db4f6556
3 changed files with 28 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/common/SimplePaginator.js
View file

@ -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 }) => {
<PaginationItem disabled={currentPage <= 1}>
<PaginationLink previous tag="span" onClick={onClick(currentPage - 1)} />
</PaginationItem>
{pagination(currentPage, pagesCount).map((page, index) => (
{progressivePagination(currentPage, pagesCount).map((page, index) => (
<PaginationItem
key={page !== ellipsis ? page : `${page}_${index}`}
key={page !== ELLIPSIS ? page : `${page}_${index}`}
active={page === currentPage}
disabled={page === ellipsis}
disabled={page === ELLIPSIS}
>
<PaginationLink tag="span" onClick={onClick(page)}>{page}</PaginationLink>
</PaginationItem>

16
src/short-urls/Paginator.js
View file

@ -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) => (
<PaginationItem key={pageNumber} active={currentPage === pageNumber}>
progressivePagination(currentPage, pagesCount).map((pageNumber, index) => (
<PaginationItem
key={pageNumber !== ELLIPSIS ? pageNumber : `${pageNumber}_${index}`}
active={currentPage === pageNumber}
disabled={pageNumber === ELLIPSIS}
>
<PaginationLink
tag={Link}
to={`/server/${serverId}/list-short-urls/${pageNumber}`}
@ -50,6 +54,8 @@ export default function Paginator({ paginator = {}, serverId }) {
</PaginationItem>
</Pagination>
);
}
};
Paginator.propTypes = propTypes;
export default Paginator;

20
test/common/SimplePaginator.test.js
View file

@ -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('<SimplePaginator />', () => {
let wrapper;
@ -18,34 +18,34 @@ describe('<SimplePaginator />', () => {
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);
});
});