import React, { useEffect } from 'react'
import App from 'next/app'
import type { AppProps, AppContext } from 'next/app'
import Head from 'next/head'
import { useTheme, ThemeProvider } from '@primer/components'
import { defaultThemeProps, getThemeProps } from 'components/lib/getThemeProps'
import '../stylesheets/index.scss'
import events from 'javascripts/events'
import experiment from 'javascripts/experiment'
import setNextEnv from 'javascripts/set-next-env'
type MyAppProps = AppProps & { csrfToken: string; themeProps: typeof defaultThemeProps }
const MyApp = ({ Component, pageProps, csrfToken, themeProps }: MyAppProps) => {
useEffect(() => {
events()
experiment()
setNextEnv()
}, [])
return (
<>
GitHub Documentation
)
}
MyApp.getInitialProps = async (appContext: AppContext) => {
const { ctx } = appContext
// calls page's `getInitialProps` and fills `appProps.pageProps`
const appProps = await App.getInitialProps(appContext)
const req: any = ctx.req
return { ...appProps, themeProps: getThemeProps(req), csrfToken: req?.csrfToken?.() || '' }
}
const SetTheme = ({ themeProps }: { themeProps: typeof defaultThemeProps }) => {
// Cause primer/components to re-evaluate the 'auto' color mode on client side render
const { setColorMode } = useTheme()
useEffect(() => {
setTimeout(() => {
setColorMode(themeProps.colorMode as any)
})
}, [])
return null
}
export default MyApp