Migrate /support/petAppearances to Next.js routing

This was only a little bit tricky! I also noticed the hanger loading indicator being weird without having a container Box, so I added one.
This commit is contained in:
Emi Matchu 2022-09-14 19:41:45 -07:00
parent 1286b2e581
commit 04c4e0c1f3
4 changed files with 31 additions and 27 deletions

View file

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

View file

@ -21,9 +21,6 @@ const ItemTradesSeekingPage = loadable(() =>
import("./ItemTradesPage").then((m) => m.ItemTradesSeekingPage) import("./ItemTradesPage").then((m) => m.ItemTradesSeekingPage)
); );
const ModelingPage = loadable(() => import("./ModelingPage")); const ModelingPage = loadable(() => import("./ModelingPage"));
const SupportPetAppearancesPage = loadable(() =>
import("./SupportPetAppearancesPage")
);
const UserItemListsIndexPage = loadable(() => const UserItemListsIndexPage = loadable(() =>
import("./UserItemListsIndexPage") import("./UserItemListsIndexPage")
); );
@ -104,11 +101,6 @@ function App() {
<ModelingPage /> <ModelingPage />
</PageLayout> </PageLayout>
</Route> </Route>
<Route path="/support/petAppearances">
<PageLayout>
<SupportPetAppearancesPage />
</PageLayout>
</Route>
<Route path="/"> <Route path="/">
<PageLayout hideHomeLink> <PageLayout hideHomeLink>
<HomePage /> <HomePage />

View file

@ -9,20 +9,20 @@ import {
PopoverContent, PopoverContent,
PopoverTrigger, PopoverTrigger,
} from "@chakra-ui/popover"; } from "@chakra-ui/popover";
import { Link } from "react-router-dom";
import HangerSpinner from "./components/HangerSpinner"; import HangerSpinner from "./components/HangerSpinner";
import { ErrorMessage, Heading1 } from "./util"; import { ErrorMessage, Heading1 } from "./util";
import useSupport from "./WardrobePage/support/useSupport"; import useSupport from "./WardrobePage/support/useSupport";
import Link from "next/link";
function SupportPetAppearancesPage() { function SupportPetAppearancesPage() {
const { isSupportUser } = useSupport(); const { isSupportUser } = useSupport();
if (!isSupportUser) { if (!isSupportUser) {
return "Sorry, this page is only for Support users!"; return <Box>Sorry, this page is only for Support users!</Box>;
} }
return ( return (
<> <Box>
<Heading1 marginBottom=".5em">Support: Pet appearances</Heading1> <Heading1 marginBottom=".5em">Support: Pet appearances</Heading1>
<Box as="p" marginBottom="2"> <Box as="p" marginBottom="2">
These species/color combinations have some <code>UNKNOWN</code>{" "} These species/color combinations have some <code>UNKNOWN</code>{" "}
@ -43,7 +43,7 @@ function SupportPetAppearancesPage() {
</Popover> </Popover>
</Box> </Box>
<UnlabeledPetAppearancesList /> <UnlabeledPetAppearancesList />
</> </Box>
); );
} }
@ -112,9 +112,12 @@ function SpeciesColorEditorLink({ species, color }) {
); );
return ( return (
<Link
href={`/outfits/new?species=${species.id}&color=${color.id}&pose=UNKNOWN`}
passHref
>
<Box <Box
as={Link} as="a"
to={`/outfits/new?species=${species.id}&color=${color.id}&pose=UNKNOWN`}
target="supportPetAppearanceEditor" target="supportPetAppearanceEditor"
border="1px solid" border="1px solid"
borderColor="green.600" borderColor="green.600"
@ -127,6 +130,7 @@ function SpeciesColorEditorLink({ species, color }) {
> >
{color.name} {species.name} {color.name} {species.name}
</Box> </Box>
</Link>
); );
} }

View file

@ -17,7 +17,10 @@ import * as React from "react";
*/ */
function useSupport() { function useSupport() {
const supportSecret = React.useMemo( const supportSecret = React.useMemo(
() => localStorage.getItem("supportSecret"), () =>
typeof localStorage !== "undefined"
? localStorage.getItem("supportSecret")
: null,
[] []
); );