This function sets axios's default headers to be included before all queries. We need to call `setUserToken` in _app.tsx so that the defaults are set before every client-side call, and we also need to call it in every instance of `setServerSideProps`. As a result, wherever we use `getCookies` and construct a `headers` object, we can remove it. Right now, we've only removed it on the top-level pages.
46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import { useEffect } from 'react'
|
|
import { getCookie } from 'cookies-next'
|
|
import { appWithTranslation } from 'next-i18next'
|
|
import { ThemeProvider } from 'next-themes'
|
|
|
|
import type { AppProps } from 'next/app'
|
|
import Layout from '~components/Layout'
|
|
|
|
import { accountState } from '~utils/accountState'
|
|
import setUserToken from '~utils/setUserToken'
|
|
|
|
import '../styles/globals.scss'
|
|
|
|
function MyApp({ Component, pageProps }: AppProps) {
|
|
const cookie = getCookie('account')
|
|
const cookieData: AccountCookie = cookie ? JSON.parse(cookie as string) : null
|
|
|
|
useEffect(() => {
|
|
setUserToken()
|
|
|
|
if (cookie) {
|
|
console.log(`Logged in as user "${cookieData.username}"`)
|
|
|
|
accountState.account.authorized = true
|
|
accountState.account.user = {
|
|
id: cookieData.userId,
|
|
username: cookieData.username,
|
|
picture: '',
|
|
element: '',
|
|
gender: 0,
|
|
}
|
|
} else {
|
|
console.log(`You are not currently logged in.`)
|
|
}
|
|
}, [cookie, cookieData])
|
|
|
|
return (
|
|
<ThemeProvider>
|
|
<Layout>
|
|
<Component {...pageProps} />
|
|
</Layout>
|
|
</ThemeProvider>
|
|
)
|
|
}
|
|
|
|
export default appWithTranslation(MyApp)
|