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