add redux and user slice

frontend/src/shared/Header.tsx

@@ -1,28 +1,29 @@
 import * as React from "react";
-import {useContext} from "react";
 import axios from "axios";
 import {Container, Nav, Navbar} from "react-bootstrap";
-import { UserContext } from "./contexts/UserContext";
+import {userSelector} from "./domain-models/userSlice";
+import {RootState} from "../store";
+import {useSelector} from "react-redux";
 
 async function logout() {
     await axios.post("/Identity/Account/Logout")
     document.location.reload()
 } 
 
-function Header(props: {}) {
+function Header() {
 
-    const fetchedUser = useContext(UserContext);
+    const fetchedUser = useSelector.withTypes<RootState>()(userSelector);
     
     return <header>
         <Navbar expand="sm" className="navbar-light bg-white border-bottom box-shadow mb-3">
             <Container className="ps-4 pe-4">
                 <Navbar.Brand href="/">Kemkas</Navbar.Brand>
-                {fetchedUser.data != null && <Nav.Link className="text-dark" href="/karaktereim">Karaktereim</Nav.Link>}
+                {fetchedUser.email != null && <Nav.Link className="text-dark" href="/karaktereim">Karaktereim</Nav.Link>}
                 <Navbar.Toggle aria-controls="basic-navbar-nav" />
                 <Navbar.Collapse id="basic-navbar-nav" className="d-sm-inline-flex flex-sm-row-reverse">
                     <Nav>
                         {fetchedUser.state !== "finished" ? "Loading..." :
-                            fetchedUser.data == null
+                            fetchedUser.email == null
                                 ? <>
                                     <li className="nav-item">
                                         <a className="nav-link text-dark" href="/Identity/Account/Register">Register</a>
@@ -34,7 +35,7 @@ function Header(props: {}) {
                                 : <>
                                     <li className="nav-item">
                                         <a className="nav-link text-dark"
-                                           href="/Identity/Account/Manage">Hello {fetchedUser.data}!</a>
+                                           href="/Identity/Account/Manage">Hello {fetchedUser.email}!</a>
                                     </li>
                                     <li className="nav-item">
                                         <button className="nav-link nav text-dark" onClick={logout}>Logout</button>

frontend/src/shared/domain-models/userSlice.ts

@@ -0,0 +1,31 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+type LoadingState = "not-started" | "loading" | "finished"
+
+export const userSlice = createSlice({
+    name: 'user',
+    initialState: {
+        state: "not-started" as LoadingState,
+        email: null,
+    },
+    reducers: {
+        load: (state) => {
+            state.state = "loading"
+        },
+        setUser: (state, action) => {
+            state.state = "finished"
+            state.email = action.payload
+        },
+        unsetUser: (state) => {
+            state.state = "finished"
+            state.email = null
+        }
+    },
+})
+
+// Action creators are generated for each case reducer function
+export const { load, setUser, unsetUser } = userSlice.actions
+
+export const userSelector = userSlice.selectSlice
+
+export default userSlice.reducer