Add prev/next pagination to item search page

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 (
-      <Delay>
+      <Box>
-        <ItemSearchPageResultsLoading />
+        <ItemSearchPagePagination isLoading marginBottom="6" />
-      </Delay>
+        <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 && (
+      <ItemSearchPagePagination
-        <Flex justify="center">
+        numTotalItems={data.itemSearch.numTotalItems}
-          <WIPCallout
+        marginTop="4"
-            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>
-      )}
     </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">