frontend/pages/_app.tsx (view raw)
1import {useEffect, Fragment} from 'react';
2import Head from 'next/head';
3import {AppProps} from 'next/app';
4import {ThemeProvider} from '@material-ui/core/styles';
5import {ApolloProvider} from '@apollo/client';
6import CssBaseline from '@material-ui/core/CssBaseline';
7import {useApollo} from '../lib/apolloClient';
8import theme from '../theme';
9import Toasts from '../components/Toasts';
10import 'moment/locale/fr-ch';
11import '../i18n';
12
13const App = function (props: AppProps) {
14 const {Component, pageProps} = props;
15 const apolloClient = useApollo(pageProps);
16
17 useEffect(() => {
18 // Remove the server-side injected CSS (MUI).
19 const jssStyles = document.querySelector('#jss-server-side');
20 jssStyles?.parentElement?.removeChild(jssStyles);
21 }, []);
22
23 return (
24 <ApolloProvider client={apolloClient}>
25 <Fragment>
26 <Head>
27 <title>{pageProps.meta?.title || 'Caroster'}</title>
28 <meta
29 name="viewport"
30 content="minimum-scale=1, initial-scale=1, width=device-width"
31 />
32 </Head>
33 <ThemeProvider theme={theme}>
34 <CssBaseline />
35 <Component {...pageProps} />
36 <Toasts />
37 </ThemeProvider>
38 </Fragment>
39 </ApolloProvider>
40 );
41};
42
43export default App;