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

Added pagination component

Browse source
This commit is contained in:
Alejandro Celaya 2018-06-17 18:13:55 +02:00
parent 66a81d7e58
commit ac62410926
3 changed files with 64 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/index.html
View file

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<meta name="theme-color" content="#4696e5">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

61
src/short-urls/Paginator.js Normal file
View file

@ -0,0 +1,61 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
import { connect } from 'react-redux';
import { updateShortUrlsList } from './reducers/shortUrlsList';
export class Paginator extends React.Component {
render() {
const { paginator = {}, serverId } = this.props;
const { currentPage, pagesCount = 0 } = paginator;
if (pagesCount <= 1) {
return null;
}
const renderPages = () => {
const pages = [];
for (let i = 1; i <= pagesCount; i++) {
pages.push(
<PaginationItem key={i} active={currentPage === i}>
<PaginationLink
tag={Link}
to={`/server/${serverId}/list-short-urls/${i}`}
onClick={() => this.updatePage(i)}
>
{i}
</PaginationLink>
</PaginationItem>
);
}
return pages;
};
return (
<Pagination>
<PaginationItem disabled={currentPage === 1}>
<PaginationLink previous
tag={Link}
to={`/server/${serverId}/list-short-urls/${currentPage - 1}`}
onClick={() => this.updatePage(currentPage - 1)} />
</PaginationItem>
{renderPages()}
<PaginationItem disabled={currentPage >= pagesCount}>
<PaginationLink next
tag={Link}
to={`/server/${serverId}/list-short-urls/${currentPage + 1}`}
onClick={() => this.updatePage(currentPage + 1)} />
</PaginationItem>
</Pagination>
);
}
updatePage(page) {
this.props.updateShortUrlsList({ ...this.props.shortUrlsListParams, page })
}
}
export default connect(state => ({
shortUrlsListParams: state.shortUrlsListParams,
}), { updateShortUrlsList })(Paginator);

3
src/short-urls/ShortUrls.js
View file

@ -1,5 +1,6 @@
import React from 'react';
import { connect } from 'react-redux';
import Paginator from './Paginator';
import SearchBar from './SearchBar';
import './ShortUrls.scss';
import ShortUrlsList from './ShortUrlsList';
@ -9,7 +10,7 @@ export function ShortUrls(props) {
<div className="short-urls-container">
<div className="form-group"><SearchBar /></div>
<ShortUrlsList {...props} shortUrlsList={props.shortUrlsList.data || []} />
{/* Pagination */}
<Paginator paginator={props.shortUrlsList.pagination} serverId={props.match.params.serverId} />
</div>
);
}