[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,9 +367,9 @@ function ItemTradesTableRow({
           )}
           <ItemTradesTableCell fontSize="xs">{username}</ItemTradesTableCell>
           <ItemTradesTableCell fontSize="sm">
+            <Link href={href} passHref>
               <Box
-              as={Link}
-              to={href}
+                as="a"
                 className={css`
                   &:hover,
                   &:focus,
@@ -376,6 +381,7 @@ function ItemTradesTableRow({
               >
                 {listName}
               </Box>
+            </Link>
           </ItemTradesTableCell>
         </Box>
       )}