optimize react state handling

.github/workflows/ci.yml

@@ -27,7 +27,7 @@ jobs:
     - name: Yarn Install
       run: |
         cd ./frontend
-        yarn install
+        yarn install --frozen-lockfile
     - name: Yarn Test
       run: |
         cd ./frontend

frontend/src/App.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import "./App.css";
 import {Faro} from "@grafana/faro-web-sdk";
-import {createBrowserRouter, redirect, RouterProvider} from "react-router-dom";
+import {createBrowserRouter, Outlet, redirect, RouterProvider} from "react-router-dom";
 import CreateCharacter from "./first-edition/pages/CreateCharacter";
 import CharacterList from "./shared/pages/CharacterList";
 import ErrorBoundary from "./shared/ErrorBoundary";
@@ -14,11 +14,28 @@ import { useSelector, useDispatch } from 'react-redux'
 import {load, setUser, unsetUser, userSelector} from './shared/domain-models/userSlice'
 import {setCharacter} from "./second-edition/domain-models/characterSlice";
 
+function RootLayout() {
+    return (
+        <>
+            <Header />
+            <div className='container'>
+                <Outlet />
+            </div>
+            <Footer />
+        </>
+    )
+}
+
 function Router(props: {faro?: Faro}) {
     const dispatch = useDispatch.withTypes<AppDispatch>()()
     const fetchedUser = useSelector.withTypes<RootState>()(userSelector)
 
-    if (fetchedUser.state === "not-started") {
+    React.useEffect(() => {
+        if (fetchedUser.state !== "not-started") {
+            return;
+        }
+
+        let isCancelled = false;
         dispatch(load())
         fetch(`${window.location.origin}/api/User/me`)
             .then(response => {
@@ -28,88 +45,97 @@ function Router(props: {faro?: Faro}) {
                 console.log(response)
             })
             .then(userNameResponse => {
+                if (isCancelled) {
+                    return;
+                }
+
                 if (userNameResponse && userNameResponse.length  > 0) {
                     dispatch(setUser(userNameResponse))
                 } else {
                     dispatch(unsetUser())
                 }
-
             })
             .catch(() => {
+                if (isCancelled) {
+                    return;
+                }
+
                 dispatch(unsetUser())
             })
-    }
 
+        return () => {
+            isCancelled = true;
+        }
+    }, [dispatch, fetchedUser.state])
 
-
+    const router = React.useMemo(() => createBrowserRouter([
-    const router = createBrowserRouter([
         {
             path: "/",
-            loader: () => fetchedUser.email == null ? redirect("/2e/karakter") : redirect("/karaktereim")
+            element: <RootLayout />,
+            children: [
+                {
+                    index: true,
+                    loader: () => fetchedUser.email == null ? redirect("/2e/karakter") : redirect("/karaktereim")
+                },
+                {
+                    path: "karaktereim",
+                    element: <CharacterList />,
+                    loader: () => fetch(`${window.location.origin}/api/Character`),
+                    ErrorBoundary: ErrorBoundary,
+                },
+                {
+                    path: "1e",
+                    loader: () => redirect("/1e/karakter")
+                },
+                {
+                    path: "1e/karakter",
+                    element: <CreateCharacter faro={props.faro} />,
+                    ErrorBoundary: ErrorBoundary,
+                },
+                {
+                    path: "1e/karakter/:id",
+                    element: <CreateCharacter faro={props.faro}/>,
+                    loader: args => fetch(`${window.location.origin}/api/Character1E/${args.params.id}`),
+                    ErrorBoundary: ErrorBoundary,
+                },
+                {
+                    path: "2e",
+                    loader: () => redirect("/2e/karakter")
+                },
+                {
+                    path: "2e/karakter",
+                    element: <CreateCharacter2E faro={props.faro}/>,
+                    ErrorBoundary: ErrorBoundary,
+                },
+                {
+                    path: "2e/karakter/:id",
+                    element: <CreateCharacter2E faro={props.faro}/>,
+                    loader: async args => {
+                        const response = await fetch(`${window.location.origin}/api/Character2E/${args.params.id}`)
+                        if (response.ok) {
+                            const loaded2Echaracter = await response.json()
+                            dispatch(setCharacter(loaded2Echaracter))
+                            return loaded2Echaracter;
+                        }
+                        return {
+                            isPublic: false,
+                            error: response.statusText,
+                        };
+                    },
+                    ErrorBoundary: ErrorBoundary,
+                },
+            ],
         },
-        {
+    ]), [dispatch, fetchedUser.email, props.faro]);
-            path: "/karaktereim",
-            element: <CharacterList />,
-            loader: () => fetch(`${window.location.origin}/api/Character`),
-            ErrorBoundary: ErrorBoundary,
-        },
-        {
-            path: "/1e",
-            loader: () => redirect("/1e/karakter")
-        },
-        {
-            path: "/1e/karakter",
-            element: <CreateCharacter faro={props.faro} />,
-            ErrorBoundary: ErrorBoundary,
-        },
-        {
-            path: "/1e/karakter/:id",
-            element: <CreateCharacter faro={props.faro}/>,
-            loader: args => fetch(`${window.location.origin}/api/Character1E/${args.params.id}`),
-            ErrorBoundary: ErrorBoundary,
-        },
-        {
-            path: "/2e",
-            loader: () => redirect("/2e/karakter")
-        },
-        {
-            path: "/2e/karakter",
-            element: <CreateCharacter2E faro={props.faro}/>,
-            ErrorBoundary: ErrorBoundary,
-        },
-        {
-            path: "/2e/karakter/:id",
-            element: <CreateCharacter2E faro={props.faro}/>,
-            loader: async args => {
-                const response = await fetch(`${window.location.origin}/api/Character2E/${args.params.id}`)
-                if (response.ok) {
-                    const loaded2Echaracter = await response.json()
-                    dispatch(setCharacter(loaded2Echaracter))
-                    return loaded2Echaracter;
-                }
-                return {
-                    isPublic: false,
-                    error: response.statusText,
-                };
-            },
-            ErrorBoundary: ErrorBoundary,
-        },
-    ]);
 
-    return (
+    return <RouterProvider router={router}/>
-        <div className='container'>
-            <RouterProvider router={router}/>
-        </div>
-    )
 }
 
 function App(props: { faro?: Faro }) {
 
     return (
         <Provider store={store}>
-            <Header/>
             <Router faro={props.faro} />
-            <Footer />
         </Provider>
     );
 }

frontend/src/first-edition/pages/CreateCharacter.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import './CreateCharacter.less'
 import {Faj, TulajdonsagokFajjal} from "../domain-models/faj";
 import {Osztaly, SetFelszerelesForChangedOsztaly} from "../domain-models/osztaly"
@@ -56,15 +56,43 @@ function CreateCharacterPage(props: {
 
     let [karakter, changeKarakter] = useState(initialKarakterInputs)
 
-    const tulajdonsagokFajjal = TulajdonsagokFajjal(karakter.tulajdonsagok, karakter.faj)
+    const tulajdonsagokFajjal = useMemo(() => TulajdonsagokFajjal(karakter.tulajdonsagok, karakter.faj), [karakter.tulajdonsagok, karakter.faj])
 
-    const changeKepzettseg = (k: KepzettsegId[]) => changeKarakter({...karakter, kepzettsegek: k})
+    const changeKepzettseg = useCallback((k: KepzettsegId[]) => {
-    const changeTolvajKepzettseg = (tk?: KepzettsegId[]) => changeKarakter({...karakter, tolvajKepzettsegek: tk})
+        changeKarakter(prev => ({...prev, kepzettsegek: k}))
-    SetDefaultTolvajKepzettsegek(karakter, changeTolvajKepzettseg)
+    }, [])
-    SetDefaultKepzettsegek({...karakter, tulajdonsagok: tulajdonsagokFajjal}, changeKepzettseg)
+    const changeTolvajKepzettseg = useCallback((tk?: KepzettsegId[]) => {
-    const availableKepzettsegList = AvailableKezpettsegList(karakter.osztaly)
+        changeKarakter(prev => ({...prev, tolvajKepzettsegek: tk}))
-    const setFelszereles = (f: KarakterFelszereles) => changeKarakter({...karakter, felszereles: f})
+    }, [])
-    SetFelszerelesForChangedOsztaly(karakter.osztaly, karakter.felszereles, setFelszereles)
+    const availableKepzettsegList = useMemo(() => AvailableKezpettsegList(karakter.osztaly), [karakter.osztaly])
+    const setFelszereles = useCallback((f: KarakterFelszereles) => {
+        changeKarakter(prev => ({...prev, felszereles: f}))
+    }, [])
+
+    const tolvajDefaultsInput = useMemo(() => ({
+        osztaly: karakter.osztaly,
+        tolvajKepzettsegek: karakter.tolvajKepzettsegek,
+    }), [karakter.osztaly, karakter.tolvajKepzettsegek])
+
+    const kepzettsegDefaultsInput = useMemo(() => ({
+        osztaly: karakter.osztaly,
+        faj: karakter.faj,
+        tulajdonsagok: tulajdonsagokFajjal,
+        kepzettsegek: karakter.kepzettsegek,
+        tolvajKepzettsegek: karakter.tolvajKepzettsegek,
+    }), [karakter.osztaly, karakter.faj, tulajdonsagokFajjal, karakter.kepzettsegek, karakter.tolvajKepzettsegek])
+
+    useEffect(() => {
+        SetDefaultTolvajKepzettsegek(tolvajDefaultsInput, changeTolvajKepzettseg)
+    }, [tolvajDefaultsInput, changeTolvajKepzettseg])
+
+    useEffect(() => {
+        SetDefaultKepzettsegek(kepzettsegDefaultsInput, changeKepzettseg)
+    }, [kepzettsegDefaultsInput, changeKepzettseg])
+
+    useEffect(() => {
+        SetFelszerelesForChangedOsztaly(karakter.osztaly, karakter.felszereles, setFelszereles)
+    }, [karakter.osztaly, karakter.felszereles, setFelszereles])
 
     const levelUp = () => LevelUp(karakter, changeKarakter)
     const levelDown = () => LevelDown(karakter, changeKarakter)

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 {unsetUser, userSelector} from "./domain-models/userSlice";
-import {RootState} from "../store";
+import {AppDispatch, RootState} from "../store";
-import {useSelector} from "react-redux";
+import {useDispatch, useSelector} from "react-redux";
-
+import {Link, useNavigate} from "react-router-dom";
-async function logout() {
-    await axios.post("/Identity/Account/Logout")
-    document.location.reload()
-} 
 
 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>
+                <Navbar.Brand as={Link} to="/">Kemkas</Navbar.Brand>
-                {fetchedUser.email != null && <Nav.Link className="text-dark" href="/karaktereim">Karaktereim</Nav.Link>}
+                {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>