[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!
This commit is contained in:
Emi Matchu 2022-09-14 22:56:45 -07:00
parent 17a7e2de81
commit 750ca208f1
5 changed files with 38 additions and 38 deletions

View file

@ -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 />;

View file

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

View file

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

View file

@ -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>

View file

@ -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>
)}