[WIP] Migrate trade lists page to Next.js routing

We're getting so close! :3

There was some shared components in `UserItemListPage` that needed updated too, even though the rest of the page isn't migrated yet.

pages/user/[userId]/lists.tsx

@@ -0,0 +1,5 @@
+import UserItemListsIndexPage from "../../../src/app/UserItemListsIndexPage";
+
+export default function UserItemListsIndexPageWrapper() {
+  return <UserItemListsIndexPage />;
+}

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: <WardrobePageLayout />,
@@ -42,11 +39,6 @@ function App() {
             <UserItemListPage />
           </PageLayout>
         </Route>
-        <Route path="/user/:userId/lists">
-          <PageLayout>
-            <UserItemListsIndexPage />
-          </PageLayout>
-        </Route>
         <Route path="/">
           <PageLayout hideHomeLink>
             <HomePage />

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
               ) : (
-                <Box
-                  as={Link}
-                  to={buildClosetListPath(closetList)}
-                  _hover={{ textDecoration: "underline" }}
-                >
+                <Link href={buildClosetListPath(closetList)} passHref>
+                  <Box as="a" _hover={{ textDecoration: "underline" }}>
                     {closetList.name}
                   </Box>
+                </Link>
               )}
             </Heading>
           ))}
@@ -416,9 +415,9 @@ export function ClosetListContents({
         <Box fontStyle="italic">This list is empty!</Box>
       )}
       {numMoreItems > 0 && (
+        <Link href={buildClosetListPath(closetList)} passHref>
           <Box
-          as={Link}
-          to={buildClosetListPath(closetList)}
+            as="a"
             display="flex"
             width="100%"
             alignItems="center"
@@ -439,6 +438,7 @@ export function ClosetListContents({
               <ArrowForwardIcon />
             </Flex>
           </Box>
+        </Link>
       )}
     </Box>
   );

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);