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