[WIP] Migrate item trade pages to Next.js routing

One little tricky thing here was moving the `[itemId].tsx` page into the folder as `index.tsx`! Because we didn't have subpages before but now we do!

pages/items/[itemId]/index.tsx

@@ -1,7 +1,7 @@
-import ItemSearchPageToolbar from "../../src/app/components/ItemSearchPageToolbar";
-import ItemPage from "../../src/app/ItemPage";
-import PageLayout from "../../src/app/PageLayout";
-import type { NextPageWithLayout } from "../_app";
+import ItemSearchPageToolbar from "../../../src/app/components/ItemSearchPageToolbar";
+import ItemPage from "../../../src/app/ItemPage";
+import PageLayout from "../../../src/app/PageLayout";
+import type { NextPageWithLayout } from "../../_app";
 
 const ItemPageWrapper: NextPageWithLayout = () => {
   return <ItemPage />;

pages/items/[itemId]/trades/offering.tsx

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

pages/items/[itemId]/trades/seeking.tsx

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

src/app/App.js

@@ -11,12 +11,6 @@ import WardrobePageLayout from "./WardrobePage/WardrobePageLayout";
 import { loadable } from "./util";
 
 const HomePage = loadable(() => import("./HomePage"));
-const ItemTradesOfferingPage = loadable(() =>
-  import("./ItemTradesPage").then((m) => m.ItemTradesOfferingPage)
-);
-const ItemTradesSeekingPage = loadable(() =>
-  import("./ItemTradesPage").then((m) => m.ItemTradesSeekingPage)
-);
 const UserItemListsIndexPage = loadable(() =>
   import("./UserItemListsIndexPage")
 );
@@ -37,16 +31,6 @@ function App() {
       <ScrollToTop />
 
       <Switch>
-        <Route path="/items/:itemId/trades/offering">
-          <PageLayout>
-            <ItemTradesOfferingPage />
-          </PageLayout>
-        </Route>
-        <Route path="/items/:itemId/trades/seeking">
-          <PageLayout>
-            <ItemTradesSeekingPage />
-          </PageLayout>
-        </Route>
         <Route path="/outfits/new">
           <WardrobePage />
         </Route>

src/app/ItemTradesPage.js

@@ -10,7 +10,8 @@ import {
 } from "@chakra-ui/react";
 import gql from "graphql-tag";
 import { useQuery } from "@apollo/client";
-import { Link, useHistory, useParams } from "react-router-dom";
+import Link from "next/link";
+import { useRouter } from "next/router";
 
 import { Heading2, usePageTitle } from "./util";
 import ItemPageLayout from "./ItemPageLayout";
@@ -89,7 +90,8 @@ function ItemTradesPage({
   compareColumnLabel,
   tradesQuery,
 }) {
-  const { itemId } = useParams();
+  const { query } = useRouter();
+  const { itemId } = query;
 
   const { error, data } = useQuery(
     gql`
@@ -310,8 +312,11 @@ function ItemTradesTableRow({
   matchingItems,
   shouldShowCompareColumn,
 }) {
-  const history = useHistory();
-  const onClick = React.useCallback(() => history.push(href), [history, href]);
+  const { push: pushHistory } = useRouter();
+  const onClick = React.useCallback(() => pushHistory(href), [
+    pushHistory,
+    href,
+  ]);
   const focusBackground = useColorModeValue("gray.100", "gray.600");
 
   const sortedMatchingItems = [...matchingItems].sort((a, b) =>
@@ -362,20 +367,21 @@ function ItemTradesTableRow({
           )}
           <ItemTradesTableCell fontSize="xs">{username}</ItemTradesTableCell>
           <ItemTradesTableCell fontSize="sm">
-            <Box
-              as={Link}
-              to={href}
-              className={css`
-                &:hover,
-                &:focus,
-                tr:hover &,
-                tr:focus-within & {
-                  text-decoration: underline;
-                }
-              `}
-            >
-              {listName}
-            </Box>
+            <Link href={href} passHref>
+              <Box
+                as="a"
+                className={css`
+                  &:hover,
+                  &:focus,
+                  tr:hover &,
+                  tr:focus-within & {
+                    text-decoration: underline;
+                  }
+                `}
+              >
+                {listName}
+              </Box>
+            </Link>
           </ItemTradesTableCell>
         </Box>
       )}