frontend/pages/_app.tsx (view raw)
1import {useEffect} from 'react';
2import 'leaflet/dist/leaflet.css';
3import '../public/leaflet_reset.css';
4import Head from 'next/head';
5import CssBaseline from '@mui/material/CssBaseline';
6import {ThemeProvider, Theme} from '@mui/material/styles';
7import {AppProps} from 'next/app';
8import {appWithTranslation} from 'next-i18next';
9import {ApolloProvider} from '@apollo/client';
10import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider';
11import {AdapterMoment} from '@mui/x-date-pickers/AdapterMoment';
12import {SessionProvider} from 'next-auth/react';
13import Metas from '../containers/Metas';
14import Toasts from '../components/Toasts';
15import theme from '../theme';
16import useLocale from '../hooks/useLocale';
17import {useApollo} from '../lib/apolloClient';
18import nextI18NextConfig from '../next-i18next.config.js';
19import moment from 'moment';
20import useTolgee from '../hooks/useTolgee';
21
22declare module '@mui/styles/defaultTheme' {
23 interface DefaultTheme extends Theme {}
24}
25
26const App = function (props: AppProps) {
27 const {Component, pageProps} = props;
28 const apolloClient = useApollo(pageProps);
29 const {locale} = useLocale();
30 useTolgee();
31
32 useEffect(() => {
33 // Remove the server-side injected CSS.
34 const jssStyles = document.querySelector('#jss-server-side');
35 if (jssStyles) {
36 jssStyles.parentElement!.removeChild(jssStyles);
37 }
38 }, []);
39
40 return (
41 <ApolloProvider client={apolloClient}>
42 <Metas metas={pageProps.metas} />
43 <ThemeProvider theme={theme}>
44 <LocalizationProvider
45 dateAdapter={AdapterMoment}
46 dateLibInstance={moment}
47 adapterLocale={locale}
48 >
49 <CssBaseline />
50 <Head>
51 <meta
52 name="viewport"
53 content="width=device-width, initial-scale=1, maximum-scale=1"
54 />
55 </Head>
56 <Component {...pageProps} />
57 <Toasts />
58 </LocalizationProvider>
59 </ThemeProvider>
60 </ApolloProvider>
61 );
62};
63
64const AppWrapper = (props: AppProps) => (
65 <SessionProvider session={props?.pageProps.session} basePath="/api/nauth">
66 <App {...props} />
67 </SessionProvider>
68);
69
70export default appWithTranslation(AppWrapper, nextI18NextConfig);