[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!
This commit is contained in:
Emi Matchu 2022-09-14 22:44:48 -07:00
parent 58edba6983
commit f1cfd1ac8f
4 changed files with 59 additions and 52 deletions

View file

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

View file

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

View file

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

View file

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