[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
+                <Link href={buildClosetListPath(closetList)} passHref>
-                  as={Link}
+                  <Box as="a" _hover={{ textDecoration: "underline" }}>
-                  to={buildClosetListPath(closetList)}
+                    {closetList.name}
-                  _hover={{ textDecoration: "underline" }}
+                  </Box>
-                >
+                </Link>
-                  {closetList.name}
-                </Box>
               )}
             </Heading>
           ))}
@@ -416,29 +415,30 @@ export function ClosetListContents({
         <Box fontStyle="italic">This list is empty!</Box>
       )}
       {numMoreItems > 0 && (
-        <Box
+        <Link href={buildClosetListPath(closetList)} passHref>
-          as={Link}
+          <Box
-          to={buildClosetListPath(closetList)}
+            as="a"
-          display="flex"
+            display="flex"
-          width="100%"
+            width="100%"
-          alignItems="center"
+            alignItems="center"
-          justifyContent="center"
+            justifyContent="center"
-          marginTop="6"
+            marginTop="6"
-          fontStyle="italic"
+            fontStyle="italic"
-          textAlign="center"
+            textAlign="center"
-          role="group"
+            role="group"
-        >
-          <Flex
-            align="center"
-            borderBottom="1px solid transparent"
-            _groupHover={{ borderBottomColor: "currentColor" }}
-            _groupFocus={{ borderBottomColor: "currentColor" }}
           >
-            <Box>Show {numMoreItems} more items</Box>
+            <Flex
-            <Box width="1" />
+              align="center"
-            <ArrowForwardIcon />
+              borderBottom="1px solid transparent"
-          </Flex>
+              _groupHover={{ borderBottomColor: "currentColor" }}
-        </Box>
+              _groupFocus={{ borderBottomColor: "currentColor" }}
+            >
+              <Box>Show {numMoreItems} more items</Box>
+              <Box width="1" />
+              <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);