text: import React, { useState } from "react";
  import Base from "../core/Base";
  import { Link, Redirect } from "react-router-dom";
  
  import { signin, authenticate, isAuthenticated } from "../auth/helper";
  
  const Signin = () => {
  
    const [values, setValues] = useState({
      email: "s@shray.com",
      password: "12345",
      error: "",
      loading: false,
      didRedirect: false,
    });
  
    const { email, password, error, loading, didRedirect } = values;
  
    const { user } = isAuthenticated(); // chech what isAuthenticated returns (JSON)
  
    const handleChange = (name) => (event) => {
      setValues({ ...values, error: false, [name]: event.target.value });
    };
  
    const onSubmit = event => {
      event.preventDefault();
      setValues({...values, error: false, loading: false})
      signin({email, password})
      .then(data => {
        if(data.error){
          setValues({...values, error: data.error, loading: false})
        }
        else{
          authenticate(data, ()=>{
            setValues({
              ...values,
              didRedirect: true,
            })
          });
        }
      })
      .catch(console.log("SignIn Request Failed"));
    };
  
    const performRedirect = () => {
  
      if(didRedirect){
        if(user && user.role === 1){
          return <Redirect to="/admin/dashboard" />
        }
        else {
          return <Redirect to="/user/dashboard" />
        }
      };
      if(isAuthenticated()){
        return <Redirect to="/" />;
      }
    }
  
    const loadingMessage = () => {
      return (
        loading && (
          <div className="alert alert-info">
            <h2>Loading...</h2>
          </div>
        )
      )
    };
  
    const errorMessage = () => {
      return (
        <div className="row">
          <div className="col-md-6 offset-sm-3 text-left">
            <div
              className="alert alert-danger"
              style={{ display: error ? "" : "none" }}
            >
              {error}
            </div>
          </div>
        </div>
      );
    };
  
    const signInForm = () => {
      return (
        <div className="row">
          <div className="col-md-6 offset-sm-3 text-left">
            <form>
              <div className="form-group">
                <label className="text-light">Email</label>
                <input
                  onChange={handleChange("email")}
                  value={email}
                  className="form-control"
                  type="email"
                />
              </div>
              <div className="form-group">
                <label className="text-light">Password</label>
                <input
                  onChange={handleChange("password")}
                  value={password}
                  className="form-control"
                  type="password"
                />
              </div>
              <div class="d-grid gap-2 col-12 mx-auto">
                <button onClick={onSubmit} type="button" className="btn btn-success btn-block mt-3">
                  Submit
                </button>
              </div>
            </form>
          </div>
        </div>
      );
    };
  
    return (
      <Base title="Sign in page" description="a page for user sign in">
        {loadingMessage()}
        {errorMessage()}
        {signInForm()}
        {performRedirect()}
        <p className="text-white text-center">{JSON.stringify(values)}</p>
      </Base>
    );
  };
  
  export default Signin;
  