better isPublic handling

Kemkas.Web/frontend/src/shared/Header.tsx

@@ -1,9 +1,8 @@
 import * as React from "react";
-import {useState} from "react";
+import {useContext} from "react";
 import axios from "axios";
 import {Container, Nav, Navbar} from "react-bootstrap";
-
-type LoadingState = "not-started" | "loading" | "finished"
+import { UserContext } from "./contexts/UserContext";
 
 async function logout() {
     await axios.post("/Identity/Account/Logout")
@@ -11,21 +10,8 @@ async function logout() {
 } 
 
 function Header(props: {}) {
-    
-    let [loading, setLoading] = useState("not-started" as LoadingState);
-    let [userName, setUserName] = useState(null as string | null);
 
-    if (loading === "not-started") {
-        setLoading("loading");
-        fetch('api/User/me')
-            .then(response => {
-                response.ok
-                    ? response.text()
-                        .then(userName => userName?.length > 0 ? setUserName(userName) : setUserName(null))
-                    : console.log(response)
-            })
-            .finally(() => setLoading("finished"))
-    }
+    const fetchedUser = useContext(UserContext);
     
     return <header>
         <Navbar expand="sm" className="navbar-light bg-white border-bottom box-shadow mb-3">
@@ -35,8 +21,8 @@ function Header(props: {}) {
                 <Navbar.Toggle aria-controls="basic-navbar-nav" />
                 <Navbar.Collapse id="basic-navbar-nav" className="d-sm-inline-flex flex-sm-row-reverse">
                     <Nav>
-                        {loading !== "finished" ? "Loading..." :
-                            userName == null
+                        {fetchedUser.state !== "finished" ? "Loading..." :
+                            fetchedUser.data == null
                                 ? <>
                                     <li className="nav-item">
                                         <a className="nav-link text-dark" href="/Identity/Account/Register">Register</a>
@@ -48,7 +34,7 @@ function Header(props: {}) {
                                 : <>
                                     <li className="nav-item">
                                         <a className="nav-link text-dark"
-                                           href="/Identity/Account/Manage">Hello {userName}!</a>
+                                           href="/Identity/Account/Manage">Hello {fetchedUser.data}!</a>
                                     </li>
                                     <li className="nav-item">
                                         <button className="nav-link nav text-dark" onClick={logout}>Logout</button>