forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-05-27 07:36:34 +00:00
Code Issues Packages Projects Releases 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
Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <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 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/ 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 React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import Paginator from './Paginator';
import SearchBar from './SearchBar'; import SearchBar from './SearchBar';
import './ShortUrls.scss'; import './ShortUrls.scss';
import ShortUrlsList from './ShortUrlsList'; import ShortUrlsList from './ShortUrlsList';
@@ -9,7 +10,7 @@ export function ShortUrls(props) {
<div className="short-urls-container"> <div className="short-urls-container">
<div className="form-group"><SearchBar /></div> <div className="form-group"><SearchBar /></div>
<ShortUrlsList {...props} shortUrlsList={props.shortUrlsList.data || []} /> <ShortUrlsList {...props} shortUrlsList={props.shortUrlsList.data || []} />
{/* Pagination */} <Paginator paginator={props.shortUrlsList.pagination} serverId={props.match.params.serverId} />
</div> </div>
); );
} }