text: import React, { useRef, useState } from "react"
  import { Link } from "react-router-dom";
  import API from "../utils/API";
  import { AUTH_SET_LOGGED_IN } from "../utils/actions";
  import { useStoreContext } from '../utils/GlobalStore';
  import "./Login.css";
  
  function Login() {
      const [showError, setShowError] = useState(false);
      const [errorMessage, setErrorMessage] = useState("");
  
      const emailRef = useRef();
      const passwordRef = useRef();
      const [, dispatch] = useStoreContext();
  
      const handleLogin = (event) => {
          event.preventDefault();
          const loginData = {
              email: emailRef.current.value,
              password: passwordRef.current.value
          };
          API.login(loginData).then(response => {
              setShowError(false);
              const { email } = response.data;
              dispatch({
                  type: AUTH_SET_LOGGED_IN,
                  data: {
                      email
                  }
              });
          }).catch(err => {
              setShowError(true);
              setErrorMessage("An error occurred during login");
          })
      }
  
      return <div>
          <div id="loginContainer">
              <div className="row">
                  <div id="loginForm" className="col-md-6 col-md-offset-3">
                      <h2 id="signupP">Login</h2>
                      <form className="signup" onSubmit={handleLogin}>
                          <div className="form-group">
                              <label htmlFor="exampleInputEmail1">Email Address</label>
                              <input type="email" className="form-control" placeholder="Email" ref={emailRef} />
                          </div>
                          <div className="form-group">
                              <label htmlFor="exampleInputPassword1">Password</label>
                              <input type="password" className="form-control" placeholder="Password" ref={passwordRef} />
                          </div>
                          <div style={{ "display": showError ? "block" : "none" }} id="alert" className="alert alert-danger" role="alert">
                              <span className="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                              <span className="sr-only">Error:</span> <span className="msg">{errorMessage}</span>
                          </div>
                          <button id="loginButton" type="submit" className="btn btn-default">Login</button>
                          <br></br><br></br>
                      </form>
                   
                      <p>or Sign up  <Link to="/signup" id="signupP">here</Link></p>
                  </div>
              </div>
          </div>
      </div>
  }
  
  export default Login;