From f1cfd1ac8f568cf9bf2b5d2fc6e35e531d093b5a Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Wed, 14 Sep 2022 22:44:48 -0700
Subject: [PATCH] [WIP] Migrate /items/search to Next.js routing

Okay I actually screwed up the layouts thing a bit! Because right, they need to *share* a LayoutComponent in order to share the UI across the pages. This gets a bit tricky with wanting to change the margin, too. I'll address this with an upcoming refactor!
---
 pages/items/search/[query].tsx       |  5 ++
 pages/items/search/index.tsx         | 19 ++++++++
 src/app/App.js                       | 19 --------
 src/app/components/SquareItemCard.js | 68 ++++++++++++++--------------
 4 files changed, 59 insertions(+), 52 deletions(-)
 create mode 100644 pages/items/search/[query].tsx
 create mode 100644 pages/items/search/index.tsx

diff --git a/pages/items/search/[query].tsx b/pages/items/search/[query].tsx
new file mode 100644
index 0000000..b329361
--- /dev/null
+++ b/pages/items/search/[query].tsx
@@ -0,0 +1,5 @@
+// Both of these routes are the same page! The query parameter is effectively
+// optional: this is the route if you have it, and the other is the route if
+// you don't.
+import ItemSearchPageWrapper from "./index";
+export default ItemSearchPageWrapper;
diff --git a/pages/items/search/index.tsx b/pages/items/search/index.tsx
new file mode 100644
index 0000000..7acc2ed
--- /dev/null
+++ b/pages/items/search/index.tsx
@@ -0,0 +1,19 @@
+import ItemSearchPageToolbar from "../../../src/app/components/ItemSearchPageToolbar";
+import ItemSearchPage from "../../../src/app/ItemSearchPage";
+import PageLayout from "../../../src/app/PageLayout";
+import type { NextPageWithLayout } from "../../_app";
+
+const ItemSearchPageWrapper: NextPageWithLayout = () => {
+  return <ItemSearchPage />;
+};
+
+ItemSearchPageWrapper.layoutComponent = ({ children }) => {
+  return (
+    <PageLayout>
+      <ItemSearchPageToolbar marginBottom="6" />
+      {children}
+    </PageLayout>
+  );
+};
+
+export default ItemSearchPageWrapper;
diff --git a/src/app/App.js b/src/app/App.js
index 1c43968..57fa4e3 100644
--- a/src/app/App.js
+++ b/src/app/App.js
@@ -1,5 +1,4 @@
 import React from "react";
-import { Box } from "@chakra-ui/react";
 import {
   BrowserRouter as Router,
   Switch,
@@ -12,7 +11,6 @@ import WardrobePageLayout from "./WardrobePage/WardrobePageLayout";
 import { loadable } from "./util";
 
 const HomePage = loadable(() => import("./HomePage"));
-const ItemSearchPage = loadable(() => import("./ItemSearchPage"));
 const ItemTradesOfferingPage = loadable(() =>
   import("./ItemTradesPage").then((m) => m.ItemTradesOfferingPage)
 );
@@ -27,17 +25,6 @@ const WardrobePage = loadable(() => import("./WardrobePage"), {
   fallback: <WardrobePageLayout />,
 });
 
-// ItemPage and ItemSearchPage need to share a search toolbar, so here it is!
-// It'll load in dynamically like the page elements, with a hacky fallback to
-// take up 40px of height until it loads.
-//
-// There very well be a better way to encapsulate this! It's not *great* to
-// have this here. I just don't wanna over abstract it just yet 😅
-const ItemSearchPageToolbar = loadable(
-  () => import("./components/ItemSearchPageToolbar"),
-  { fallback: <Box height="40px" /> }
-);
-
 /**
  * App is the entry point of our application. There's not a ton of exciting
  * stuff happening here, mostly just setting up some globals and theming!
@@ -50,12 +37,6 @@ function App() {
       <ScrollToTop />
 
       <Switch>
-        <Route path="/items/search/:query?">
-          <PageLayout>
-            <ItemSearchPageToolbar marginBottom="6" />
-            <ItemSearchPage />
-          </PageLayout>
-        </Route>
         <Route path="/items/:itemId/trades/offering">
           <PageLayout>
             <ItemTradesOfferingPage />
diff --git a/src/app/components/SquareItemCard.js b/src/app/components/SquareItemCard.js
index c7eb6a5..09df265 100644
--- a/src/app/components/SquareItemCard.js
+++ b/src/app/components/SquareItemCard.js
@@ -8,7 +8,7 @@ import {
   useToken,
 } from "@chakra-ui/react";
 import { ClassNames } from "@emotion/react";
-import { Link } from "react-router-dom";
+import Link from "next/link";
 
 import { safeImageUrl, useCommonStyles } from "../util";
 import { CheckIcon, CloseIcon, StarIcon } from "@chakra-ui/icons";
@@ -57,38 +57,40 @@ function SquareItemCard({
           `}
           role="group"
         >
-          <Link
-            to={`/items/${item.id}`}
-            className={css`
-              border-radius: ${mdRadiusValue};
-              transition: all 0.2s;
-              &:hover,
-              &:focus {
-                transform: scale(1.05);
-              }
-              &:focus {
-                box-shadow: ${outlineShadowValue};
-                outline: none;
-              }
-            `}
-            {...props}
-          >
-            <SquareItemCardLayout
-              name={item.name}
-              thumbnailImage={
-                <ItemThumbnail
-                  item={item}
-                  tradeMatchingMode={tradeMatchingMode}
-                />
-              }
-              removeButton={
-                showRemoveButton ? (
-                  <SquareItemCardRemoveButton onClick={onRemove} />
-                ) : null
-              }
-              boxShadow={tradeMatchShadow}
-              footer={footer}
-            />
+          <Link href={`/items/${item.id}`} passHref>
+            <Box
+              as="a"
+              className={css`
+                border-radius: ${mdRadiusValue};
+                transition: all 0.2s;
+                &:hover,
+                &:focus {
+                  transform: scale(1.05);
+                }
+                &:focus {
+                  box-shadow: ${outlineShadowValue};
+                  outline: none;
+                }
+              `}
+              {...props}
+            >
+              <SquareItemCardLayout
+                name={item.name}
+                thumbnailImage={
+                  <ItemThumbnail
+                    item={item}
+                    tradeMatchingMode={tradeMatchingMode}
+                  />
+                }
+                removeButton={
+                  showRemoveButton ? (
+                    <SquareItemCardRemoveButton onClick={onRemove} />
+                  ) : null
+                }
+                boxShadow={tradeMatchShadow}
+                footer={footer}
+              />
+            </Box>
           </Link>
           {showRemoveButton && (
             <div