OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

Move a lot of App.js stuff into Next's _app.tsx

Browse source 
Just sorta idly poking at what it would take to make our Next setup a bit more normal. To start, I'm putting things in more of the normal place, and eyeing what it would take to switch to Next's built-in routing! So now `App.js` is pretty much entirely a routing file, potentially to be deleted once we move 🤔
This commit is contained in:
Emi Matchu 2022-09-14 18:38:58 -07:00
parent 98c1034eff
commit 8cd45d7082
5 changed files with 184 additions and 181 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
next.config.js
View file

@ -1,4 +1,5 @@
module.exports = {
reactStrictMode: true,
env: {
PUBLIC_URL: "",
},

6
pages/[[...slug]].tsx
View file

@ -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 <NextIndexWrapper {...props} />;
return <App {...props} />;
}

106
pages/_app.tsx
View file

@ -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 (
<>
<Head>
@ -9,7 +39,81 @@ export default function DTIApp({ Component, pageProps }: AppProps) {
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<Component {...pageProps} />
<Auth0Provider
domain="openneo.us.auth0.com"
clientId="8LjFauVox7shDxVufQqnviUIywMuuC4r"
redirectUri={
process.env.NODE_ENV === "development"
? "http://localhost:3000"
: "https://impress-2020.openneo.net"
}
audience="https://impress-2020.openneo.net/api"
scope=""
>
<ApolloProviderWithAuth0>
<ChakraProvider theme={theme}>
<CSSReset />
<Component {...pageProps} />
</ChakraProvider>
</ApolloProviderWithAuth0>
</Auth0Provider>
</>
);
}
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 <ApolloProvider client={client}>{children}</ApolloProvider>;
}
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,
});
}

242
src/app/App.js
View file

@ -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: <Box height="40px" /> }
);
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 (
<Router>
<ScrollToTop />
<Auth0Provider
domain="openneo.us.auth0.com"
clientId="8LjFauVox7shDxVufQqnviUIywMuuC4r"
redirectUri={window.location.origin}
audience="https://impress-2020.openneo.net/api"
scope=""
>
<ApolloProviderWithAuth0>
<ChakraProvider theme={theme}>
<CSSReset />
<Switch>
<Route path="/items/search/:query?">
<PageLayout>
<ItemSearchPageToolbar marginBottom="6" />
<ItemSearchPage />
</PageLayout>
</Route>
<Route path="/items/:itemId/trades/offering">
<PageLayout>
<ItemTradesOfferingPage />
</PageLayout>
</Route>
<Route path="/items/:itemId/trades/seeking">
<PageLayout>
<ItemTradesSeekingPage />
</PageLayout>
</Route>
<Route path="/items/:itemId">
<PageLayout>
<ItemSearchPageToolbar marginBottom="8" />
<ItemPage />
</PageLayout>
</Route>
<Route path="/outfits/new">
<WardrobePage />
</Route>
<Route path="/outfits/:id">
<WardrobePage />
</Route>
<Route path="/user/:userId/lists/:ownsOrWants(owns|wants)/:listId">
<PageLayout>
<UserItemListPage />
</PageLayout>
</Route>
<Route path="/user/:userId/lists">
<PageLayout>
<UserItemListsIndexPage />
</PageLayout>
</Route>
<Route path="/your-outfits">
<PageLayout>
<UserOutfitsPage />
</PageLayout>
</Route>
<Route path="/modeling">
<PageLayout>
<ModelingPage />
</PageLayout>
</Route>
<Route path="/privacy">
<PageLayout>
<PrivacyPolicyPage />
</PageLayout>
</Route>
<Route path="/conversion">
<PageLayout>
<ConversionPage />
</PageLayout>
</Route>
<Route path="/support/petAppearances">
<PageLayout>
<SupportPetAppearancesPage />
</PageLayout>
</Route>
<Route path="/internal/assetImage">
<InternalAssetImagePage />
</Route>
<Route path="/">
<PageLayout hideHomeLink>
<HomePage />
</PageLayout>
</Route>
</Switch>
</ChakraProvider>
</ApolloProviderWithAuth0>
</Auth0Provider>
<Switch>
<Route path="/items/search/:query?">
<PageLayout>
<ItemSearchPageToolbar marginBottom="6" />
<ItemSearchPage />
</PageLayout>
</Route>
<Route path="/items/:itemId/trades/offering">
<PageLayout>
<ItemTradesOfferingPage />
</PageLayout>
</Route>
<Route path="/items/:itemId/trades/seeking">
<PageLayout>
<ItemTradesSeekingPage />
</PageLayout>
</Route>
<Route path="/items/:itemId">
<PageLayout>
<ItemSearchPageToolbar marginBottom="8" />
<ItemPage />
</PageLayout>
</Route>
<Route path="/outfits/new">
<WardrobePage />
</Route>
<Route path="/outfits/:id">
<WardrobePage />
</Route>
<Route path="/user/:userId/lists/:ownsOrWants(owns|wants)/:listId">
<PageLayout>
<UserItemListPage />
</PageLayout>
</Route>
<Route path="/user/:userId/lists">
<PageLayout>
<UserItemListsIndexPage />
</PageLayout>
</Route>
<Route path="/your-outfits">
<PageLayout>
<UserOutfitsPage />
</PageLayout>
</Route>
<Route path="/modeling">
<PageLayout>
<ModelingPage />
</PageLayout>
</Route>
<Route path="/privacy">
<PageLayout>
<PrivacyPolicyPage />
</PageLayout>
</Route>
<Route path="/conversion">
<PageLayout>
<ConversionPage />
</PageLayout>
</Route>
<Route path="/support/petAppearances">
<PageLayout>
<SupportPetAppearancesPage />
</PageLayout>
</Route>
<Route path="/internal/assetImage">
<InternalAssetImagePage />
</Route>
<Route path="/">
<PageLayout hideHomeLink>
<HomePage />
</PageLayout>
</Route>
</Switch>
</Router>
);
}
@ -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 <ApolloProvider client={client}>{children}</ApolloProvider>;
}
export default App;

10
src/index.js
View file

@ -1,10 +0,0 @@
import React from "react";
import App from "./app/App";
export default function NextIndexWrapper() {
return (
<React.StrictMode>
<App />
</React.StrictMode>
);
}