Navigate item search by page number
The page number is a dropdown now! Wowie!
This commit is contained in:
parent
3537ef9a6f
commit
d025f2ba7a
1 changed files with 58 additions and 5 deletions
|
@ -1,11 +1,12 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { Box, Button, Flex } from "@chakra-ui/react";
|
import { Box, Button, Flex, Select } from "@chakra-ui/react";
|
||||||
import { Link, useLocation } from "react-router-dom";
|
import { Link, useHistory, useLocation } from "react-router-dom";
|
||||||
|
|
||||||
const PER_PAGE = 30;
|
const PER_PAGE = 30;
|
||||||
|
|
||||||
function PaginationToolbar({ isLoading, totalCount, ...props }) {
|
function PaginationToolbar({ isLoading, totalCount, ...props }) {
|
||||||
const { search } = useLocation();
|
const { search } = useLocation();
|
||||||
|
const history = useHistory();
|
||||||
|
|
||||||
const currentOffset =
|
const currentOffset =
|
||||||
parseInt(new URLSearchParams(search).get("offset")) || 0;
|
parseInt(new URLSearchParams(search).get("offset")) || 0;
|
||||||
|
@ -26,6 +27,18 @@ function PaginationToolbar({ isLoading, totalCount, ...props }) {
|
||||||
const nextPageUrl = "?" + nextPageSearchParams.toString();
|
const nextPageUrl = "?" + nextPageSearchParams.toString();
|
||||||
const nextPageIsDisabled = isLoading || nextPageOffset >= totalCount;
|
const nextPageIsDisabled = isLoading || nextPageOffset >= totalCount;
|
||||||
|
|
||||||
|
const goToPageNumber = React.useCallback(
|
||||||
|
(newPageNumber) => {
|
||||||
|
const newPageIndex = newPageNumber - 1;
|
||||||
|
const newPageOffset = newPageIndex * PER_PAGE;
|
||||||
|
|
||||||
|
const newPageSearchParams = new URLSearchParams(search);
|
||||||
|
newPageSearchParams.set("offset", newPageOffset);
|
||||||
|
history.push({ search: newPageSearchParams.toString() });
|
||||||
|
},
|
||||||
|
[search, history]
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Flex align="center" justify="space-between" {...props}>
|
<Flex align="center" justify="space-between" {...props}>
|
||||||
<Button
|
<Button
|
||||||
|
@ -37,9 +50,18 @@ function PaginationToolbar({ isLoading, totalCount, ...props }) {
|
||||||
← Prev
|
← Prev
|
||||||
</Button>
|
</Button>
|
||||||
{numTotalPages && (
|
{numTotalPages && (
|
||||||
<Box>
|
<Flex align="center">
|
||||||
Page {currentPageNumber} of {numTotalPages}
|
<Box flex="0 0 auto">Page</Box>
|
||||||
</Box>
|
<Box width="1" />
|
||||||
|
<PageNumberSelect
|
||||||
|
currentPageNumber={currentPageNumber}
|
||||||
|
numTotalPages={numTotalPages}
|
||||||
|
onChange={goToPageNumber}
|
||||||
|
marginBottom="-2px"
|
||||||
|
/>
|
||||||
|
<Box width="1" />
|
||||||
|
<Box flex="0 0 auto">of {numTotalPages}</Box>
|
||||||
|
</Flex>
|
||||||
)}
|
)}
|
||||||
<Button
|
<Button
|
||||||
as={nextPageIsDisabled ? "button" : Link}
|
as={nextPageIsDisabled ? "button" : Link}
|
||||||
|
@ -53,4 +75,35 @@ function PaginationToolbar({ isLoading, totalCount, ...props }) {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function PageNumberSelect({
|
||||||
|
currentPageNumber,
|
||||||
|
numTotalPages,
|
||||||
|
onChange,
|
||||||
|
...props
|
||||||
|
}) {
|
||||||
|
const allPageNumbers = Array.from({ length: numTotalPages }, (_, i) => i + 1);
|
||||||
|
|
||||||
|
const handleChange = React.useCallback(
|
||||||
|
(e) => onChange(Number(e.target.value)),
|
||||||
|
[onChange]
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Select
|
||||||
|
value={currentPageNumber}
|
||||||
|
onChange={handleChange}
|
||||||
|
width="7ch"
|
||||||
|
variant="flushed"
|
||||||
|
textAlign="center"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{allPageNumbers.map((pageNumber) => (
|
||||||
|
<option key={pageNumber} value={pageNumber}>
|
||||||
|
{pageNumber}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export default PaginationToolbar;
|
export default PaginationToolbar;
|
||||||
|
|
Loading…
Reference in a new issue