1import {useEffect, Fragment} from 'react';
 2import {AppProps} from 'next/app';
 3import {ThemeProvider} from '@material-ui/core/styles';
 4import {ApolloProvider} from '@apollo/client';
 5import CssBaseline from '@material-ui/core/CssBaseline';
 6import {useApollo} from '../lib/apolloClient';
 7import theme from '../theme';
 8import Toasts from '../components/Toasts';
 9import 'moment/locale/fr-ch';
10import '../i18n';
11import Metas from '../containers/Metas';
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        <Metas metas={pageProps.metas} />
27        <ThemeProvider theme={theme}>
28          <CssBaseline />
29          <Component {...pageProps} />
30          <Toasts />
31        </ThemeProvider>
32      </Fragment>
33    </ApolloProvider>
34  );
35};
36
37export default App;