Refactor URL routing out of PaginationToolbar

in preparation for PaginationToolbar being able to support other kinds of state!

src/app/ItemSearchPage.js

@@ -10,7 +10,9 @@ import SquareItemCard, {
   SquareItemCardSkeleton,
 } from "./components/SquareItemCard";
 import { Delay, MajorErrorMessage, useDebounce } from "./util";
-import PaginationToolbar from "./components/PaginationToolbar";
+import PaginationToolbar, {
+  useRouterPagination,
+} from "./components/PaginationToolbar";
 import { useSearchQueryInUrl } from "./components/ItemSearchPageToolbar";
 
 function ItemSearchPage() {
@@ -91,6 +93,16 @@ function ItemSearchPage() {
     }
   );
 
+  const items = data?.itemSearch?.items || [];
+  const numTotalItems = data?.itemSearch?.numTotalItems || null;
+
+  const {
+    numTotalPages,
+    currentPageNumber,
+    goToPageNumber,
+    buildPageUrl,
+  } = useRouterPagination(numTotalItems, 30);
+
   if (searchQueryIsEmpty(query)) {
     return null;
   }
@@ -99,7 +111,7 @@ function ItemSearchPage() {
     return <MajorErrorMessage error={error} variant="network" />;
   }
 
-  if (data?.itemSearch?.numTotalItems === 0) {
+  if (numTotalItems === 0) {
     return (
       <Box>
         We couldn't find any matching items{" "}
@@ -111,13 +123,13 @@ function ItemSearchPage() {
     );
   }
 
-  const items = data?.itemSearch?.items || [];
-  const numTotalItems = data?.itemSearch?.numTotalItems || null;
-
   return (
     <Box>
       <PaginationToolbar
-        totalCount={numTotalItems}
+        numTotalPages={numTotalPages}
+        currentPageNumber={currentPageNumber}
+        goToPageNumber={goToPageNumber}
+        buildPageUrl={buildPageUrl}
         isLoading={loading}
         marginBottom="6"
       />
@@ -136,7 +148,10 @@ function ItemSearchPage() {
         </Delay>
       )}
       <PaginationToolbar
-        totalCount={numTotalItems}
+        numTotalPages={numTotalPages}
+        currentPageNumber={currentPageNumber}
+        goToPageNumber={goToPageNumber}
+        buildPageUrl={buildPageUrl}
         isLoading={loading}
         marginTop="4"
       />

src/app/UserOutfitsPage.js

@@ -9,7 +9,9 @@ import { useRouter } from "next/router";
 import { Heading1, MajorErrorMessage, useCommonStyles } from "./util";
 import HangerSpinner from "./components/HangerSpinner";
 import OutfitThumbnail from "./components/OutfitThumbnail";
-import PaginationToolbar from "./components/PaginationToolbar";
+import PaginationToolbar, {
+  useRouterPagination,
+} from "./components/PaginationToolbar";
 import useCurrentUser from "./components/useCurrentUser";
 
 function UserOutfitsPage() {
@@ -93,6 +95,13 @@ function UserOutfitsPageContent() {
 
   const isLoading = userLoading || queryLoading;
 
+  const {
+    numTotalPages,
+    currentPageNumber,
+    goToPageNumber,
+    buildPageUrl,
+  } = useRouterPagination(numTotalOutfits, PER_PAGE);
+
   if (error) {
     return <MajorErrorMessage error={error} variant="network" />;
   }
@@ -102,8 +111,11 @@ function UserOutfitsPageContent() {
   return (
     <Box>
       <PaginationToolbar
+        numTotalPages={numTotalPages}
+        currentPageNumber={currentPageNumber}
+        goToPageNumber={goToPageNumber}
+        buildPageUrl={buildPageUrl}
         isLoading={isLoading}
-        totalCount={numTotalOutfits}
         numPerPage={PER_PAGE}
       />
       <Box height="6" />
@@ -131,8 +143,11 @@ function UserOutfitsPageContent() {
       )}
       <Box height="6" />
       <PaginationToolbar
+        numTotalPages={numTotalPages}
+        currentPageNumber={currentPageNumber}
+        goToPageNumber={goToPageNumber}
+        buildPageUrl={buildPageUrl}
         isLoading={isLoading}
-        totalCount={numTotalOutfits}
         numPerPage={PER_PAGE}
       />
     </Box>

src/app/components/PaginationToolbar.js

@@ -5,17 +5,12 @@ import { useRouter } from "next/router";
 
 function PaginationToolbar({
   isLoading,
-  totalCount,
+  numTotalPages,
-  numPerPage = 30,
+  currentPageNumber,
+  goToPageNumber,
+  buildPageUrl,
   ...props
 }) {
-  const {
-    numTotalPages,
-    currentPageNumber,
-    goToPageNumber,
-    buildPageUrl,
-  } = useRouterPagination(totalCount, numPerPage);
-
   const pagesAreLoaded = currentPageNumber != null && numTotalPages != null;
   const hasPrevPage = pagesAreLoaded && currentPageNumber > 1;
   const hasNextPage = pagesAreLoaded && currentPageNumber < numTotalPages;
@@ -63,7 +58,7 @@ function PaginationToolbar({
   );
 }
 
-function useRouterPagination(totalCount, numPerPage) {
+export function useRouterPagination(totalCount, numPerPage) {
   const { query, push: pushHistory } = useRouter();
 
   const currentOffset = parseInt(query.offset) || 0;