From e3ae5e7116d6355013bb311768c3c0d66a0ad0c8 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Fri, 21 May 2021 00:50:55 -0700
Subject: [PATCH] extract PaginationToolbar from ItemSearchPage

wanna reuse in like outfits page
---
 src/app/ItemSearchPage.js               | 57 ++++---------------------
 src/app/components/PaginationToolbar.js | 45 +++++++++++++++++++
 2 files changed, 54 insertions(+), 48 deletions(-)
 create mode 100644 src/app/components/PaginationToolbar.js

diff --git a/src/app/ItemSearchPage.js b/src/app/ItemSearchPage.js
index 5126c6b..d679df0 100644
--- a/src/app/ItemSearchPage.js
+++ b/src/app/ItemSearchPage.js
@@ -1,8 +1,8 @@
 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 { useQuery } from "@apollo/client";
-import { Link, useHistory, useLocation, useParams } from "react-router-dom";
+import { useHistory, useLocation, useParams } from "react-router-dom";
 
 import SearchToolbar, {
   emptySearchQuery,
@@ -12,6 +12,7 @@ import SquareItemCard, {
   SquareItemCardSkeleton,
 } from "./components/SquareItemCard";
 import { Delay, ErrorMessage, useCommonStyles, useDebounce } from "./util";
+import PaginationToolbar from "./components/PaginationToolbar";
 
 function ItemSearchPage() {
   const [query, offset, setQuery] = useSearchQueryInUrl();
@@ -170,11 +171,11 @@ function ItemSearchPageResults({ query: latestQuery, offset }) {
   if (loading) {
     return (
       <Box>
-        <ItemSearchPagePagination isLoading marginBottom="6" />
+        <PaginationToolbar isLoading marginBottom="6" />
         <Delay>
           <ItemSearchPageResultsLoading />
         </Delay>
-        <ItemSearchPagePagination isLoading marginTop="4" />
+        <PaginationToolbar isLoading marginTop="4" />
       </Box>
     );
   }
@@ -202,8 +203,8 @@ function ItemSearchPageResults({ query: latestQuery, offset }) {
 
   return (
     <Box>
-      <ItemSearchPagePagination
-        numTotalItems={data.itemSearch.numTotalItems}
+      <PaginationToolbar
+        totalCount={data.itemSearch.numTotalItems}
         marginBottom="6"
       />
       <Wrap justify="center" spacing="4">
@@ -213,54 +214,14 @@ function ItemSearchPageResults({ query: latestQuery, offset }) {
           </WrapItem>
         ))}
       </Wrap>
-      <ItemSearchPagePagination
-        numTotalItems={data.itemSearch.numTotalItems}
+      <PaginationToolbar
+        totalCount={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">
diff --git a/src/app/components/PaginationToolbar.js b/src/app/components/PaginationToolbar.js
new file mode 100644
index 0000000..759901d
--- /dev/null
+++ b/src/app/components/PaginationToolbar.js
@@ -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;