From 5d28c36e8a0725f6b0e79e213361601f221774ee Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Wed, 14 Sep 2022 23:18:13 -0700
Subject: [PATCH] [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)
---
 .../[userId]/{lists.tsx => lists/index.tsx}   |  2 +-
 pages/user/[userId]/lists/owns/[listId].tsx   |  5 ++++
 pages/user/[userId]/lists/wants/[listId].tsx  |  4 ++++
 src/app/App.js                                |  6 -----
 src/app/UserItemListPage.js                   | 23 ++++++++++++-------
 5 files changed, 25 insertions(+), 15 deletions(-)
 rename pages/user/[userId]/{lists.tsx => lists/index.tsx} (54%)
 create mode 100644 pages/user/[userId]/lists/owns/[listId].tsx
 create mode 100644 pages/user/[userId]/lists/wants/[listId].tsx

diff --git a/pages/user/[userId]/lists.tsx b/pages/user/[userId]/lists/index.tsx
similarity index 54%
rename from pages/user/[userId]/lists.tsx
rename to pages/user/[userId]/lists/index.tsx
index 0a6e5c8..bef49e8 100644
--- a/pages/user/[userId]/lists.tsx
+++ b/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 />;
diff --git a/pages/user/[userId]/lists/owns/[listId].tsx b/pages/user/[userId]/lists/owns/[listId].tsx
new file mode 100644
index 0000000..62de41d
--- /dev/null
+++ b/pages/user/[userId]/lists/owns/[listId].tsx
@@ -0,0 +1,5 @@
+import UserItemListPage from "../../../../../src/app/UserItemListPage";
+
+export default function UserItemListPageWrapper() {
+  return <UserItemListPage />;
+}
diff --git a/pages/user/[userId]/lists/wants/[listId].tsx b/pages/user/[userId]/lists/wants/[listId].tsx
new file mode 100644
index 0000000..b4e5aa5
--- /dev/null
+++ b/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;
diff --git a/src/app/App.js b/src/app/App.js
index e8a49f6..9eaf8e9 100644
--- a/src/app/App.js
+++ b/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 />
diff --git a/src/app/UserItemListPage.js b/src/app/UserItemListPage.js
index 3e99d25..003c582 100644
--- a/src/app/UserItemListPage.js
+++ b/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`}>
-            {creator.username}'s lists
-          </BreadcrumbLink>
+          <Link href={`/user/${creator.id}/lists`} passHref>
+            <BreadcrumbLink>{creator.username}'s lists</BreadcrumbLink>
+          </Link>
         </BreadcrumbItem>
-        <BreadcrumbItem as={HashLink} to={linkBackPath}>
-          <BreadcrumbLink>{linkBackText}</BreadcrumbLink>
+        {/* TODO: The "wants" version of this link doesn't always scroll down
+         *       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" />