From eb8a0cf2a9a7910ca26cc12cd5c37ad257089fc1 Mon Sep 17 00:00:00 2001 From: Matchu Date: Wed, 14 Sep 2022 19:15:48 -0700 Subject: [PATCH] [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 | 15 +++- pages/_app.tsx | 16 ++++- pages/privacy.tsx | 5 ++ src/app/App.js | 6 -- src/app/GlobalFooter.js | 25 +++---- src/app/GlobalHeader.js | 152 ++++++++++++++++++++-------------------- 6 files changed, 119 insertions(+), 100 deletions(-) create mode 100644 pages/privacy.tsx diff --git a/pages/[[...slug]].tsx b/pages/[[...slug]].tsx index f1c9d14..6f94349 100644 --- a/pages/[[...slug]].tsx +++ b/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) { - return ; -} +const FallbackPage: NextPageWithLayout = () => { + return ; +}; + +// This old fallback page uses App, which already has PageLayout built-in. +FallbackPage.layoutComponent = ({ children }: { children: JSX.Element }) => { + return children; +}; + +export default FallbackPage; diff --git a/pages/_app.tsx b/pages/_app.tsx index f09d8ff..11c0b1e 100644 --- a/pages/_app.tsx +++ b/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

= NextPage & { + 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) { - + + + diff --git a/pages/privacy.tsx b/pages/privacy.tsx new file mode 100644 index 0000000..a75cf4f --- /dev/null +++ b/pages/privacy.tsx @@ -0,0 +1,5 @@ +import PrivacyPolicyPage from "../src/app/PrivacyPolicyPage"; + +export default function PrivacyPolicyPageWrapper() { + return ; +} diff --git a/src/app/App.js b/src/app/App.js index 102cccc..08885cf 100644 --- a/src/app/App.js +++ b/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() { - - - - - diff --git a/src/app/GlobalFooter.js b/src/app/GlobalFooter.js index 49497a5..259ec07 100644 --- a/src/app/GlobalFooter.js +++ b/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() { Terms of Use - - Privacy Policy - + + Privacy Policy + Classic DTI @@ -111,21 +112,17 @@ function ColorModeButton() { } function useClassicDTIUrl() { - const itemPageMatch = useRouteMatch("/items/:itemId"); - const userItemListsIndexPageMatch = useRouteMatch("/user/:userId/lists"); - const modelingPageMatch = useRouteMatch("/modeling"); + const { pathname, query } = useRouter(); - if (itemPageMatch) { - const { itemId } = itemPageMatch.params; - return `https://impress.openneo.net/items/${itemId}`; + if (pathname === "/items/:itemId") { + return `https://impress.openneo.net/items/${query.itemId}`; } - if (userItemListsIndexPageMatch) { - const { userId } = userItemListsIndexPageMatch.params; - return `https://impress.openneo.net/user/${userId}/closet`; + if (pathname === "/user/:userId/lists") { + return `https://impress.openneo.net/user/${query.userId}/closet`; } - if (modelingPageMatch) { + if (pathname === "/modeling") { return "https://impress.openneo.net/modeling"; } diff --git a/src/app/GlobalHeader.js b/src/app/GlobalHeader.js index 4f57199..244ad97 100644 --- a/src/app/GlobalHeader.js +++ b/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 isHomePage = pathname === "/"; + const { pathname } = useRouter(); + const isHomePage = pathname === ""; return ( - + - - - - + + + + + + + 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 + - - Dress to Impress - - + ); } @@ -130,16 +132,16 @@ function UserNavBarSection() { )} {id && ( - - Lists - + + Lists + )} - - Outfits - - - Modeling - + + Outfits + + + Modeling + @@ -147,9 +149,9 @@ function UserNavBarSection() { } else { return ( - - Modeling - + + Modeling + );