// @flow
import React from 'react';
import { withRouter } from 'react-router';
import { Form, FormField } from 'component/common/form';
import ReactPaginate from 'react-paginate';
const PAGINATE_PARAM = 'page';
const ENTER_KEY_CODE = 13;
type Props = {
loading: boolean,
totalPages: number,
location: { search: string },
history: { push: string => void },
onPageChange?: number => void,
};
function Paginate(props: Props) {
const { totalPages, loading, location, history, onPageChange } = props;
const { search } = location;
const urlParams = new URLSearchParams(search);
const currentPage = Number(urlParams.get(PAGINATE_PARAM)) || 1;
function handleChangePage(newPageNumber: number) {
if (onPageChange) {
onPageChange(newPageNumber);
}
if (currentPage !== newPageNumber) {
history.push(`?${PAGINATE_PARAM}=${newPageNumber}`);
}
}
function handlePaginateKeyUp(e: SyntheticKeyboardEvent<*>) {
const newPage = Number(e.currentTarget.value);
const isEnterKey = e.keyCode === ENTER_KEY_CODE;
if (newPage && isEnterKey && newPage > 0 && newPage <= totalPages) {
handleChangePage(newPage);
}
}
return (
// Hide the paginate controls if we are loading or there is only one page
// This is a little weird but it makes the component
// really nice to work with. It will always handle fetching your data,
// even if the data returned doesn't have more than one page
// fetchStuff(page)} />
);
}
export default withRouter(Paginate);