local env fixes

.github/workflows/ci.yml

@@ -27,7 +27,7 @@ jobs:
     - name: Yarn Install
       run: |
         cd ./frontend
-        yarn install --frozen-lockfile
+        yarn install
     - 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, Outlet, redirect, RouterProvider} from "react-router-dom";
+import {createBrowserRouter, 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,28 +14,11 @@ 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)
 
-    React.useEffect(() => {
+    if (fetchedUser.state === "not-started") {
-        if (fetchedUser.state !== "not-started") {
-            return;
-        }
-
-        let isCancelled = false;
         dispatch(load())
         fetch(`${window.location.origin}/api/User/me`)
             .then(response => {
@@ -45,70 +28,57 @@ 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: "/",
-            element: <RootLayout />,
-            children: [
-                {
-                    index: true,
             loader: () => fetchedUser.email == null ? redirect("/2e/karakter") : redirect("/karaktereim")
         },
         {
-                    path: "karaktereim",
+            path: "/karaktereim",
             element: <CharacterList />,
             loader: () => fetch(`${window.location.origin}/api/Character`),
             ErrorBoundary: ErrorBoundary,
         },
         {
-                    path: "1e",
+            path: "/1e",
             loader: () => redirect("/1e/karakter")
         },
         {
-                    path: "1e/karakter",
+            path: "/1e/karakter",
             element: <CreateCharacter faro={props.faro} />,
             ErrorBoundary: ErrorBoundary,
         },
         {
-                    path: "1e/karakter/:id",
+            path: "/1e/karakter/:id",
             element: <CreateCharacter faro={props.faro}/>,
             loader: args => fetch(`${window.location.origin}/api/Character1E/${args.params.id}`),
             ErrorBoundary: ErrorBoundary,
         },
         {
-                    path: "2e",
+            path: "/2e",
             loader: () => redirect("/2e/karakter")
         },
         {
-                    path: "2e/karakter",
+            path: "/2e/karakter",
             element: <CreateCharacter2E faro={props.faro}/>,
             ErrorBoundary: ErrorBoundary,
         },
         {
-                    path: "2e/karakter/:id",
+            path: "/2e/karakter/:id",
             element: <CreateCharacter2E faro={props.faro}/>,
             loader: async args => {
                 const response = await fetch(`${window.location.origin}/api/Character2E/${args.params.id}`)
@@ -124,18 +94,22 @@ function Router(props: {faro?: Faro}) {
             },
             ErrorBoundary: ErrorBoundary,
         },
-            ],
+    ]);
-        },
-    ]), [dispatch, fetchedUser.email, props.faro]);
 
-    return <RouterProvider router={router}/>
+    return (
+        <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, {useCallback, useEffect, useMemo, useState} from 'react';
+import React, {useState} from 'react';
 import './CreateCharacter.less'
 import {Faj, TulajdonsagokFajjal} from "../domain-models/faj";
 import {Osztaly, SetFelszerelesForChangedOsztaly} from "../domain-models/osztaly"
@@ -56,43 +56,15 @@ function CreateCharacterPage(props: {
 
     let [karakter, changeKarakter] = useState(initialKarakterInputs)
 
-    const tulajdonsagokFajjal = useMemo(() => TulajdonsagokFajjal(karakter.tulajdonsagok, karakter.faj), [karakter.tulajdonsagok, karakter.faj])
+    const tulajdonsagokFajjal = TulajdonsagokFajjal(karakter.tulajdonsagok, karakter.faj)
 
-    const changeKepzettseg = useCallback((k: KepzettsegId[]) => {
+    const changeKepzettseg = (k: KepzettsegId[]) => changeKarakter({...karakter, kepzettsegek: k})
-        changeKarakter(prev => ({...prev, kepzettsegek: k}))
+    const changeTolvajKepzettseg = (tk?: KepzettsegId[]) => changeKarakter({...karakter, tolvajKepzettsegek: tk})
-    }, [])
+    SetDefaultTolvajKepzettsegek(karakter, changeTolvajKepzettseg)
-    const changeTolvajKepzettseg = useCallback((tk?: KepzettsegId[]) => {
+    SetDefaultKepzettsegek({...karakter, tulajdonsagok: tulajdonsagokFajjal}, changeKepzettseg)
-        changeKarakter(prev => ({...prev, tolvajKepzettsegek: tk}))
+    const availableKepzettsegList = AvailableKezpettsegList(karakter.osztaly)
-    }, [])
+    const setFelszereles = (f: KarakterFelszereles) => changeKarakter({...karakter, felszereles: f})
-    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,28 +1,24 @@
 import * as React from "react";
 import axios from "axios";
 import {Container, Nav, Navbar} from "react-bootstrap";
-import {unsetUser, userSelector} from "./domain-models/userSlice";
+import {userSelector} from "./domain-models/userSlice";
-import {AppDispatch, RootState} from "../store";
+import {RootState} from "../store";
-import {useDispatch, useSelector} from "react-redux";
+import {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 as={Link} to="/">Kemkas</Navbar.Brand>
+                <Navbar.Brand href="/">Kemkas</Navbar.Brand>
-                {fetchedUser.email != null && <Nav.Link as={Link} className="text-dark" to="/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>
@@ -42,7 +38,7 @@ function Header() {
                                            href="/Identity/Account/Manage">Hello {fetchedUser.email}!</a>
                                     </li>
                                     <li className="nav-item">
-                                        <button type="button" className="nav-link nav text-dark" onClick={logout}>Logout</button>
+                                        <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 {Link, useLoaderData} from "react-router-dom";
+import {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">
-                    <Link className="btn btn-dark btn-lg" to="/2e/karakter">Új 2e karakter létrehozása</Link>
+                    <a className="btn btn-dark btn-lg" href="/2e/karakter/" type="button">Új 2e karakter létrehozása</a>
                 </div>
             </div>
             <div className="col-6">
                 <div className="d-grid gap-1 m-3 m-lg-5">
-                    <Link className="btn btn-dark btn-lg" to="/1e/karakter">Új 1e karakter létrehozása</Link>
+                    <a className="btn btn-dark btn-lg" href="/1e/karakter/" type="button">Új 1e karakter létrehozása</a>
                 </div>
             </div>
         </div>