text: import React, { useState } from "react";
  import { useDispatch } from "react-redux";
  import GoogleLogin from "react-google-login";
  import { useHistory } from "react-router-dom";
  import { signIn, signUp } from "../actions/auth";
  
  import Container from "react-bootstrap/Container";
  import Card from "react-bootstrap/Card";
  import Form from "react-bootstrap/Form";
  import Col from "react-bootstrap/Col";
  import Button from "react-bootstrap/Button";
  
  const Auth = () => {
  	const history = useHistory();
  	const dispatch = useDispatch();
  
  	const [isSignUp, setSignUp] = useState(false);
  	const [authData, setAuthData] = useState({
  		firstName: "",
  		lastName: "",
  		email: "",
  		password: "",
  		confirmPassword: "",
  	});
  
  	const switchSignUp = () => {
  		setSignUp((prevSignUp) => !prevSignUp);
  	};
  	const handleChange = (e) => {
  		setAuthData({ ...authData, [e.target.name]: e.target.value });
  	};
  	const handleSubmit = (e) => {
  		e.preventDefault();
  		if (isSignUp) {
  			dispatch(signUp(authData, history));
  		} else {
  			dispatch(signIn(authData, history));
  		}
  	};
  	const googleSuccess = async (res) => {
  		const result = res?.profileObj;
  		const token = res?.tokenId;
  		try {
  			dispatch({ type: "AUTH", data: { result, token } });
  			history.push("/");
  		} catch (error) {
  			console.log(error);
  		}
  	};
  	const googleFailure = async (res) => {
  		console.log(res.error);
  		console.log("Google Sign In was unsuccessful. Please try again later.");
  	};
  	return (
  		<Container className="auth-container">
  			<Card>
  				<Card.Body className="auth-body">
  					<Form onSubmit={handleSubmit}>
  						{isSignUp && (
  							<Form.Row>
  								<Form.Group as={Col}>
  									<Form.Label>First name</Form.Label>
  									<Form.Control
  										type="text"
  										name="firstName"
  										onChange={handleChange}
  									/>
  								</Form.Group>
  								<Form.Group as={Col}>
  									<Form.Label>Last name</Form.Label>
  									<Form.Control
  										type="text"
  										name="lastName"
  										onChange={handleChange}
  									/>
  								</Form.Group>
  							</Form.Row>
  						)}
  						<Form.Group>
  							<Form.Label>Email address</Form.Label>
  							<Form.Control type="email" name="email" onChange={handleChange} />
  						</Form.Group>
  						<Form.Group>
  							<Form.Label>Password</Form.Label>
  							<Form.Control type="password" name="password" onChange={handleChange} />
  						</Form.Group>
  						{isSignUp && (
  							<Form.Group>
  								<Form.Label>Confirm password</Form.Label>
  								<Form.Control
  									type="password"
  									name="confirmPassword"
  									onChange={handleChange}
  								/>
  							</Form.Group>
  						)}
  						<Form.Group>
  							<Button type="submit" block>
  								Submit
  							</Button>
  						</Form.Group>
  						<Form.Group>
  							<GoogleLogin
  								clientId="133383016032-d61053cbmcutp5kj818pe9ij5mrcf2j9.apps.googleusercontent.com"
  								render={(renderProps) => (
  									<Button
  										color="primary"
  										onClick={renderProps.onClick}
  										disabled={renderProps.disabled}
  										block
  									>
  										Google Sign In
  									</Button>
  								)}
  								onSuccess={googleSuccess}
  								onFailure={googleFailure}
  								cookiePolicy="single_host_origin"
  							/>
  						</Form.Group>
  						<Form.Group>
  							{isSignUp ? (
  								<Button variant="outline-secondary" onClick={switchSignUp} block>
  									ALREADY HAVE AN ACCOUNT? SIGN IN
  								</Button>
  							) : (
  								<Button variant="outline-secondary" onClick={switchSignUp} block>
  									DON'T HAVE AN ACCOUNT? SIGN UP
  								</Button>
  							)}
  						</Form.Group>
  					</Form>
  				</Card.Body>
  			</Card>
  		</Container>
  	);
  };
  
  export default Auth;
  