import React , { useEffect , useContext , useReducer } from 'react' ; import { AppProps } from 'next/app' ; import Head from 'next/head' ; import { ThemeProvider , ColorModeProvider , CSSReset } from '@chakra-ui/core' ; import { MDXProvider } from '@mdx-js/react' ; import { setFileSystem } from '../src/actions/workspace' ; import { WorkspaceContext , workspaceContextReducer , workspaceContextInitialState , } from '../src/contexts/workspace' ; import { createFileSystemService } from '../src/services/fs' ; import theme from '../src/theme' ; import { mdxComponents } from '../src/mdxComoponents' ; const withGlobalProvider = ( App ) => ( appProps ) => { const [ state , dispatch ] = useReducer ( workspaceContextReducer , workspaceContextInitialState ) ; return ( < MDXProvider components = { mdxComponents } > < ThemeProvider theme = { theme } > < ColorModeProvider value = "light" > < WorkspaceContext . Provider value = { { state , dispatch } } > < App { ... appProps } / > < /WorkspaceContext.Provider> < /ColorModeProvider> < /ThemeProvider> < /MDXProvider>); } ; const MyApp = ( { Component , pageProps } ) => { const { dispatch } = useContext ( WorkspaceContext ) ; useEffect ( ( ) => { if ( process . browser ) { dispatch ( setFileSystem ( createFileSystemService ( 'asteroidfs' ) ) ) ; } } , [ dispatch ] ) ; return ( < > < Head > < meta name = "viewport" content = "width=device-width,initial-scale=1" / > < link href = "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel = "stylesheet" / > < /Head> < CSSReset / > < Component { ... pageProps } / > < />); } ; export default withGlobalProvider ( MyApp ) ;