KarlComSe / SvenskaElsparkcyklarAB

export default function Header() {

    const {isLoggedIn, token, user, role} = useSelector((state: RootState) =>  state.auth);

    const getAuthStatus = async () => {

        const response = await axios.get(`${API_URL}/auth/status`, getHeader(token));

        console.log(response);

    }

    const getAuthMe = async () => {

        const response = await axios.get(`${API_URL}/auth/me`, getHeader(token));

        console.log(response);

    }   

    return (

        <>

    <Navbar fluid rounded>

       <Navbar.Brand as={Link} to="/">

            <img src={logo} className="h-8" alt="Logo" />

            <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Hemåt</span>

        </Navbar.Brand>

        <Navbar.Toggle />

      <Navbar.Collapse>

        <Navbar.Link as={Link} to="/">

        Home

        </Navbar.Link>

        { role =="admin" && <Navbar.Link as={Link} to="/adminstartpage">Adminsida</Navbar.Link>}

        { isLoggedIn && 

            <>

                <Navbar.Link as={Link} to="/customerstartpage">Kundsida</Navbar.Link>

                <Logout className="px-1 py-0.5" size="xs"></Logout>

            </>

        }

        {

            !isLoggedIn &&

            <Login className="px-1 py-0.5" size="xs"/>

        }

        </Navbar.Collapse>

    </Navbar>

        <div className='flex justify-center items-center'>

            <div className="text-xs block max-w-sm p-6 h-40 overflow-scroll bg-white border border-gray-200 rounded-lg shadow">

                <p className="text-gray-700 dark:text-gray-400">Logged In: <b>{isLoggedIn.toString()}</b></p>

                <p className="text-gray-700 dark:text-gray-400">Role: <b>{role}</b></p>

                <p className="text-gray-700 dark:text-gray-400">User: <b>{user  ? JSON.stringify(user) : "No User"}</b></p>

                <Popover aria-labelledby="default-popover" content={<p>{token ? token : "Empty"} </p>}>

                    <Button color="warning" size="xs" onClick={() => console.log(token)}>Klicka här för token</Button>

                </Popover>

                <Button color="warning" size="xs" onClick={getAuthStatus}>Prompt auth/status in console</Button>

                <Button color="warning" size="xs" onClick={getAuthMe}>Prompt auth/me in console</Button>

            </div>

        </div>

        </>