You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
2.2 KiB
68 lines
2.2 KiB
import AccountSvg from "../../assets/account.svg?react"
|
|
import "../../style/template/header.css"
|
|
import { useEffect, useState } from "react"
|
|
import { fetchAPIGet, redirect } from "../../Fetcher.ts"
|
|
import { getSession, saveSession } from "../../api/session.ts"
|
|
|
|
export function Header() {
|
|
const session = getSession()
|
|
const [username, setUsername] = useState<string | null>(
|
|
session.username ?? null,
|
|
)
|
|
|
|
useEffect(() => {
|
|
async function loadUsername() {
|
|
const response = await fetchAPIGet("user", false)
|
|
|
|
if (response.status == 401) {
|
|
//if unauthorized
|
|
return
|
|
}
|
|
|
|
console.log(session)
|
|
|
|
//TODO check if the response is ok and handle errors
|
|
const { name: username } = await response.json()
|
|
saveSession({ ...session, username })
|
|
setUsername(username)
|
|
}
|
|
|
|
// if the user is authenticated and the username is not already present in the session,
|
|
if (session.auth && !session.username) loadUsername()
|
|
}, [session])
|
|
|
|
return (
|
|
<div id="header">
|
|
<div id="header-left"></div>
|
|
<div id="header-center">
|
|
<p
|
|
id="iqball"
|
|
className="clickable"
|
|
onClick={() => redirect("/")}>
|
|
IQBall
|
|
</p>
|
|
</div>
|
|
<div id="header-right">
|
|
<div
|
|
className="clickable"
|
|
id="clickable-header-right"
|
|
onClick={() => {
|
|
if (username) {
|
|
redirect("/settings")
|
|
return
|
|
}
|
|
saveSession({
|
|
...session,
|
|
urlTarget: location.pathname,
|
|
})
|
|
redirect("/login")
|
|
}}>
|
|
{/* <AccountSvg id="img-account" /> */}
|
|
<AccountSvg id="img-account" />
|
|
<p id="username">{username ?? "Log In"}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|