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 {useTranslation} from 'react-i18next';
17import {getUserLng} from '../i18n';
18import useProfile from '../hooks/useProfile';
19
20moment.locale('fr-ch');
21
22const App = function (props: AppProps) {
23 const {Component, pageProps} = props;
24 const apolloClient = useApollo(pageProps);
25 const {profile} = useProfile();
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 = profile?.lang ?? language;
36 const momentLang = languageProfile === 'FR' ? 'fr-ch' : 'en';
37 moment.locale(momentLang);
38 i18n.changeLanguage(languageProfile?.toLowerCase());
39 }, [language, profile?.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;