From 04c4e0c1f3e94d61c562cb431b5bf72c23d1bf7e Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Wed, 14 Sep 2022 19:41:45 -0700
Subject: [PATCH] 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           |  5 +++
 src/app/App.js                             |  8 -----
 src/app/SupportPetAppearancesPage.js       | 40 ++++++++++++----------
 src/app/WardrobePage/support/useSupport.js |  5 ++-
 4 files changed, 31 insertions(+), 27 deletions(-)
 create mode 100644 pages/support/petAppearances.tsx

diff --git a/pages/support/petAppearances.tsx b/pages/support/petAppearances.tsx
new file mode 100644
index 0000000..00da6be
--- /dev/null
+++ b/pages/support/petAppearances.tsx
@@ -0,0 +1,5 @@
+import SupportPetAppearancesPage from "../../src/app/SupportPetAppearancesPage";
+
+export default function PrivacyPolicyPageWrapper() {
+  return <SupportPetAppearancesPage />;
+}
diff --git a/src/app/App.js b/src/app/App.js
index 5b0baa3..eb873e7 100644
--- a/src/app/App.js
+++ b/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 />
diff --git a/src/app/SupportPetAppearancesPage.js b/src/app/SupportPetAppearancesPage.js
index 5ffad41..604979b 100644
--- a/src/app/SupportPetAppearancesPage.js
+++ b/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
-      as={Link}
-      to={`/outfits/new?species=${species.id}&color=${color.id}&pose=UNKNOWN`}
-      target="supportPetAppearanceEditor"
-      border="1px solid"
-      borderColor="green.600"
-      borderRadius="full"
-      paddingX="3"
-      paddingY="2"
-      fontSize="sm"
-      _hover={{ backgroundColor: hoverBackgroundColor }}
-      _focus={{ boxShadow: "outline", outline: "none" }}
+    <Link
+      href={`/outfits/new?species=${species.id}&color=${color.id}&pose=UNKNOWN`}
+      passHref
     >
-      {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>
   );
 }
 
diff --git a/src/app/WardrobePage/support/useSupport.js b/src/app/WardrobePage/support/useSupport.js
index 0c164ea..af3c8af 100644
--- a/src/app/WardrobePage/support/useSupport.js
+++ b/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,
     []
   );