import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { navigate } from '@reach/router'; import { gettext } from '../utils/constants'; import '../css/pagination.css'; const propTypes = { currentPage: PropTypes.number.isRequired, gotoPreviousPage: PropTypes.func.isRequired, gotoNextPage: PropTypes.func.isRequired, hasNextPage: PropTypes.bool.isRequired, resetPerPage: PropTypes.func.isRequired, curPerPage: PropTypes.number.isRequired }; class Paginator extends Component { resetPerPage = (e) => { const perPage = parseInt(e.target.value); this.updateURL(1, perPage); this.props.resetPerPage(perPage); } goToPrevious = () => { const { currentPage, curPerPage } = this.props; this.updateURL(currentPage - 1, curPerPage); this.props.gotoPreviousPage(); } goToNext = () => { const { currentPage, curPerPage } = this.props; this.updateURL(currentPage + 1, curPerPage); this.props.gotoNextPage(); } updateURL = (page, perPage) => { let url = new URL(location.href); let searchParams = new URLSearchParams(url.search); searchParams.set('page', page); searchParams.set('per_page', perPage); url.search = searchParams.toString(); navigate(url.toString()); } getPerPageText = (perPage) => { return gettext('{number_placeholder} / Page').replace('{number_placeholder}', perPage); } render() { const { curPerPage, currentPage } = this.props; return (
{currentPage}
); } } Paginator.propTypes = propTypes; export default Paginator;