OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

Add page numbers to item search

Browse source 
I'm gonna make this a bit more powerful later, but just for now, the text "Page 1 of 27" shows up!

I also don't like that the page number has to blink out while we load the new stuff; there are multiple solutions, but tbh I think the Apollo Cache should be the one to handle this, and that we can do it by refactoring the query structure a bit!
This commit is contained in:
Emi Matchu 2021-06-21 10:21:25 -07:00
parent 56c91e900a
commit 7d1872920c
1 changed files with 15 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/app/components/PaginationToolbar.js
View file

@ -1,27 +1,33 @@
import React from "react";
import { Button, Flex } from "@chakra-ui/react";
import { Box, Button, Flex } from "@chakra-ui/react";
import { Link, useLocation } from "react-router-dom";
const PER_PAGE = 30;
function PaginationToolbar({ isLoading, totalCount, ...props }) {
const { search } = useLocation();
const currentOffset =
parseInt(new URLSearchParams(search).get("offset")) || 0;
const currentPageIndex = Math.floor(currentOffset / PER_PAGE);
const currentPageNumber = currentPageIndex + 1;
const numTotalPages = totalCount ? Math.ceil(totalCount / PER_PAGE) : null;
const prevPageSearchParams = new URLSearchParams(search);
const prevPageOffset = currentOffset - 30;
const prevPageOffset = currentOffset - PER_PAGE;
prevPageSearchParams.set("offset", prevPageOffset);
const prevPageUrl = "?" + prevPageSearchParams.toString();
const prevPageIsDisabled = isLoading || prevPageOffset < 0;
const nextPageSearchParams = new URLSearchParams(search);
const nextPageOffset = currentOffset + 30;
const nextPageOffset = currentOffset + PER_PAGE;
nextPageSearchParams.set("offset", nextPageOffset);
const nextPageUrl = "?" + nextPageSearchParams.toString();
const nextPageIsDisabled = isLoading || nextPageOffset >= totalCount;
return (
<Flex justify="space-between" {...props}>
<Flex align="center" justify="space-between" {...props}>
<Button
as={prevPageIsDisabled ? "button" : Link}
to={prevPageIsDisabled ? undefined : prevPageUrl}
@ -30,6 +36,11 @@ function PaginationToolbar({ isLoading, totalCount, ...props }) {
>
← Prev
</Button>
{numTotalPages && (
<Box>
Page {currentPageNumber} of {numTotalPages}
</Box>
)}
<Button
as={nextPageIsDisabled ? "button" : Link}
to={nextPageIsDisabled ? undefined : nextPageUrl}