diff --git a/src/app/ItemSearchPage.js b/src/app/ItemSearchPage.js
index c28855c3..dfdb04ce 100644
--- a/src/app/ItemSearchPage.js
+++ b/src/app/ItemSearchPage.js
@@ -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 (
-
-
-
+
+
+
+
+
+
+
);
}
@@ -197,6 +200,10 @@ function ItemSearchPageResults({ query: latestQuery, offset }) {
return (
+
{data.itemSearch.items.map((item) => (
@@ -204,21 +211,54 @@ function ItemSearchPageResults({ query: latestQuery, offset }) {
))}
- {data.itemSearch.items.length >= 30 && (
-
-
- We only show the first 30 results for now! 😅 (
- {data.itemSearch.numTotalItems.toLocaleString()} total)
-
-
- )}
+
);
}
+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 (
+
+
+
+
+ );
+}
+
function ItemSearchPageResultsLoading() {
return (