diff --git a/src/app/ItemSearchPage.js b/src/app/ItemSearchPage.js
index 8378067..15467f2 100644
--- a/src/app/ItemSearchPage.js
+++ b/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 ;
}
- if (data?.itemSearch?.numTotalItems === 0) {
+ if (numTotalItems === 0) {
return (
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 (
@@ -136,7 +148,10 @@ function ItemSearchPage() {
)}
diff --git a/src/app/UserOutfitsPage.js b/src/app/UserOutfitsPage.js
index 4b58435..6b48430 100644
--- a/src/app/UserOutfitsPage.js
+++ b/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 ;
}
@@ -102,8 +111,11 @@ function UserOutfitsPageContent() {
return (
@@ -131,8 +143,11 @@ function UserOutfitsPageContent() {
)}
diff --git a/src/app/components/PaginationToolbar.js b/src/app/components/PaginationToolbar.js
index 97ffd5b..9d016e5 100644
--- a/src/app/components/PaginationToolbar.js
+++ b/src/app/components/PaginationToolbar.js
@@ -5,17 +5,12 @@ import { useRouter } from "next/router";
function PaginationToolbar({
isLoading,
- totalCount,
- numPerPage = 30,
+ numTotalPages,
+ 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;