From 02af99ddeda035903df766e78ca2457d2b2b9a98 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Wed, 14 Sep 2022 19:52:10 -0700
Subject: [PATCH] [WIP] Migrate /modeling to Next.js routing

Mostly easy, but with a link we needed to migrate in the `ItemCard` component! (I see one in `SquareItemCard` too, but I'll wait until it comes up.)
---
 pages/modeling.tsx             |  5 ++++
 src/app/App.js                 |  6 -----
 src/app/components/ItemCard.js | 43 +++++++++++++++++-----------------
 3 files changed, 27 insertions(+), 27 deletions(-)
 create mode 100644 pages/modeling.tsx

diff --git a/pages/modeling.tsx b/pages/modeling.tsx
new file mode 100644
index 0000000..05b2cfa
--- /dev/null
+++ b/pages/modeling.tsx
@@ -0,0 +1,5 @@
+import ModelingPage from "../src/app/ModelingPage";
+
+export default function ModelingPageWrapper() {
+  return <ModelingPage />;
+}
diff --git a/src/app/App.js b/src/app/App.js
index eb873e7..3efb06d 100644
--- a/src/app/App.js
+++ b/src/app/App.js
@@ -20,7 +20,6 @@ const ItemTradesOfferingPage = loadable(() =>
 const ItemTradesSeekingPage = loadable(() =>
   import("./ItemTradesPage").then((m) => m.ItemTradesSeekingPage)
 );
-const ModelingPage = loadable(() => import("./ModelingPage"));
 const UserItemListsIndexPage = loadable(() =>
   import("./UserItemListsIndexPage")
 );
@@ -96,11 +95,6 @@ function App() {
             <UserOutfitsPage />
           </PageLayout>
         </Route>
-        <Route path="/modeling">
-          <PageLayout>
-            <ModelingPage />
-          </PageLayout>
-        </Route>
         <Route path="/">
           <PageLayout hideHomeLink>
             <HomePage />
diff --git a/src/app/components/ItemCard.js b/src/app/components/ItemCard.js
index abadd35..310782f 100644
--- a/src/app/components/ItemCard.js
+++ b/src/app/components/ItemCard.js
@@ -17,7 +17,7 @@ import {
   StarIcon,
 } from "@chakra-ui/icons";
 import { HiSparkles } from "react-icons/hi";
-import { Link } from "react-router-dom";
+import Link from "next/link";
 
 import SquareItemCard from "./SquareItemCard";
 import { safeImageUrl, useCommonStyles } from "../util";
@@ -30,26 +30,27 @@ function ItemCard({ item, badges, variant = "list", ...props }) {
       return <SquareItemCard item={item} {...props} />;
     case "list":
       return (
-        <Box
-          as={Link}
-          to={`/items/${item.id}`}
-          display="block"
-          p="2"
-          boxShadow="lg"
-          borderRadius="lg"
-          background={brightBackground}
-          transition="all 0.2s"
-          className="item-card"
-          width="100%"
-          minWidth="0"
-          {...props}
-        >
-          <ItemCardContent
-            item={item}
-            badges={badges}
-            focusSelector=".item-card:hover &, .item-card:focus &"
-          />
-        </Box>
+        <Link href={`/items/${item.id}`} passHref>
+          <Box
+            as="a"
+            display="block"
+            p="2"
+            boxShadow="lg"
+            borderRadius="lg"
+            background={brightBackground}
+            transition="all 0.2s"
+            className="item-card"
+            width="100%"
+            minWidth="0"
+            {...props}
+          >
+            <ItemCardContent
+              item={item}
+              badges={badges}
+              focusSelector=".item-card:hover &, .item-card:focus &"
+            />
+          </Box>
+        </Link>
       );
     default:
       throw new Error(`Unexpected ItemCard variant: ${variant}`);