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 {I18nextProvider} from 'react-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 moment from 'moment';
14import Metas from '../containers/Metas';
15import Toasts from '../components/Toasts';
16import theme from '../theme';
17import useLocale from '../hooks/useLocale';
18import i18n, {initI18Next} from '../lib/i18n';
19import {useApollo} from '../lib/apolloClient';
20
21declare module '@mui/styles/defaultTheme' {
22 interface DefaultTheme extends Theme {}
23}
24
25const App = function (props: AppProps) {
26 const {Component, pageProps} = props;
27 const apolloClient = useApollo(pageProps);
28 const {locale} = useLocale();
29
30 useEffect(() => {
31 // Remove the server-side injected CSS.
32 const jssStyles = document.querySelector('#jss-server-side');
33 if (jssStyles) {
34 jssStyles.parentElement!.removeChild(jssStyles);
35 }
36 }, []);
37
38 initI18Next(locale);
39
40 return (
41 <I18nextProvider i18n={i18n}>
42 <ApolloProvider client={apolloClient}>
43 <Metas metas={pageProps.metas} />
44 <ThemeProvider theme={theme}>
45 <LocalizationProvider
46 dateAdapter={AdapterMoment}
47 dateLibInstance={moment}
48 adapterLocale={locale}
49 >
50 <CssBaseline />
51 <Head>
52 <meta
53 name="viewport"
54 content="width=device-width, initial-scale=1, maximum-scale=1"
55 />
56 </Head>
57 <Component {...pageProps} />
58 <Toasts />
59 </LocalizationProvider>
60 </ThemeProvider>
61 </ApolloProvider>
62 </I18nextProvider>
63 );
64};
65
66const AppWrapper = (props: AppProps) => (
67 <SessionProvider session={props?.pageProps.session} basePath="/api/nauth">
68 <App {...props} />
69 </SessionProvider>
70);
71
72export default AppWrapper;