text: import React from 'react';
  import { Link } from 'react-router-dom';
  import useForm from "../../hooks/useForm";
  import { useDispatch, useSelector } from "react-redux";
  import { startGoogleLogin, startLoginEmailPassword } from "../../actions/authAction";
  
  export const LoginScreen = () => {
  	const { ui: { loading } }               = useSelector(state => state);
  	const dispatch                          = useDispatch();
  	const [ formValues, handleInputChange ] = useForm({
  		email: 'pedro@gmail.com',
  		password: '1234'
  	});
  	const { email, password }               = formValues;
  	
  	const handleLogin = e => {
  		e.preventDefault();
  		
  		dispatch(startLoginEmailPassword(email, password));
  	};
  	
  	const handleGoogleLogin = () => {
  		dispatch(startGoogleLogin());
  	};
  	
  	return (
  		<>
  			<h3 className="auth__title">Login</h3>
  			<form onSubmit={ handleLogin }>
  				<input type="text" placeholder="Email" name="email" className="auth__input" autoComplete="off" onChange={ handleInputChange } />
  				<input type="password" placeholder="Password" name="password" className="auth__input" onChange={ handleInputChange } />
  				<button type="submit" className="btn btn-primary btn-block" disabled={ loading }>
  					Login
  				</button>
  				<div className="auth__social-networks">
  					<p>Login with social networks</p>
  					<div className="google-btn" onClick={ handleGoogleLogin }>
  						<div className="google-icon-wrapper">
  							<img className="google-icon" src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" alt="google button" />
  						</div>
  						<p className="btn-text">
  							<b>Sign in with google</b>
  						</p>
  					</div>
  				</div>
  				<Link to="/register" className="link"> Create new account </Link>
  			</form>
  		</>
  	);
  };
  