diff --git a/pages/your-outfits.tsx b/pages/your-outfits.tsx
new file mode 100644
index 0000000..e0b0022
--- /dev/null
+++ b/pages/your-outfits.tsx
@@ -0,0 +1,5 @@
+import UserOutfitsPage from "../src/app/UserOutfitsPage";
+
+export default function UserOutfitsPageWrapper() {
+ return ;
+}
diff --git a/src/app/App.js b/src/app/App.js
index 3efb06d..4ac5e0e 100644
--- a/src/app/App.js
+++ b/src/app/App.js
@@ -24,7 +24,6 @@ const UserItemListsIndexPage = loadable(() =>
import("./UserItemListsIndexPage")
);
const UserItemListPage = loadable(() => import("./UserItemListPage"));
-const UserOutfitsPage = loadable(() => import("./UserOutfitsPage"));
const WardrobePage = loadable(() => import("./WardrobePage"), {
fallback: ,
});
@@ -90,11 +89,6 @@ function App() {
-
-
-
-
-
diff --git a/src/app/UserOutfitsPage.js b/src/app/UserOutfitsPage.js
index b399ed5..0bd5076 100644
--- a/src/app/UserOutfitsPage.js
+++ b/src/app/UserOutfitsPage.js
@@ -3,7 +3,8 @@ import { Box, Center, Flex, Wrap, WrapItem } from "@chakra-ui/react";
import { ClassNames } from "@emotion/react";
import gql from "graphql-tag";
import { useQuery } from "@apollo/client";
-import { Link, useLocation } from "react-router-dom";
+import Link from "next/link";
+import { useRouter } from "next/router";
import { Heading1, MajorErrorMessage, useCommonStyles } from "./util";
import HangerSpinner from "./components/HangerSpinner";
@@ -55,8 +56,8 @@ const PER_PAGE = 20;
function UserOutfitsPageContent() {
const { isLoggedIn, isLoading: userLoading } = useCurrentUser();
- const { search } = useLocation();
- const offset = parseInt(new URLSearchParams(search).get("offset")) || 0;
+ const { query } = useRouter();
+ const offset = parseInt(query.offset) || 0;
const { loading: queryLoading, error, data } = useQuery(
USER_OUTFITS_PAGE_QUERY,
@@ -171,20 +172,21 @@ function OutfitCard({ outfit }) {
);
return (
-
-
-
+
+
+
+
+
);
}
diff --git a/src/app/components/PaginationToolbar.js b/src/app/components/PaginationToolbar.js
index 560f66a..61f874e 100644
--- a/src/app/components/PaginationToolbar.js
+++ b/src/app/components/PaginationToolbar.js
@@ -1,6 +1,7 @@
import React from "react";
import { Box, Button, Flex, Select } from "@chakra-ui/react";
-import { Link, useHistory, useLocation } from "react-router-dom";
+import Link from "next/link";
+import { useRouter } from "next/router";
function PaginationToolbar({
isLoading,
@@ -8,22 +9,20 @@ function PaginationToolbar({
numPerPage = 30,
...props
}) {
- const { search } = useLocation();
- const history = useHistory();
+ const { query, push: pushHistory } = useRouter();
- const currentOffset =
- parseInt(new URLSearchParams(search).get("offset")) || 0;
+ const currentOffset = parseInt(query.offset) || 0;
const currentPageIndex = Math.floor(currentOffset / numPerPage);
const currentPageNumber = currentPageIndex + 1;
const numTotalPages = totalCount ? Math.ceil(totalCount / numPerPage) : null;
- const prevPageSearchParams = new URLSearchParams(search);
+ const prevPageSearchParams = new URLSearchParams(query);
const prevPageOffset = currentOffset - numPerPage;
prevPageSearchParams.set("offset", prevPageOffset);
const prevPageUrl = "?" + prevPageSearchParams.toString();
- const nextPageSearchParams = new URLSearchParams(search);
+ const nextPageSearchParams = new URLSearchParams(query);
const nextPageOffset = currentOffset + numPerPage;
nextPageSearchParams.set("offset", nextPageOffset);
const nextPageUrl = "?" + nextPageSearchParams.toString();
@@ -42,23 +41,25 @@ function PaginationToolbar({
const newPageIndex = newPageNumber - 1;
const newPageOffset = newPageIndex * numPerPage;
- const newPageSearchParams = new URLSearchParams(search);
+ const newPageSearchParams = new URLSearchParams(query);
newPageSearchParams.set("offset", newPageOffset);
- history.push({ search: newPageSearchParams.toString() });
+ pushHistory("?" + newPageSearchParams.toString());
},
- [search, history, numPerPage]
+ [query, pushHistory, numPerPage]
);
return (
-
+
{numTotalPages && (
Page
@@ -73,18 +74,32 @@ function PaginationToolbar({
of {numTotalPages}
)}
-
+
);
}
+function LinkOrButton({ href, ...props }) {
+ if (href != null) {
+ return (
+
+
+
+ );
+ } else {
+ return ;
+ }
+}
+
function PageNumberSelect({
currentPageNumber,
numTotalPages,