diff --git a/next.config.js b/next.config.js
index e924d60..46af0c4 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,4 +1,5 @@
module.exports = {
+ reactStrictMode: true,
env: {
PUBLIC_URL: "",
},
diff --git a/pages/[[...slug]].tsx b/pages/[[...slug]].tsx
index 7c9ad24..f1c9d14 100644
--- a/pages/[[...slug]].tsx
+++ b/pages/[[...slug]].tsx
@@ -1,4 +1,4 @@
-// import NextIndexWrapper from '../src'
+// import App from '../src'
// next/dynamic is used to prevent breaking incompatibilities
// with SSR from window.SOME_VAR usage, if this is not used
@@ -8,8 +8,8 @@ import dynamic from "next/dynamic";
// try changing "ssr" to true below to test for incompatibilities, if
// no errors occur the above static import can be used instead and the
// below removed
-const NextIndexWrapper = dynamic(() => import("../src"), { ssr: false });
+const App = dynamic(() => import("../src/app/App"), { ssr: false });
export default function Page(props: any) {
- return ;
+ return ;
}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 12a8f4a..f09d8ff 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,7 +1,37 @@
+import React from "react";
import Head from "next/head";
import type { AppProps } from "next/app";
+import * as Sentry from "@sentry/react";
+import { Integrations } from "@sentry/tracing";
+import { Auth0Provider } from "@auth0/auth0-react";
+import { CSSReset, ChakraProvider, extendTheme } from "@chakra-ui/react";
+import { ApolloProvider } from "@apollo/client";
+import { useAuth0 } from "@auth0/auth0-react";
+import { mode } from "@chakra-ui/theme-tools";
+
+import buildApolloClient from "../src/app/apolloClient";
+
+const theme = extendTheme({
+ styles: {
+ global: (props) => ({
+ html: {
+ // HACK: Chakra sets body as the relative position element, which is
+ // fine, except its `min-height: 100%` doesn't actually work
+ // unless paired with height on the root element too!
+ height: "100%",
+ },
+ body: {
+ background: mode("gray.50", "gray.800")(props),
+ color: mode("green.800", "green.50")(props),
+ transition: "all 0.25s",
+ },
+ }),
+ },
+});
export default function DTIApp({ Component, pageProps }: AppProps) {
+ React.useEffect(() => setupLogging(), []);
+
return (
<>
@@ -9,7 +39,81 @@ export default function DTIApp({ Component, pageProps }: AppProps) {
-
+
+
+
+
+
+
+
+
);
}
+
+function ApolloProviderWithAuth0({ children }: { children: React.ReactNode }) {
+ const auth0 = useAuth0();
+ const auth0Ref = React.useRef(auth0);
+
+ React.useEffect(() => {
+ auth0Ref.current = auth0;
+ }, [auth0]);
+
+ const client = React.useMemo(
+ () => buildApolloClient(() => auth0Ref.current),
+ []
+ );
+ return {children};
+}
+
+function setupLogging() {
+ Sentry.init({
+ dsn:
+ "https://c55875c3b0904264a1a99e5b741a221e@o506079.ingest.sentry.io/5595379",
+ autoSessionTracking: true,
+ integrations: [
+ new Integrations.BrowserTracing({
+ beforeNavigate: (context) => ({
+ ...context,
+ // Assume any path segment starting with a digit is an ID, and replace
+ // it with `:id`. This will help group related routes in Sentry stats.
+ // NOTE: I'm a bit uncertain about the timing on this for tracking
+ // client-side navs... but we now only track first-time
+ // pageloads, and it definitely works correctly for them!
+ name: window.location.pathname.replaceAll(/\/[0-9][^/]*/g, "/:id"),
+ }),
+
+ // We have a _lot_ of location changes that don't actually signify useful
+ // navigations, like in the wardrobe page. It could be useful to trace
+ // them with better filtering someday, but frankly we don't use the perf
+ // features besides Web Vitals right now, and those only get tracked on
+ // first-time pageloads, anyway. So, don't track client-side navs!
+ startTransactionOnLocationChange: false,
+ }),
+ ],
+ denyUrls: [
+ // Don't log errors that were probably triggered by extensions and not by
+ // our own app. (Apparently Sentry's setting to ignore browser extension
+ // errors doesn't do this anywhere near as consistently as I'd expect?)
+ //
+ // Adapted from https://gist.github.com/impressiver/5092952, as linked in
+ // https://docs.sentry.io/platforms/javascript/configuration/filtering/.
+ /^chrome-extension:\/\//,
+ /^moz-extension:\/\//,
+ ],
+
+ // Since we're only tracking first-page loads and not navigations, 100%
+ // sampling isn't actually so much! Tune down if it becomes a problem, tho.
+ tracesSampleRate: 1.0,
+ });
+}
diff --git a/src/app/App.js b/src/app/App.js
index d131ab3..102cccc 100644
--- a/src/app/App.js
+++ b/src/app/App.js
@@ -1,19 +1,12 @@
import React from "react";
-import { ApolloProvider } from "@apollo/client";
-import { Auth0Provider } from "@auth0/auth0-react";
-import { CSSReset, ChakraProvider, extendTheme, Box } from "@chakra-ui/react";
-import { mode } from "@chakra-ui/theme-tools";
+import { Box } from "@chakra-ui/react";
import {
BrowserRouter as Router,
Switch,
Route,
useLocation,
} from "react-router-dom";
-import * as Sentry from "@sentry/react";
-import { Integrations } from "@sentry/tracing";
-import { useAuth0 } from "@auth0/auth0-react";
-import buildApolloClient from "./apolloClient";
import PageLayout from "./PageLayout";
import WardrobePageLayout from "./WardrobePage/WardrobePageLayout";
import { loadable } from "./util";
@@ -56,64 +49,6 @@ const ItemSearchPageToolbar = loadable(
{ fallback: }
);
-const theme = extendTheme({
- styles: {
- global: (props) => ({
- html: {
- // HACK: Chakra sets body as the relative position element, which is
- // fine, except its `min-height: 100%` doesn't actually work
- // unless paired with height on the root element too!
- height: "100%",
- },
- body: {
- background: mode("gray.50", "gray.800")(props),
- color: mode("green.800", "green.50")(props),
- transition: "all 0.25s",
- },
- }),
- },
-});
-
-Sentry.init({
- dsn:
- "https://c55875c3b0904264a1a99e5b741a221e@o506079.ingest.sentry.io/5595379",
- autoSessionTracking: true,
- integrations: [
- new Integrations.BrowserTracing({
- beforeNavigate: (context) => ({
- ...context,
- // Assume any path segment starting with a digit is an ID, and replace
- // it with `:id`. This will help group related routes in Sentry stats.
- // NOTE: I'm a bit uncertain about the timing on this for tracking
- // client-side navs... but we now only track first-time
- // pageloads, and it definitely works correctly for them!
- name: window.location.pathname.replaceAll(/\/[0-9][^/]*/g, "/:id"),
- }),
-
- // We have a _lot_ of location changes that don't actually signify useful
- // navigations, like in the wardrobe page. It could be useful to trace
- // them with better filtering someday, but frankly we don't use the perf
- // features besides Web Vitals right now, and those only get tracked on
- // first-time pageloads, anyway. So, don't track client-side navs!
- startTransactionOnLocationChange: false,
- }),
- ],
- denyUrls: [
- // Don't log errors that were probably triggered by extensions and not by
- // our own app. (Apparently Sentry's setting to ignore browser extension
- // errors doesn't do this anywhere near as consistently as I'd expect?)
- //
- // Adapted from https://gist.github.com/impressiver/5092952, as linked in
- // https://docs.sentry.io/platforms/javascript/configuration/filtering/.
- /^chrome-extension:\/\//,
- /^moz-extension:\/\//,
- ],
-
- // Since we're only tracking first-page loads and not navigations, 100%
- // sampling isn't actually so much! Tune down if it becomes a problem, tho.
- tracesSampleRate: 1.0,
-});
-
/**
* App is the entry point of our application. There's not a ton of exciting
* stuff happening here, mostly just setting up some globals and theming!
@@ -124,92 +59,80 @@ function App() {
return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
}
@@ -224,19 +147,4 @@ function ScrollToTop() {
return null;
}
-function ApolloProviderWithAuth0({ children }) {
- const auth0 = useAuth0();
- const auth0Ref = React.useRef(auth0);
-
- React.useEffect(() => {
- auth0Ref.current = auth0;
- }, [auth0]);
-
- const client = React.useMemo(
- () => buildApolloClient(() => auth0Ref.current),
- []
- );
- return {children};
-}
-
export default App;
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index 64301aa..0000000
--- a/src/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from "react";
-import App from "./app/App";
-
-export default function NextIndexWrapper() {
- return (
-
-
-
- );
-}