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 useProfile from '../hooks/useProfile';
15import useLocale from '../hooks/useLocale';
16import {I18nextProvider} from 'react-i18next';
17import i18n, {initI18Next} from '../lib/i18n';
18
19const App = function (props: AppProps) {
20  const {Component, pageProps} = props;
21  const apolloClient = useApollo(pageProps);
22  const {locale} = useLocale();
23
24  useEffect(() => {
25    // Remove the server-side injected CSS.
26    const jssStyles = document.querySelector('#jss-server-side');
27    if (jssStyles) {
28      jssStyles.parentElement!.removeChild(jssStyles);
29    }
30  }, []);
31
32  initI18Next(locale);
33
34  return (
35    <I18nextProvider i18n={i18n}>
36      <ApolloProvider client={apolloClient}>
37        <Metas metas={pageProps.metas} />
38        <ThemeProvider theme={theme}>
39          <MuiPickersUtilsProvider
40            libInstance={moment}
41            utils={MomentUtils}
42            locale={locale === 'fr' ? 'fr-ch' : 'en'}
43          >
44            <CssBaseline />
45            <Component {...pageProps} />
46            <Toasts />
47          </MuiPickersUtilsProvider>
48        </ThemeProvider>
49      </ApolloProvider>
50    </I18nextProvider>
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;