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