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 + );