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.

pages/support/petAppearances.tsx

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

src/app/App.js

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

src/app/SupportPetAppearancesPage.js

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

src/app/WardrobePage/support/useSupport.js

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