[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.)
This commit is contained in:
Emi Matchu 2022-09-14 19:52:10 -07:00
parent 296d641c03
commit 02af99dded
3 changed files with 27 additions and 27 deletions

5
pages/modeling.tsx Normal file
View file

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

View file

@ -20,7 +20,6 @@ const ItemTradesOfferingPage = loadable(() =>
const ItemTradesSeekingPage = loadable(() => const ItemTradesSeekingPage = loadable(() =>
import("./ItemTradesPage").then((m) => m.ItemTradesSeekingPage) import("./ItemTradesPage").then((m) => m.ItemTradesSeekingPage)
); );
const ModelingPage = loadable(() => import("./ModelingPage"));
const UserItemListsIndexPage = loadable(() => const UserItemListsIndexPage = loadable(() =>
import("./UserItemListsIndexPage") import("./UserItemListsIndexPage")
); );
@ -96,11 +95,6 @@ function App() {
<UserOutfitsPage /> <UserOutfitsPage />
</PageLayout> </PageLayout>
</Route> </Route>
<Route path="/modeling">
<PageLayout>
<ModelingPage />
</PageLayout>
</Route>
<Route path="/"> <Route path="/">
<PageLayout hideHomeLink> <PageLayout hideHomeLink>
<HomePage /> <HomePage />

View file

@ -17,7 +17,7 @@ import {
StarIcon, StarIcon,
} from "@chakra-ui/icons"; } from "@chakra-ui/icons";
import { HiSparkles } from "react-icons/hi"; import { HiSparkles } from "react-icons/hi";
import { Link } from "react-router-dom"; import Link from "next/link";
import SquareItemCard from "./SquareItemCard"; import SquareItemCard from "./SquareItemCard";
import { safeImageUrl, useCommonStyles } from "../util"; import { safeImageUrl, useCommonStyles } from "../util";
@ -30,9 +30,9 @@ function ItemCard({ item, badges, variant = "list", ...props }) {
return <SquareItemCard item={item} {...props} />; return <SquareItemCard item={item} {...props} />;
case "list": case "list":
return ( return (
<Link href={`/items/${item.id}`} passHref>
<Box <Box
as={Link} as="a"
to={`/items/${item.id}`}
display="block" display="block"
p="2" p="2"
boxShadow="lg" boxShadow="lg"
@ -50,6 +50,7 @@ function ItemCard({ item, badges, variant = "list", ...props }) {
focusSelector=".item-card:hover &, .item-card:focus &" focusSelector=".item-card:hover &, .item-card:focus &"
/> />
</Box> </Box>
</Link>
); );
default: default:
throw new Error(`Unexpected ItemCard variant: ${variant}`); throw new Error(`Unexpected ItemCard variant: ${variant}`);