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