optimize react state handling

2026-04-04 18:04:08 +02:00
parent 7c682373a5
commit e8914d4bcb
5 changed files with 144 additions and 86 deletions
@@ -27,7 +27,7 @@ jobs:
    - name: Yarn Install
      run: |
        cd ./frontend
-        yarn install
+        yarn install --frozen-lockfile
    - name: Yarn Test
      run: |
        cd ./frontend
@@ -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 = createBrowserRouter([
+    const router = React.useMemo(() => 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,
+                },
+            ],
        },
-        {
-            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]);

-    return (
-        <div className='container'>
-            <RouterProvider router={router}/>
-        </div>
-    )
+    return <RouterProvider router={router}/>
 }

 function App(props: { faro?: Faro }) {

    return (
        <Provider store={store}>
-            <Header/>
            <Router faro={props.faro} />
-            <Footer />
        </Provider>
    );
 }
@@ -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 changeTolvajKepzettseg = (tk?: KepzettsegId[]) => changeKarakter({...karakter, tolvajKepzettsegek: tk})
-    SetDefaultTolvajKepzettsegek(karakter, changeTolvajKepzettseg)
-    SetDefaultKepzettsegek({...karakter, tulajdonsagok: tulajdonsagokFajjal}, changeKepzettseg)
-    const availableKepzettsegList = AvailableKezpettsegList(karakter.osztaly)
-    const setFelszereles = (f: KarakterFelszereles) => changeKarakter({...karakter, felszereles: f})
-    SetFelszerelesForChangedOsztaly(karakter.osztaly, karakter.felszereles, setFelszereles)
+    const changeKepzettseg = useCallback((k: KepzettsegId[]) => {
+        changeKarakter(prev => ({...prev, kepzettsegek: k}))
+    }, [])
+    const changeTolvajKepzettseg = useCallback((tk?: KepzettsegId[]) => {
+        changeKarakter(prev => ({...prev, tolvajKepzettsegek: tk}))
+    }, [])
+    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)
@@ -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>
                                </>
                        }
@@ -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>