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