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 {useTranslation} from 'react-i18next';
17import useAuthStore from '../stores/useAuthStore';
18import {getUserLng} from '../i18n';
19
20moment.locale('fr-ch');
21
22const App = function (props: AppProps) {
23  const {Component, pageProps} = props;
24  const apolloClient = useApollo(pageProps);
25  const user = useAuthStore();
26  const {i18n} = useTranslation();
27  const language = useLangStore(s => s.language);
28  const setLanguage = useLangStore(s => s.setLanguage);
29
30  useEffect(() => {
31    setLanguage(getUserLng());
32  }, []);
33
34  useEffect(() => {
35    const languageProfile = user?.lang ?? language;
36    const momentLang = languageProfile === 'FR' ? 'fr-ch' : 'en';
37    moment.locale(momentLang);
38    i18n.changeLanguage(languageProfile?.toLowerCase());
39  }, [language, user?.lang]);
40
41  useEffect(() => {
42    // Remove the server-side injected CSS.
43    const jssStyles = document.querySelector('#jss-server-side');
44    if (jssStyles) {
45      jssStyles.parentElement!.removeChild(jssStyles);
46    }
47  }, []);
48
49  return (
50    <ApolloProvider client={apolloClient}>
51      <Metas metas={pageProps.metas} />
52      <ThemeProvider theme={theme}>
53        <MuiPickersUtilsProvider
54          libInstance={moment}
55          utils={MomentUtils}
56          locale={
57            language === Enum_Userspermissionsuser_Lang.Fr ? 'fr-ch' : 'en'
58          }
59        >
60          <CssBaseline />
61          <Component {...pageProps} />
62          <Toasts />
63        </MuiPickersUtilsProvider>
64      </ThemeProvider>
65    </ApolloProvider>
66  );
67};
68
69export default App;