![]()
(session.username ?? null)
useEffect(() => {
- async function getUsername() {
- const response = await fetchAPIGet("user")
+ 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} = await response.json()
- setUsername(name)
+ const { name: username } = await response.json()
+ saveSession({ ...session, username })
+ setUsername(username)
}
- getUsername()
- }, [])
+
+ // if the user is authenticated and the username is not already present in the session,
+ if (session.auth && !session.username)
+ loadUsername()
+
+
+ }, [session])
return (
diff --git a/src/style/template/header.css b/src/style/template/header.css
index 78d1289..4c2d4aa 100644
--- a/src/style/template/header.css
+++ b/src/style/template/header.css
@@ -9,9 +9,6 @@
justify-content: space-between;
font-family: var(--font-title);
-
-
- height: 50px;
}
#img-account {
@@ -31,7 +28,7 @@
#username {
color: var(--main-contrast-color);
- margin-left: 10px;
+ margin: 0 0 0 10px;
}
#clickable-header-right:hover #username {
@@ -48,10 +45,6 @@
justify-content: space-evenly;
}
-#clickable-header-right:hover {
- border: orange 1px solid;
-}
-
.clickable {
cursor: pointer;
}