optimize react state handling

frontend/src/shared/Header.tsx

@@ -1,24 +1,28 @@
 import * as React from "react";
 import axios from "axios";
 import {Container, Nav, Navbar} from "react-bootstrap";
-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()
-} 
+import {unsetUser, userSelector} from "./domain-models/userSlice";
+import {AppDispatch, RootState} from "../store";
+import {useDispatch, useSelector} from "react-redux";
+import {Link, useNavigate} from "react-router-dom";
 
 function Header() {
 
+    const dispatch = useDispatch.withTypes<AppDispatch>()();
+    const navigate = useNavigate();
     const fetchedUser = useSelector.withTypes<RootState>()(userSelector);
+
+    const logout = async () => {
+        await axios.post("/Identity/Account/Logout")
+        dispatch(unsetUser())
+        navigate("/")
+    }
     
     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.email != null && <Nav.Link className="text-dark" href="/karaktereim">Karaktereim</Nav.Link>}
+                <Navbar.Brand as={Link} to="/">Kemkas</Navbar.Brand>
+                {fetchedUser.email != null && <Nav.Link as={Link} className="text-dark" to="/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>
@@ -38,7 +42,7 @@ function Header() {
                                            href="/Identity/Account/Manage">Hello {fetchedUser.email}!</a>
                                     </li>
                                     <li className="nav-item">
-                                        <button className="nav-link nav text-dark" onClick={logout}>Logout</button>
+                                        <button type="button" className="nav-link nav text-dark" onClick={logout}>Logout</button>
                                     </li>
                                 </>
                         }

frontend/src/shared/pages/CharacterList.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import {useLoaderData} from "react-router-dom";
+import {Link, useLoaderData} from "react-router-dom";
 import CharacterListItem from "../components/CharacterListItem";
 import {Faj, FajLabel as FajLabel1E} from "../../first-edition/domain-models/faj";
 import {Faj2E, FajLabel as FajLabel2E} from "../../second-edition/domain-models/faj2E";
@@ -68,12 +68,12 @@ function CharacterList(props: {}) {
         <div className="row">
             <div className="col-6">
                 <div className="d-grid gap-1 m-3 m-lg-5">
-                    <a className="btn btn-dark btn-lg" href="/2e/karakter/" type="button">Új 2e karakter létrehozása</a>
+                    <Link className="btn btn-dark btn-lg" to="/2e/karakter">Új 2e karakter létrehozása</Link>
                 </div>
             </div>
             <div className="col-6">
                 <div className="d-grid gap-1 m-3 m-lg-5">
-                    <a className="btn btn-dark btn-lg" href="/1e/karakter/" type="button">Új 1e karakter létrehozása</a>
+                    <Link className="btn btn-dark btn-lg" to="/1e/karakter">Új 1e karakter létrehozása</Link>
                 </div>
             </div>
         </div>