[WIP] Move Privacy Policy onto its own Next.js page

The first page moved over! Note that this broke navigation on the rest of the app, so don't deploy this until we're done!

The reason it broke was that we had to migrate GlobalHeader and GlobalFooter to the Next.js link & router stuff too, or else it crashed because it wasn't in a react-router-dom context.

pages/[[...slug]].tsx

@@ -1,3 +1,5 @@
+import React from "react";
+import type { NextPageWithLayout } from "./_app";
 // import App from '../src'
 
 // next/dynamic is used to prevent breaking incompatibilities
@@ -10,6 +12,13 @@ import dynamic from "next/dynamic";
 // below removed
 const App = dynamic(() => import("../src/app/App"), { ssr: false });
 
-export default function Page(props: any) {
+const FallbackPage: NextPageWithLayout = () => {
-  return <App {...props} />;
+  return <App />;
-}
+};
+
+// This old fallback page uses App, which already has PageLayout built-in.
+FallbackPage.layoutComponent = ({ children }: { children: JSX.Element }) => {
+  return children;
+};
+
+export default FallbackPage;

pages/_app.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import Head from "next/head";
 import type { AppProps } from "next/app";
+import type { NextPage } from "next";
 import * as Sentry from "@sentry/react";
 import { Integrations } from "@sentry/tracing";
 import { Auth0Provider } from "@auth0/auth0-react";
@@ -10,6 +11,11 @@ import { useAuth0 } from "@auth0/auth0-react";
 import { mode } from "@chakra-ui/theme-tools";
 
 import buildApolloClient from "../src/app/apolloClient";
