OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity
impress-2020/pages/_app.tsx

132 lines
4.5 KiB
TypeScript
Raw Normal View History

Move a lot of App.js stuff into Next's _app.tsx 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 🤔
2022-09-14 18:38:58 -07:00
import React from "react";
Fix TypeScript errors in pages dir Idk why Next made me these files in a way that created React errors but ok! Maybe it was because we didn't have `pages` in the `includes`, so my editor was using the default tsconfig instead of this one?
2022-09-14 18:04:10 -07:00
import Head from "next/head";
import type { AppProps } from "next/app";
[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.
2022-09-14 19:15:48 -07:00
import type { NextPage } from "next";
Move a lot of App.js stuff into Next's _app.tsx 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 🤔
2022-09-14 18:38:58 -07:00
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";
[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.
2022-09-14 19:15:48 -07:00
import PageLayout from "../src/app/PageLayout";
export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
layoutComponent?: (props: { children: JSX.Element }) => JSX.Element;
};
Move a lot of App.js stuff into Next's _app.tsx 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 🤔
2022-09-14 18:38:58 -07:00
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",
},
}),
},
});
[WIP] Run cra-to-next codemod to be on Nextjs I'm interested in ejecting from Vercel, so I'm trying to get off their proprietary-ish create-react-app + Vercel API thing, and onto Nextjs, which is very similar in shape, but more portable. I had to disable `craCompat` in `next.config.js` to stop us from crashing on their webpack config, see https://github.com/vercel/next.js/discussions/25858#discussioncomment-1573822 The frontend seems to work at a basic level, but network requests fail, and images don't seem to be working. I'll work on those next! Note that this commit was forced through despite failing lint checks. We'll need to fix that up too! Also, after the codemod, I moved `src/pages` to the more canonical location `pages`. Lint tooling seemed surprised to not find a `pages` directory, and I didn't see a config that was making it work correctly in the other location, so I figured it's that Next is willing to check `pages` or `src/pages`? But this is more canonical so yeah!
2021-11-01 21:48:09 -07:00
[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.
2022-09-14 19:15:48 -07:00
type AppPropsWithLayout = AppProps & { Component: NextPageWithLayout };
export default function DTIApp({ Component, pageProps }: AppPropsWithLayout) {
const LayoutComponent = Component.layoutComponent ?? PageLayout;
Move a lot of App.js stuff into Next's _app.tsx 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 🤔
2022-09-14 18:38:58 -07:00
React.useEffect(() => setupLogging(), []);
[WIP] Run cra-to-next codemod to be on Nextjs I'm interested in ejecting from Vercel, so I'm trying to get off their proprietary-ish create-react-app + Vercel API thing, and onto Nextjs, which is very similar in shape, but more portable. I had to disable `craCompat` in `next.config.js` to stop us from crashing on their webpack config, see https://github.com/vercel/next.js/discussions/25858#discussioncomment-1573822 The frontend seems to work at a basic level, but network requests fail, and images don't seem to be working. I'll work on those next! Note that this commit was forced through despite failing lint checks. We'll need to fix that up too! Also, after the codemod, I moved `src/pages` to the more canonical location `pages`. Lint tooling seemed surprised to not find a `pages` directory, and I didn't see a config that was making it work correctly in the other location, so I figured it's that Next is willing to check `pages` or `src/pages`? But this is more canonical so yeah!
2021-11-01 21:48:09 -07:00
return (
<>
<Head>
<title>Dress to Impress</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
Fix TypeScript errors in pages dir Idk why Next made me these files in a way that created React errors but ok! Maybe it was because we didn't have `pages` in the `includes`, so my editor was using the default tsconfig instead of this one?
2022-09-14 18:04:10 -07:00
Move a lot of App.js stuff into Next's _app.tsx 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 🤔
2022-09-14 18:38:58 -07:00
<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 />
[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.
2022-09-14 19:15:48 -07:00
<LayoutComponent>
<Component {...pageProps} />
</LayoutComponent>
Move a lot of App.js stuff into Next's _app.tsx 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 🤔
2022-09-14 18:38:58 -07:00
</ChakraProvider>
</ApolloProviderWithAuth0>
</Auth0Provider>
[WIP] Run cra-to-next codemod to be on Nextjs I'm interested in ejecting from Vercel, so I'm trying to get off their proprietary-ish create-react-app + Vercel API thing, and onto Nextjs, which is very similar in shape, but more portable. I had to disable `craCompat` in `next.config.js` to stop us from crashing on their webpack config, see https://github.com/vercel/next.js/discussions/25858#discussioncomment-1573822 The frontend seems to work at a basic level, but network requests fail, and images don't seem to be working. I'll work on those next! Note that this commit was forced through despite failing lint checks. We'll need to fix that up too! Also, after the codemod, I moved `src/pages` to the more canonical location `pages`. Lint tooling seemed surprised to not find a `pages` directory, and I didn't see a config that was making it work correctly in the other location, so I figured it's that Next is willing to check `pages` or `src/pages`? But this is more canonical so yeah!
2021-11-01 21:48:09 -07:00
</>
Fix TypeScript errors in pages dir Idk why Next made me these files in a way that created React errors but ok! Maybe it was because we didn't have `pages` in the `includes`, so my editor was using the default tsconfig instead of this one?
2022-09-14 18:04:10 -07:00
);
[WIP] Run cra-to-next codemod to be on Nextjs I'm interested in ejecting from Vercel, so I'm trying to get off their proprietary-ish create-react-app + Vercel API thing, and onto Nextjs, which is very similar in shape, but more portable. I had to disable `craCompat` in `next.config.js` to stop us from crashing on their webpack config, see https://github.com/vercel/next.js/discussions/25858#discussioncomment-1573822 The frontend seems to work at a basic level, but network requests fail, and images don't seem to be working. I'll work on those next! Note that this commit was forced through despite failing lint checks. We'll need to fix that up too! Also, after the codemod, I moved `src/pages` to the more canonical location `pages`. Lint tooling seemed surprised to not find a `pages` directory, and I didn't see a config that was making it work correctly in the other location, so I figured it's that Next is willing to check `pages` or `src/pages`? But this is more canonical so yeah!
2021-11-01 21:48:09 -07:00
}
Move a lot of App.js stuff into Next's _app.tsx 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 🤔
2022-09-14 18:38:58 -07:00
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,
});
}
Copy permalink