import React , { useEffect } from "react" ; import { useService , useMachine } from "@xstate/react" ; import { makeStyles } from "@material-ui/core/styles" ; import { Container , CssBaseline } from "@material-ui/core" ; import { snackbarMachine } from "../machines/snackbarMachine" ; import { notificationsMachine } from "../machines/notificationsMachine" ; import { authService } from "../machines/authMachine" ; import AlertBar from "../components/AlertBar" ; import { bankAccountsMachine } from "../machines/bankAccountsMachine" ; import PrivateRoutesContainer from "./PrivateRoutesContainer" ; import { GoogleLogin , useGoogleLogin } from "react-google-login" ; if ( window . Cypress ) { window . authService = authService ; } const useStyles = makeStyles ( ( theme ) => ( { root : { display : "flex" , } , paper : { marginTop : theme . spacing ( 8 ) , display : "flex" , flexDirection : "column" , alignItems : "center" , } , } ) ) ; const AppGoogle = ( ) => { const classes = useStyles ( ) ; const [ authState ] = useService ( authService ) ; const [ , , notificationsService ] = useMachine ( notificationsMachine ) ; const [ , , snackbarService ] = useMachine ( snackbarMachine ) ; const [ , , bankAccountsService ] = useMachine ( bankAccountsMachine ) ; if ( window . Cypress ) { useEffect ( ( ) => { const { user , token } = JSON . parse ( localStorage . getItem ( "googleCypress" ) ! ) ; authService . send ( "GOOGLE" , { user , token , } ) ; } , [ ] ) ; } else { useGoogleLogin ( { clientId : process . env . REACT_APP_GOOGLE_CLIENTID ! , onSuccess : ( res ) => { console . log ( "onSuccess" , res ) ; authService . send ( "GOOGLE" , { user : res . profileObj , token : res . tokenId } ) ; } , cookiePolicy : "single_host_origin" , isSignedIn : true , } ) ; } const isLoggedIn = authState . matches ( "authorized" ) ; return ( < div className = { classes . root } > < CssBaseline /> { isLoggedIn && ( < PrivateRoutesContainer isLoggedIn = { isLoggedIn } notificationsService = { notificationsService } authService = { authService } snackbarService = { snackbarService } bankAccountsService = { bankAccountsService } / > ) } { authState . matches ( "unauthorized" ) && ( < Container component = "main" maxWidth = "xs" > < CssBaseline /> < div className = { classes . paper } > < GoogleLogin clientId = { process . env . REACT_APP_GOOGLE_CLIENTID ! } buttonText = "Login" cookiePolicy = { "single_host_origin" } / > < /div> < /Container>)} < AlertBar snackbarService = { snackbarService } / > < /div>); } ; export default AppGoogle ;