diff --git a/pages/user/[userId]/lists.tsx b/pages/user/[userId]/lists.tsx
new file mode 100644
index 0000000..0a6e5c8
--- /dev/null
+++ b/pages/user/[userId]/lists.tsx
@@ -0,0 +1,5 @@
+import UserItemListsIndexPage from "../../../src/app/UserItemListsIndexPage";
+
+export default function UserItemListsIndexPageWrapper() {
+ return ;
+}
diff --git a/src/app/App.js b/src/app/App.js
index 3bc961c..e8a49f6 100644
--- a/src/app/App.js
+++ b/src/app/App.js
@@ -11,9 +11,6 @@ import WardrobePageLayout from "./WardrobePage/WardrobePageLayout";
import { loadable } from "./util";
const HomePage = loadable(() => import("./HomePage"));
-const UserItemListsIndexPage = loadable(() =>
- import("./UserItemListsIndexPage")
-);
const UserItemListPage = loadable(() => import("./UserItemListPage"));
const WardrobePage = loadable(() => import("./WardrobePage"), {
fallback: ,
@@ -42,11 +39,6 @@ function App() {
-
-
-
-
-
diff --git a/src/app/UserItemListPage.js b/src/app/UserItemListPage.js
index 50c7b64..3e99d25 100644
--- a/src/app/UserItemListPage.js
+++ b/src/app/UserItemListPage.js
@@ -23,8 +23,9 @@ import {
EmailIcon,
} from "@chakra-ui/icons";
import { gql, useMutation, useQuery } from "@apollo/client";
-import { Link, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
import { HashLink } from "react-router-hash-link";
+import Link from "next/link";
import {
List as VirtualizedList,
AutoSizer,
@@ -252,13 +253,11 @@ export function ClosetList({
{closetList.isDefaultList || headingVariant === "top-level" ? (
closetList.name
) : (
-
- {closetList.name}
-
+
+
+ {closetList.name}
+
+
)}
))}
@@ -416,29 +415,30 @@ export function ClosetListContents({
This list is empty!
)}
{numMoreItems > 0 && (
-
-
+
- Show {numMoreItems} more items
-
-
-
-
+
+ Show {numMoreItems} more items
+
+
+
+
+
)}
);
diff --git a/src/app/UserItemListsIndexPage.js b/src/app/UserItemListsIndexPage.js
index 9a10aee..431e9e2 100644
--- a/src/app/UserItemListsIndexPage.js
+++ b/src/app/UserItemListsIndexPage.js
@@ -29,7 +29,7 @@ import {
StarIcon,
} from "@chakra-ui/icons";
import gql from "graphql-tag";
-import { useHistory, useParams } from "react-router-dom";
+import { useRouter } from "next/router";
import { useQuery, useLazyQuery, useMutation } from "@apollo/client";
import HangerSpinner from "./components/HangerSpinner";
@@ -44,7 +44,8 @@ const BadgeButton = React.forwardRef((props, ref) => (
));
function UserItemListsIndexPage() {
- const { userId } = useParams();
+ const { query } = useRouter();
+ const { userId } = query;
const currentUser = useCurrentUser();
const isCurrentUser = currentUser.id === userId;
@@ -317,7 +318,7 @@ function UserSearchForm() {
const [query, setQuery] = React.useState("");
const { isSupportUser, supportSecret } = useSupport();
- const history = useHistory();
+ const { push: pushHistory } = useRouter();
const toast = useToast();
const [loadUserSearch, { loading: loading1 }] = useLazyQuery(
@@ -341,7 +342,7 @@ function UserSearchForm() {
return;
}
- history.push(`/user/${user.id}/lists`);
+ pushHistory(`/user/${user.id}/lists`);
},
onError: (error) => {
console.error(error);