Add prev/next pagination to item search page

This commit is contained in:
Emi Matchu 2021-02-10 14:23:25 -08:00
parent 86de09b285
commit 67784bd5e3

View file

@ -1,8 +1,8 @@
import React from "react";
import { Box, Flex, Wrap, WrapItem } from "@chakra-ui/react";
import { Box, Button, Flex, Wrap, WrapItem } from "@chakra-ui/react";
import gql from "graphql-tag";
import { useQuery } from "@apollo/client";
import { useHistory, useLocation, useParams } from "react-router-dom";
import { Link, useHistory, useLocation, useParams } from "react-router-dom";
import SearchToolbar, {
emptySearchQuery,
@ -11,7 +11,6 @@ import SearchToolbar, {
import SquareItemCard, {
SquareItemCardSkeleton,
} from "./components/SquareItemCard";
import WIPCallout from "./components/WIPCallout";
import { Delay, ErrorMessage, useCommonStyles, useDebounce } from "./util";
function ItemSearchPage() {
@ -168,9 +167,13 @@ function ItemSearchPageResults({ query: latestQuery, offset }) {
if (loading) {
return (
<Delay>
<ItemSearchPageResultsLoading />
</Delay>
<Box>
<ItemSearchPagePagination isLoading marginBottom="6" />
<Delay>
<ItemSearchPageResultsLoading />
</Delay>
<ItemSearchPagePagination isLoading marginTop="4" />
</Box>
);
}
@ -197,6 +200,10 @@ function ItemSearchPageResults({ query: latestQuery, offset }) {
return (
<Box>
<ItemSearchPagePagination
numTotalItems={data.itemSearch.numTotalItems}
marginBottom="6"
/>
<Wrap justify="center" spacing="4">
{data.itemSearch.items.map((item) => (
<WrapItem key={item.id}>
@ -204,21 +211,54 @@ function ItemSearchPageResults({ query: latestQuery, offset }) {
</WrapItem>
))}
</Wrap>
{data.itemSearch.items.length >= 30 && (
<Flex justify="center">
<WIPCallout
details="I wanted to get this out asap for looking up specific items! Multi-page browsing coming soon 😅"
marginTop="6"
>
We only show the first 30 results for now! 😅 (
{data.itemSearch.numTotalItems.toLocaleString()} total)
</WIPCallout>
</Flex>
)}
<ItemSearchPagePagination
numTotalItems={data.itemSearch.numTotalItems}
marginTop="4"
/>
</Box>
);
}
function ItemSearchPagePagination({ isLoading, numTotalItems, ...props }) {
const { search } = useLocation();
const currentOffset =
parseInt(new URLSearchParams(search).get("offset")) || 0;
const prevPageSearchParams = new URLSearchParams(search);
const prevPageOffset = currentOffset - 30;
prevPageSearchParams.set("offset", prevPageOffset);
const prevPageUrl = "?" + prevPageSearchParams.toString();
const prevPageIsDisabled = isLoading || prevPageOffset < 0;
const nextPageSearchParams = new URLSearchParams(search);
const nextPageOffset = currentOffset + 30;
nextPageSearchParams.set("offset", nextPageOffset);
const nextPageUrl = "?" + nextPageSearchParams.toString();
const nextPageIsDisabled = isLoading || nextPageOffset >= numTotalItems;
return (
<Flex justify="space-between" {...props}>
<Button
as={prevPageIsDisabled ? "button" : Link}
to={prevPageIsDisabled ? undefined : prevPageUrl}
_disabled={{ cursor: isLoading ? "wait" : "not-allowed", opacity: 0.4 }}
isDisabled={prevPageIsDisabled}
>
Prev
</Button>
<Button
as={nextPageIsDisabled ? "button" : Link}
to={nextPageIsDisabled ? undefined : nextPageUrl}
_disabled={{ cursor: isLoading ? "wait" : "not-allowed", opacity: 0.4 }}
isDisabled={nextPageIsDisabled}
>
Next
</Button>
</Flex>
);
}
function ItemSearchPageResultsLoading() {
return (
<Wrap justify="center" spacing="4">