import React, { useContext } from "react";
import { ThreeCircles } from "react-loader-spinner";
import { Navigate, useOutlet } from 'react-router-dom'
import { AuthContext } from "../helpers/AuthContext";
import '../App.css';

export default function UserConsole() {
    const outlet = useOutlet();
    const {authState} = useContext(AuthContext)
    
    /* 
    If we have reached this point, the user is logged in, therefore if there is no loggedIn,
    it's reflecting the default value and the authState hasn't properly been loaded yet.
    */


   if(authState.loggedIn){
       return (authState.roles.includes('USER') ? outlet : <Navigate to='/'/>)
   } else {
       return (
       <div className="loadingContainer">
            <ThreeCircles
                type="ThreeDots"
                color="#00b22d"
                height={100}
                width={100}
            //3 secs
            />
        </div>
        )
   }

}