forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-04-19 04:56:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Extracted paginator used in SortableBarGraph to its own component

Browse Source
This commit is contained in:
Alejandro Celaya
2019-09-21 18:29:58 +02:00
parent 99475fc311
commit 7bbff114a4
3 changed files with 38 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/common/SimplePaginator.js Normal file
View File

@@ -0,0 +1,30 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
import { rangeOf } from '../utils/utils';
const propTypes = {
pagesCount: PropTypes.number.isRequired,
currentPage: PropTypes.number.isRequired,
setCurrentPage: PropTypes.func.isRequired,
};
const SimplePaginator = ({ pagesCount, currentPage, setCurrentPage }) => (
<Pagination listClassName="flex-wrap mb-0">
<PaginationItem disabled={currentPage <= 1}>
<PaginationLink previous tag="span" onClick={setCurrentPage(currentPage - 1)} />
</PaginationItem>
{rangeOf(pagesCount, (page) => (
<PaginationItem key={page} active={page === currentPage}>
<PaginationLink tag="span" onClick={setCurrentPage(page)}>{page}</PaginationLink>
</PaginationItem>
))}
<PaginationItem disabled={currentPage >= pagesCount}>
<PaginationLink next tag="span" onClick={setCurrentPage(currentPage + 1)} />
</PaginationItem>
</Pagination>
);
SimplePaginator.propTypes = propTypes;
export default SimplePaginator;

19
src/visits/SortableBarGraph.js
View File

@@ -1,10 +1,10 @@
import React from 'react';
import PropTypes from 'prop-types';
import { fromPairs, head, keys, pipe, prop, reverse, sortBy, splitEvery, toLower, toPairs, type } from 'ramda';
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
import SortingDropdown from '../utils/SortingDropdown';
import PaginationDropdown from '../utils/PaginationDropdown';
import { rangeOf, roundTen } from '../utils/utils';
import SimplePaginator from '../common/SimplePaginator';
import GraphCard from './GraphCard';
const { max } = Math;
@@ -66,22 +66,9 @@ export default class SortableBarGraph extends React.Component {
renderPagination(pagesCount) {
const { currentPage } = this.state;
const setCurrentPage = (currentPage) => () => this.setState({ currentPage });
return (
<Pagination listClassName="flex-wrap mb-0">
<PaginationItem disabled={currentPage === 1}>
<PaginationLink previous tag="span" onClick={() => this.setState({ currentPage: currentPage - 1 })} />
</PaginationItem>
{rangeOf(pagesCount, (page) => (
<PaginationItem key={page} active={page === currentPage}>
<PaginationLink tag="span" onClick={() => this.setState({ currentPage: page })}>{page}</PaginationLink>
</PaginationItem>
))}
<PaginationItem disabled={currentPage >= pagesCount}>
<PaginationLink next tag="span" onClick={() => this.setState({ currentPage: currentPage + 1 })} />
</PaginationItem>
</Pagination>
);
return <SimplePaginator currentPage={currentPage} pagesCount={pagesCount} setCurrentPage={setCurrentPage} />;
}
render() {

13
test/visits/SortableBarGraph.test.js
View File

@@ -49,12 +49,10 @@ describe('<SortableBarGraph />', () => {
assert = (sortName, sortDir, expectedKeys, expectedValues, done) => {
dropdown.prop('onChange')(sortName, sortDir);
setImmediate(() => {
const graphCard = wrapper.find(GraphCard);
const statsKeys = keys(graphCard.prop('stats'));
const statsValues = values(graphCard.prop('stats'));
const stats = wrapper.find(GraphCard).prop('stats');
expect(statsKeys).toEqual(expectedKeys);
expect(statsValues).toEqual(expectedValues);
expect(keys(stats)).toEqual(expectedKeys);
expect(values(stats)).toEqual(expectedValues);
done();
});
};
@@ -80,10 +78,9 @@ describe('<SortableBarGraph />', () => {
assert = (itemsPerPage, expectedStats, done) => {
dropdown.prop('setValue')(itemsPerPage);
setImmediate(() => {
const graphCard = wrapper.find(GraphCard);
const statsKeys = keys(graphCard.prop('stats'));
const stats = wrapper.find(GraphCard).prop('stats');
expect(statsKeys).toEqual(expectedStats);
expect(keys(stats)).toEqual(expectedStats);
done();
});
};