+import PageLayout from "../src/app/PageLayout";
+
+export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
+  layoutComponent?: (props: { children: JSX.Element }) => JSX.Element;
+};
 
 const theme = extendTheme({
   styles: {
@@ -29,7 +35,11 @@ const theme = extendTheme({
   },
 });
 
-export default function DTIApp({ Component, pageProps }: AppProps) {
+type AppPropsWithLayout = AppProps & { Component: NextPageWithLayout };
+
+export default function DTIApp({ Component, pageProps }: AppPropsWithLayout) {
+  const LayoutComponent = Component.layoutComponent ?? PageLayout;
+
   React.useEffect(() => setupLogging(), []);
 
   return (
@@ -53,7 +63,9 @@ export default function DTIApp({ Component, pageProps }: AppProps) {
         <ApolloProviderWithAuth0>
           <ChakraProvider theme={theme}>
             <CSSReset />
-            <Component {...pageProps} />
+            <LayoutComponent>
+              <Component {...pageProps} />
+            </LayoutComponent>
           </ChakraProvider>
         </ApolloProviderWithAuth0>
       </Auth0Provider>

pages/privacy.tsx

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

src/app/App.js

@@ -25,7 +25,6 @@ const ItemTradesSeekingPage = loadable(() =>
   import("./ItemTradesPage").then((m) => m.ItemTradesSeekingPage)
 );
 const ModelingPage = loadable(() => import("./ModelingPage"));
-const PrivacyPolicyPage = loadable(() => import("./PrivacyPolicyPage"));
 const SupportPetAppearancesPage = loadable(() =>
   import("./SupportPetAppearancesPage")
 );
@@ -109,11 +108,6 @@ function App() {
             <ModelingPage />
           </PageLayout>
         </Route>
-        <Route path="/privacy">
-          <PageLayout>
-            <PrivacyPolicyPage />
-          </PageLayout>
-        </Route>
         <Route path="/conversion">
           <PageLayout>
             <ConversionPage />

src/app/GlobalFooter.js

@@ -10,7 +10,8 @@ import {
 } from "@chakra-ui/react";
 import { EmailIcon, MoonIcon, SunIcon } from "@chakra-ui/icons";
 import { SiGithub, SiTwitter } from "react-icons/si";
-import { Link as RouterLink, useRouteMatch } from "react-router-dom";
+import { useRouter } from "next/router";
+import Link from "next/link";
 
 function GlobalFooter() {
   const classicDTIUrl = useClassicDTIUrl();
@@ -27,9 +28,9 @@ function GlobalFooter() {
           <ChakraLink href="https://impress.openneo.net/terms">
             Terms of Use
           </ChakraLink>
-          <ChakraLink as={RouterLink} to="/privacy">
+          <Link href="/privacy" passHref>
-            Privacy Policy
+            <ChakraLink>Privacy Policy</ChakraLink>
-          </ChakraLink>
+          </Link>
           <ChakraLink href={classicDTIUrl}>Classic DTI</ChakraLink>
         </HStack>
         <Box as="p" opacity="0.75">
@@ -111,21 +112,17 @@ function ColorModeButton() {
 }
 
 function useClassicDTIUrl() {
-  const itemPageMatch = useRouteMatch("/items/:itemId");
+  const { pathname, query } = useRouter();
-  const userItemListsIndexPageMatch = useRouteMatch("/user/:userId/lists");
-  const modelingPageMatch = useRouteMatch("/modeling");
 
-  if (itemPageMatch) {
+  if (pathname === "/items/:itemId") {
-    const { itemId } = itemPageMatch.params;
+    return `https://impress.openneo.net/items/${query.itemId}`;
-    return `https://impress.openneo.net/items/${itemId}`;
   }
 
-  if (userItemListsIndexPageMatch) {
+  if (pathname === "/user/:userId/lists") {
-    const { userId } = userItemListsIndexPageMatch.params;
+    return `https://impress.openneo.net/user/${query.userId}/closet`;
-    return `https://impress.openneo.net/user/${userId}/closet`;
   }
 
-  if (modelingPageMatch) {
+  if (pathname === "/modeling") {
     return "https://impress.openneo.net/modeling";
   }
 

src/app/GlobalHeader.js

@@ -12,9 +12,10 @@ import {
   useToast,
 } from "@chakra-ui/react";
 import { HamburgerIcon } from "@chakra-ui/icons";
-import { Link, useLocation } from "react-router-dom";
 import { ChevronLeftIcon } from "@chakra-ui/icons";
 import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/router";
 
 import useCurrentUser, {
   useAuthModeFeatureFlag,
@@ -35,81 +36,82 @@ function GlobalHeader() {
 }
 
 function HomeLink(props) {
-  const { pathname } = useLocation();
+  const { pathname } = useRouter();
-  const isHomePage = pathname === "/";
+  const isHomePage = pathname === "";
 
   return (
-    <Box
+    <Link href="/" passHref>
-      as={Link}
-      to="/"
-      display="flex"
-      alignItems="center"
-      role="group"
-      // HACK: When we're on the homepage, I want the title "Dress to Impress"
-      //       to stay visible for transition, but I don't want it to be a
-      //       click target. To do this, I constrain the size of the container,
-      //       and also remove pointer events from the overflowing children.
-      maxWidth={isHomePage ? "32px" : "none"}
-      {...props}
-    >
       <Box
-        flex="0 0 auto"
+        as="a"
         display="flex"
         alignItems="center"
-        marginRight="2"
+        role="group"
-        position="relative"
+        // HACK: When we're on the homepage, I want the title "Dress to Impress"
-        transition="all 0.2s"
+        //       to stay visible for transition, but I don't want it to be a
-        opacity="0.8"
+        //       click target. To do this, I constrain the size of the container,
-        _groupHover={{ transform: "scale(1.1)", opacity: "1" }}
+        //       and also remove pointer events from the overflowing children.
-        _groupFocus={{ transform: "scale(1.1)", opacity: "1" }}
+        maxWidth={isHomePage ? "32px" : "none"}
+        {...props}
       >
         <Box
-          position="absolute"
+          flex="0 0 auto"
-          right="100%"
+          display="flex"
-          opacity={isHomePage ? "0" : "1"}
+          alignItems="center"
-          pointerEvents={isHomePage ? "none" : "all"}
+          marginRight="2"
-          transform={isHomePage ? "translateX(3px)" : "none"}
+          position="relative"
           transition="all 0.2s"
+          opacity="0.8"
+          _groupHover={{ transform: "scale(1.1)", opacity: "1" }}
+          _groupFocus={{ transform: "scale(1.1)", opacity: "1" }}
         >
-          <ChevronLeftIcon />
+          <Box
-        </Box>
+            position="absolute"
-        <Box height="32px" borderRadius="lg" boxShadow="md" overflow="hidden">
+            right="100%"
-          <Image
+            opacity={isHomePage ? "0" : "1"}
-            src={HomeLinkIcon}
+            pointerEvents={isHomePage ? "none" : "all"}
-            alt=""
+            transform={isHomePage ? "translateX(3px)" : "none"}
-            width={32}
+            transition="all 0.2s"
-            height={32}
+          >
-            layout="fixed"
+            <ChevronLeftIcon />
+          </Box>
+          <Box height="32px" borderRadius="lg" boxShadow="md" overflow="hidden">
+            <Image
+              src={HomeLinkIcon}
+              alt=""
+              width={32}
+              height={32}
+              layout="fixed"
+            />
+          </Box>
+          <Box
+            height="2em"
+            width="2em"
+            position="absolute"
+            top="0"
+            left="0"
+            right="0"
+            bottom="0"
+            borderRadius="lg"
+            transition="border 0.2s"
           />
         </Box>
         <Box
-          height="2em"
+          flex="0 0 auto"
-          width="2em"
+          fontFamily="Delicious"
-          position="absolute"
+          fontWeight="600"
-          top="0"
+          fontSize="2xl"
-          left="0"
+          display={{ base: "none", sm: "block" }}
-          right="0"
+          opacity={isHomePage ? "0" : "1"}
-          bottom="0"
+          transition="all 0.2s"
-          borderRadius="lg"
+          marginRight="2"
-          transition="border 0.2s"
+          pointerEvents={isHomePage ? "none" : "all"}
-        />
+          _groupHover={{ fontWeight: "900" }}
+          _groupFocus={{ fontWeight: "900" }}
+        >
+          Dress to Impress
+        </Box>
       </Box>
-      <Box
+    </Link>
-        flex="0 0 auto"
-        fontFamily="Delicious"
-        fontWeight="600"
-        fontSize="2xl"
-        display={{ base: "none", sm: "block" }}
-        opacity={isHomePage ? "0" : "1"}
-        transition="all 0.2s"
-        marginRight="2"
-        pointerEvents={isHomePage ? "none" : "all"}
-        _groupHover={{ fontWeight: "900" }}
-        _groupFocus={{ fontWeight: "900" }}
-      >
-        Dress to Impress
-      </Box>
-    </Box>
   );
 }
 
@@ -130,16 +132,16 @@ function UserNavBarSection() {
         )}
         <NavLinksList>
           {id && (
-            <NavLinkItem as={Link} to={`/user/${id}/lists`}>
+            <Link href={`/user/${id}/lists`} passHref>
-              Lists
+              <NavLinkItem as="a">Lists</NavLinkItem>
-            </NavLinkItem>
+            </Link>
           )}
-          <NavLinkItem as={Link} to={`/your-outfits`}>
+          <Link href={`/your-outfits`} passHref>
-            Outfits
+            <NavLinkItem as="a">Outfits</NavLinkItem>
-          </NavLinkItem>
+          </Link>
-          <NavLinkItem as={Link} to="/modeling">
+          <Link href="/modeling" passHref>
-            Modeling
+            <NavLinkItem as="a">Modeling</NavLinkItem>
-          </NavLinkItem>
+          </Link>
           <LogoutButton />
         </NavLinksList>
       </HStack>
@@ -147,9 +149,9 @@ function UserNavBarSection() {
   } else {
     return (
       <HStack align="center" spacing="2">
-        <NavButton as={Link} to="/modeling">
+        <Link href="/modeling" passHref>
-          Modeling
+          <NavButton as="a">Modeling</NavButton>
-        </NavButton>
+        </Link>
         <LoginButton />
       </HStack>
     );