[WIP] Migrate single-list page to Next.js routing

Hey we're getting real close! :3

I accepted a small bug here where clicking the breadcrumb to "Items X wants" won't scroll down if the page isn't loaded yet. (e.g. you landed on this list page first). If you came *from* the lists index page though, then when you go back your stuff will be there already, so you should be fine. (It might also happen if the page loads fast enough, which in prod it might do?)

Just gonna leave it for now, because the workaround would be a lot! (have the page re-check the anchor once it's done loading)

pages/user/[userId]/lists/index.tsx

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

pages/user/[userId]/lists/owns/[listId].tsx

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

pages/user/[userId]/lists/wants/[listId].tsx

@@ -0,0 +1,4 @@
+// These two routes are the same! Essentially it's a route param that must
+// either be "owns" or "wants".
+import UserItemListPageWrapper from "../owns/[listId]";
+export default UserItemListPageWrapper;

src/app/App.js

@@ -11,7 +11,6 @@ import WardrobePageLayout from "./WardrobePage/WardrobePageLayout";
 import { loadable } from "./util";
 
 const HomePage = loadable(() => import("./HomePage"));
-const UserItemListPage = loadable(() => import("./UserItemListPage"));
 const WardrobePage = loadable(() => import("./WardrobePage"), {
   fallback: <WardrobePageLayout />,
 });
@@ -34,11 +33,6 @@ function App() {
         <Route path="/outfits/:id">
           <WardrobePage />
         </Route>
-        <Route path="/user/:userId/lists/:ownsOrWants(owns|wants)/:listId">
-          <PageLayout>
-            <UserItemListPage />
-          </PageLayout>
-        </Route>
         <Route path="/">
           <PageLayout hideHomeLink>
             <HomePage />

src/app/UserItemListPage.js

@@ -23,9 +23,8 @@ import {
   EmailIcon,
 } from "@chakra-ui/icons";
 import { gql, useMutation, useQuery } from "@apollo/client";
-import { useParams } from "react-router-dom";
-import { HashLink } from "react-router-hash-link";
 import Link from "next/link";
+import { useRouter } from "next/router";
 import {
   List as VirtualizedList,
   AutoSizer,
@@ -41,7 +40,8 @@ import useSupport from "./WardrobePage/support/useSupport";
 import WIPCallout from "./components/WIPCallout";
 
 function UserItemListPage() {
-  const { listId } = useParams();
+  const { query } = useRouter();
+  const { listId } = query;
   const currentUser = useCurrentUser();
 
   const { loading, error, data } = useQuery(
@@ -118,12 +118,19 @@ function UserItemListPage() {
         separator={<ChevronRightIcon marginTop="-2px" />}
       >
         <BreadcrumbItem>
-          <BreadcrumbLink as={Link} to={`/user/${creator.id}/lists`}>
+          <Link href={`/user/${creator.id}/lists`} passHref>
-            {creator.username}'s lists
+            <BreadcrumbLink>{creator.username}'s lists</BreadcrumbLink>
-          </BreadcrumbLink>
+          </Link>
         </BreadcrumbItem>
-        <BreadcrumbItem as={HashLink} to={linkBackPath}>
+        {/* TODO: The "wants" version of this link doesn't always scroll down
-          <BreadcrumbLink>{linkBackText}</BreadcrumbLink>
+         *       the page properly, now that we're not using the
+         *       react-router-hash-link library. Oh well for now!
+         *       Would be nice to fix by having Next.js eliminate the loading
+         *       spinner perhaps?...*/}
+        <BreadcrumbItem>
+          <Link href={linkBackPath} passHref>
+            <BreadcrumbLink>{linkBackText}</BreadcrumbLink>
+          </Link>
         </BreadcrumbItem>
       </Breadcrumb>
       <Box height="1" />