frontend/pages/_app.tsx (view raw)
1import {useEffect} from 'react';
2import {AppProps} from 'next/app';
3import {ApolloProvider} from '@apollo/client';
4import {ThemeProvider} from '@material-ui/core/styles';
5import CssBaseline from '@material-ui/core/CssBaseline';
6import {MuiPickersUtilsProvider} from '@material-ui/pickers';
7import {SessionProvider} from 'next-auth/react';
8import moment from 'moment';
9import MomentUtils from '@date-io/moment';
10import {useApollo} from '../lib/apolloClient';
11import Metas from '../containers/Metas';
12import Toasts from '../components/Toasts';
13import theme from '../theme';
14import {useTranslation} from 'react-i18next';
15import useProfile from '../hooks/useProfile';
16import {changeLang} from '../lib/i18n';
17
18const App = function (props: AppProps) {
19 const {Component, pageProps} = props;
20 const apolloClient = useApollo(pageProps);
21 const {profile} = useProfile();
22 const {i18n} = useTranslation();
23
24 useEffect(() => {
25 if (profile?.lang) changeLang(profile.lang);
26 }, [profile]);
27
28 useEffect(() => {
29 // Remove the server-side injected CSS.
30 const jssStyles = document.querySelector('#jss-server-side');
31 if (jssStyles) {
32 jssStyles.parentElement!.removeChild(jssStyles);
33 }
34 }, []);
35
36 return (
37 <ApolloProvider client={apolloClient}>
38 <Metas metas={pageProps.metas} />
39 <ThemeProvider theme={theme}>
40 <MuiPickersUtilsProvider
41 libInstance={moment}
42 utils={MomentUtils}
43 locale={i18n.language === 'fr' ? 'fr-ch' : 'en'}
44 >
45 <CssBaseline />
46 <Component {...pageProps} />
47 <Toasts />
48 </MuiPickersUtilsProvider>
49 </ThemeProvider>
50 </ApolloProvider>
51 );
52};
53
54const AppWrapper = (props: AppProps) => (
55 <SessionProvider session={props?.pageProps.session} basePath="/api/nauth">
56 <App {...props} />
57 </SessionProvider>
58);
59
60export default AppWrapper;