import React , { useEffect } from 'react' ; import 'typeface-roboto' ; import { ThemeProvider } from '@material-ui/styles' ; import { CssBaseline } from '@material-ui/core' ; import { SnackbarProvider } from 'notistack' ; import lightTheme from '../themes/light' ; import darkTheme from '../themes/dark' ; import { ISettings } from '../types' ; import GoogleTasksService from '../services/GoogleTasks' ; import Home from './Home' ; import Welcome from './Welcome' ; import LoadError from './Error' ; const App = ( ) => { const [ googleLoaded , setGoogleLoaded ] = React . useState ( false ) ; const [ isSignedIn , setIsSignedIn ] = React . useState ( false ) ; const [ googleErroed , setGoogleErroed ] = React . useState < string | undefined > ( undefined ) ; const [ settings , setSettings ] = React . useState < ISettings > ( { darkMode : localStorage . getItem ( 'settings.darkMode' ) === 'true' , comfortView : localStorage . getItem ( 'settings.comfortView' ) === 'true' , taskView : localStorage . getItem ( 'settings.taskView' ) || 'DueDateView' , } ) ; function updateSigninStatus ( signedIn ) { setIsSignedIn ( signedIn ) ; } useEffect ( ( ) => { GoogleTasksService . load ( updateSigninStatus ) . then ( ( ) => { setGoogleLoaded ( true ) ; updateSigninStatus ( GoogleTasksService . isSignedIn ( ) ) ; } ) . catch ( error => { console . error ( 'Error loading google services:' , error ) ; setGoogleErroed ( error ) ; } ) ; } , [ ] ) ; function signIn ( ) { GoogleTasksService . signIn ( ) ; } function signOut ( ) { GoogleTasksService . signOut ( ) ; } const switchDarkMode = ( ) => { localStorage . setItem ( 'settings.darkMode' , ( ! settings . darkMode ) . toString ( ) ) ; setSettings ( { ... settings , darkMode : ! settings . darkMode , } ) ; } ; const switchSetting = ( key , value ) => { localStorage . setItem ( `settings.${ key }` , value . toString ( ) ) ; setSettings ( { ... settings , [ key ] : value , } ) ; } ; let render ; if ( googleErroed ) { render = < LoadError errorMessage = { googleErroed } />; } else if ( ! googleLoaded ) { render = < div > Loading ... < /div>; } else if ( isSignedIn ) { render = ( < Home settings = { settings } switchDarkMode = { switchDarkMode } switchSetting = { switchSetting } signOut = { signOut } / > ) ; } else { render = < Welcome signIn = { signIn } />; } return ( < ThemeProvider theme = { settings . darkMode ? darkTheme : lightTheme } > < CssBaseline /> < SnackbarProvider maxSnack = { 3 } anchorOrigin = { { vertical : 'bottom' , horizontal : 'center' , } } autoHideDuration = { 1000 } > { render } < /SnackbarProvider> < /ThemeProvider>); } ; export default App ;