import React , { useEffect , useState } from 'react' ; import { isMobile } from 'react-device-detect' ; import { useDispatch , useSelector } from 'react-redux' ; import { useHistory } from 'react-router-dom' ; import LoadingWrapper from 'src/components/LoadingComponent/LoadingComponent' ; import { AppState } from 'src/store' ; import { checkEmail as checkEmailFunc , signIn , signUp , } from '../../../../ducks/auth/email/actions' ; import { getFBLoginRedirectResult , LoginWithFBFirebaseActionPopUp , triggerFBLoginWithRedirect , } from '../../../../ducks/auth/facebook/actions' ; import { getGoogleLoginRedirectResult , loginWithGoogleFirebaseActionPopUp , triggerGoogleLoginWithRedirect , } from '../../../../ducks/auth/google/actions' ; import { authProviders } from '../../../../ducks/auth/types' ; import LoginFooter from '../../components/LoginFooter/LoginFooter' ; import RegistrationSteps from '../../components/RegistrationSteps/RegistrationSteps' ; const LoginContainer = ( { redirectBack = '/' , } ) => { const dispatch = useDispatch ( ) ; const user = useSelector ( ( state ) => state . auth . user ) ; const error = useSelector ( ( state ) => state . auth . error ) ; const checkEmail = useSelector ( ( state ) => state . auth . checkEmail ) ; const authLoading = useSelector ( ( state ) => state . auth . loading ) ; const history = useHistory ( ) ; const [ emailAndPassword , setEmailAndPassword ] = useState < Record < string , string > > ( { } ) ; const [ shouldCheck , setShouldCheck ] = useState < boolean > ( false ) ; const [ currentStep , setCurrentStep ] = useState < number > ( 0 ) ; useEffect ( ( ) => { const redirectStarted = window . sessionStorage . getItem ( 'redirect_started' ) ; if ( redirectStarted ) { const loginMethod = redirectStarted . split ( '_' ) [ 0 ] ; if ( loginMethod === 'facebook' ) { dispatch ( getFBLoginRedirectResult ( ) ) ; } else { dispatch ( getGoogleLoginRedirectResult ( ) ) ; } } } , [ dispatch ] ) ; useEffect ( ( ) => { if ( user ) { history . replace ( redirectBack ) ; } } , [ history , redirectBack , user ] ) ; useEffect ( ( ) => { if ( ! authLoading ) { if ( ! shouldCheck && checkEmail && ! checkEmail . loading && emailAndPassword . email && emailAndPassword . password && emailAndPassword . action ) { if ( checkEmail . present ) { if ( checkEmail . method === authProviders . email ) { if ( emailAndPassword . action === 'signin' ) { dispatch ( signIn ( { email : emailAndPassword . email , password : emailAndPassword . password , } ) ) ; } } else { } } else if ( emailAndPassword . action === 'signup' ) { dispatch ( signUp ( { email : emailAndPassword . email , password : emailAndPassword . password , } ) ) ; } setEmailAndPassword ( { } ) ; } if ( shouldCheck && emailAndPassword . email && ! ( checkEmail && checkEmail . loading ) ) { setShouldCheck ( false ) ; dispatch ( checkEmailFunc ( { email : emailAndPassword . email , password : emailAndPassword . password , } ) ) ; } } } , [ authLoading , checkEmail , emailAndPassword , shouldCheck , dispatch ] ) ; const handleLoginGoogle = ( ) => { if ( isMobile ) { dispatch ( triggerGoogleLoginWithRedirect ( ) ) ; } else { dispatch ( loginWithGoogleFirebaseActionPopUp ( ) ) ; } } ; const handleLoginFacebook = ( ) => { if ( isMobile ) { dispatch ( triggerFBLoginWithRedirect ( ) ) ; } else { dispatch ( LoginWithFBFirebaseActionPopUp ( ) ) ; } } ; const handleEmailSignIn = ( email , password ) => { if ( email && password ) { setShouldCheck ( true ) ; setEmailAndPassword ( { email , password , action : 'signin' , } ) ; } } ; const handleEmailSignUp = ( email , password ) => { if ( email && password ) { setShouldCheck ( true ) ; setEmailAndPassword ( { email , password , action : 'signup' , } ) ; } } ; const checkEmailExists = ( email ) => { if ( email ) { setShouldCheck ( true ) ; setEmailAndPassword ( { email , } ) ; } } ; if ( authLoading ) { return < LoadingWrapper />; } return ( < > < RegistrationSteps currentStep = { currentStep } setCurrentStep = { setCurrentStep } onLoginGoogle = { handleLoginGoogle } onLoginFacebook = { handleLoginFacebook } onEmailSignIn = { handleEmailSignIn } onEmailSignUp = { handleEmailSignUp } / > < LoginFooter /> < div style = { { color : 'red' , textAlign : 'center' } } > { error && error . message } { ( ( ) => { if ( checkEmail && ! checkEmail . loading && checkEmail . method && checkEmail . present ) { if ( checkEmail . method !== authProviders . email ) { return `You must use ${ checkEmail . method } to login` ; } if ( currentStep === 3 ) { return 'You already have an account, please Sign In!' ; } } if ( currentStep === 2 && checkEmail && ! checkEmail . present ) { return "We don't have an account with this email in our system, Please Sign Up!" ; } } ) ( ) } < /div> < />); } ; interface LoginRedirectProps { redirectBack ? : string ; } export default LoginContainer ;