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

extract PaginationToolbar from ItemSearchPage

Browse source 
wanna reuse in like outfits page
This commit is contained in:
Emi Matchu 2021-05-21 00:50:55 -07:00
parent a676be0f0f
commit e3ae5e7116
2 changed files with 54 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
src/app/ItemSearchPage.js
View file

@ -1,8 +1,8 @@
import React from "react"; import React from "react";
import { Box, Button, Flex, Wrap, WrapItem } from "@chakra-ui/react"; import { Box, Wrap, WrapItem } from "@chakra-ui/react";
import gql from "graphql-tag"; import gql from "graphql-tag";
import { useQuery } from "@apollo/client"; import { useQuery } from "@apollo/client";
import { Link, useHistory, useLocation, useParams } from "react-router-dom"; import { useHistory, useLocation, useParams } from "react-router-dom";
import SearchToolbar, { import SearchToolbar, {
emptySearchQuery, emptySearchQuery,
@ -12,6 +12,7 @@ import SquareItemCard, {
SquareItemCardSkeleton, SquareItemCardSkeleton,
} from "./components/SquareItemCard"; } from "./components/SquareItemCard";
import { Delay, ErrorMessage, useCommonStyles, useDebounce } from "./util"; import { Delay, ErrorMessage, useCommonStyles, useDebounce } from "./util";
import PaginationToolbar from "./components/PaginationToolbar";
function ItemSearchPage() { function ItemSearchPage() {
const [query, offset, setQuery] = useSearchQueryInUrl(); const [query, offset, setQuery] = useSearchQueryInUrl();
@ -170,11 +171,11 @@ function ItemSearchPageResults({ query: latestQuery, offset }) {
if (loading) { if (loading) {
return ( return (
<Box> <Box>
<ItemSearchPagePagination isLoading marginBottom="6" /> <PaginationToolbar isLoading marginBottom="6" />
<Delay> <Delay>
<ItemSearchPageResultsLoading /> <ItemSearchPageResultsLoading />
</Delay> </Delay>
<ItemSearchPagePagination isLoading marginTop="4" /> <PaginationToolbar isLoading marginTop="4" />
</Box> </Box>
); );
} }
@ -202,8 +203,8 @@ function ItemSearchPageResults({ query: latestQuery, offset }) {
return ( return (
<Box> <Box>
<ItemSearchPagePagination <PaginationToolbar
numTotalItems={data.itemSearch.numTotalItems} totalCount={data.itemSearch.numTotalItems}
marginBottom="6" marginBottom="6"
/> />
<Wrap justify="center" spacing="4"> <Wrap justify="center" spacing="4">
@ -213,54 +214,14 @@ function ItemSearchPageResults({ query: latestQuery, offset }) {
</WrapItem> </WrapItem>
))} ))}
</Wrap> </Wrap>
<ItemSearchPagePagination <PaginationToolbar
numTotalItems={data.itemSearch.numTotalItems} totalCount={data.itemSearch.numTotalItems}
marginTop="4" marginTop="4"
/> />
</Box> </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() { function ItemSearchPageResultsLoading() {
return ( return (
<Wrap justify="center" spacing="4"> <Wrap justify="center" spacing="4">

45
src/app/components/PaginationToolbar.js Normal file
View file

@ -0,0 +1,45 @@
import React from "react";
import { Button, Flex } from "@chakra-ui/react";
import { Link, useLocation } from "react-router-dom";
function PaginationToolbar({ isLoading, totalCount, ...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 >= totalCount;
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>
);
}
export default PaginationToolbar;