react login

import { useEffect, useState } from "react"
import Admin from "../../pages/Admin"
import { Navigate } from "react-router-dom";
import { useNavigate } from "react-router-dom";

function AdminLogin() {

    const navigate = useNavigate()
    const [isAuthenticated, setIsAuthenticated] = useState(false);
    const [csrf, setCsrf] = useState('')
    const [username, setUsername] = useState('')
    const [password, setPassword] = useState('')
    const [counter, setCounter] = useState(0)


    function getCsrf(){
        fetch("http://localhost:8000/csrf/", {
                credentials: "include",
              })
              .then((res) => {
                let csrfToken = res.headers.get("X-CSRFToken");
                setCsrf({csrf: csrfToken});

              })
              .catch((err) => {
                console.log(err);
              })
    }

    const login = (event) => {
        event.preventDefault();

        fetch("http://localhost:8000/login/", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "X-CSRFToken": csrf.csrf,
          },
          credentials: "include",
          body: JSON.stringify({username: username, password: password}),
        })
        .then(isResponseOk)
        .then((data) => {
          console.log(data);
          setIsAuthenticated(true)
          localStorage.setItem("authenticated", true);
          setUsername('')
          setPassword('')

        //   this.setState({isAuthenticated: true, username: "", password: ""});
        })
        .catch((err) => {
            console.log('inside login catch')
            console.log(csrf.csrf, 'catch')
          console.log(err);
        });
      }

      const isResponseOk = (response) =>{
        if (response.status >= 200 && response.status <= 299) {
          return response.json();
        } else {
          console.log(response)
          throw Error(response.statusText);
        }
      }
      useEffect(() => {
        //getSessions
        fetch("http://localhost:8000/session/", {
            credentials: "include",
          })
          .then((res) => res.json())
          .then((data) => {
            // console.log(data);
            if (data.isAuthenticated) {
              setIsAuthenticated(true)

              console.log(data)
            } else {

              setIsAuthenticated(false)
              console.log(data)

              getCsrf()
            }})
          .catch((err) => {
            console.log(err);
          });


      }, [])

      console.log(csrf);
      console.log(counter)



    const handleUsername = (e) => {
        setUsername(e.target.value)
    }

    const handlePassword = (e) => {
        setPassword(e.target.value)
    }

    const loginScreen =   (
    <div className="login-box m-auto">
    <div className="card">
        <div className="card-body login-card-body">
        <p className="login-box-msg">Sign in to start your session</p>
        <form  method="post" onSubmit={login}>
            <div className="input-group mb-3">
            <input required type="text" value={username} onChange={handleUsername} className="form-control" placeholder="Username" />
            <div className="input-group-append">
                <div className="input-group-text">
                <span className="fas fa-envelope" />
                </div>
            </div>
            </div>
            <div className="input-group mb-3">
            <input required type="password" value={password} onChange={handlePassword} className="form-control" placeholder="Password" />
            <div className="input-group-append">
                <div className="input-group-text">
                <span className="fas fa-lock" />
                </div>
            </div>
            </div>
            <div className="row">

            <div className="col-4">
                <button type="submit" className="btn btn-primary btn-block">Sign In</button>
            </div>
            </div>
        </form>
    </div>
  </div>
  </div>)

    if(isAuthenticated)
    {
        return <Navigate replace to="/admin/dashboard" />;
    }
    else{

        return loginScreen
    }

}