forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-11 10:03:51 +00:00
Code Issues Packages Projects Releases 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
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, setCurrentPage: PropTypes.func.isRequired,
}; };
export const ellipsis = '...'; export const ELLIPSIS = '...';
const pagination = (currentPage, pageCount) => { export const progressivePagination = (currentPage, pageCount) => {
const delta = 2; const delta = 2;
const pages = range( const pages = range(
max(delta, currentPage - delta), max(delta, currentPage - delta),
@@ -20,10 +20,10 @@ const pagination = (currentPage, pageCount) => {
); );
if (currentPage - delta > delta) { if (currentPage - delta > delta) {
pages.unshift(ellipsis); pages.unshift(ELLIPSIS);
} }
if (currentPage + delta < pageCount - 1) { if (currentPage + delta < pageCount - 1) {
pages.push(ellipsis); pages.push(ELLIPSIS);
} }
pages.unshift(1); pages.unshift(1);
@@ -44,11 +44,11 @@ const SimplePaginator = ({ pagesCount, currentPage, setCurrentPage }) => {
<PaginationItem disabled={currentPage <= 1}> <PaginationItem disabled={currentPage <= 1}>
<PaginationLink previous tag="span" onClick={onClick(currentPage - 1)} /> <PaginationLink previous tag="span" onClick={onClick(currentPage - 1)} />
</PaginationItem> </PaginationItem>
{pagination(currentPage, pagesCount).map((page, index) => ( {progressivePagination(currentPage, pagesCount).map((page, index) => (
<PaginationItem <PaginationItem
key={page !== ellipsis ? page : `${page}_${index}`} key={page !== ELLIPSIS ? page : `${page}_${index}`}
active={page === currentPage} active={page === currentPage}
disabled={page === ellipsis} disabled={page === ELLIPSIS}
> >
<PaginationLink tag="span" onClick={onClick(page)}>{page}</PaginationLink> <PaginationLink tag="span" onClick={onClick(page)}>{page}</PaginationLink>
</PaginationItem> </PaginationItem>

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

@@ -2,7 +2,7 @@ import React from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap'; import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { rangeOf } from '../utils/utils'; import { ELLIPSIS, progressivePagination } from '../common/SimplePaginator';
const propTypes = { const propTypes = {
serverId: PropTypes.string.isRequired, 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; const { currentPage, pagesCount = 0 } = paginator;
if (pagesCount <= 1) { if (pagesCount <= 1) {
@@ -20,8 +20,12 @@ export default function Paginator({ paginator = {}, serverId }) {
} }
const renderPages = () => const renderPages = () =>
rangeOf(pagesCount, (pageNumber) => ( progressivePagination(currentPage, pagesCount).map((pageNumber, index) => (
<PaginationItem key={pageNumber} active={currentPage === pageNumber}> <PaginationItem
key={pageNumber !== ELLIPSIS ? pageNumber : `${pageNumber}_${index}`}
active={currentPage === pageNumber}
disabled={pageNumber === ELLIPSIS}
>
<PaginationLink <PaginationLink
tag={Link} tag={Link}
to={`/server/${serverId}/list-short-urls/${pageNumber}`} to={`/server/${serverId}/list-short-urls/${pageNumber}`}
@@ -50,6 +54,8 @@ export default function Paginator({ paginator = {}, serverId }) {
</PaginationItem> </PaginationItem>
</Pagination> </Pagination>
); );
} };
Paginator.propTypes = propTypes; 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 { shallow } from 'enzyme';
import { identity } from 'ramda'; import { identity } from 'ramda';
import { PaginationItem } from 'reactstrap'; import { PaginationItem } from 'reactstrap';
import SimplePaginator, { ellipsis } from '../../src/common/SimplePaginator'; import SimplePaginator, { ELLIPSIS } from '../../src/common/SimplePaginator';
describe('<SimplePaginator />', () => { describe('<SimplePaginator />', () => {
let wrapper; let wrapper;
@@ -18,34 +18,34 @@ describe('<SimplePaginator />', () => {
expect(createWrapper(pagesCount).text()).toEqual(''); expect(createWrapper(pagesCount).text()).toEqual('');
}); });
describe('ellipsis are rendered where expected', () => { describe('ELLIPSIS are rendered where expected', () => {
const getItemsForPages = (pagesCount, currentPage) => { const getItemsForPages = (pagesCount, currentPage) => {
const paginator = createWrapper(pagesCount, currentPage); const paginator = createWrapper(pagesCount, currentPage);
const items = paginator.find(PaginationItem); 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 }; return { items, itemsWithEllipsis };
}; };
it('renders first ellipsis', () => { it('renders first ELLIPSIS', () => {
const { items, itemsWithEllipsis } = getItemsForPages(9, 7); const { items, itemsWithEllipsis } = getItemsForPages(9, 7);
expect(items.at(2).html()).toContain(ellipsis); expect(items.at(2).html()).toContain(ELLIPSIS);
expect(itemsWithEllipsis).toHaveLength(1); expect(itemsWithEllipsis).toHaveLength(1);
}); });
it('renders last ellipsis', () => { it('renders last ELLIPSIS', () => {
const { items, itemsWithEllipsis } = getItemsForPages(9, 2); 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); expect(itemsWithEllipsis).toHaveLength(1);
}); });
it('renders both ellipsis', () => { it('renders both ELLIPSIS', () => {
const { items, itemsWithEllipsis } = getItemsForPages(20, 9); const { items, itemsWithEllipsis } = getItemsForPages(20, 9);
expect(items.at(2).html()).toContain(ellipsis); expect(items.at(2).html()).toContain(ELLIPSIS);
expect(items.at(items.length - 3).html()).toContain(ellipsis); expect(items.at(items.length - 3).html()).toContain(ELLIPSIS);
expect(itemsWithEllipsis).toHaveLength(2); expect(itemsWithEllipsis).toHaveLength(2);
}); });
}); });