refactor API calls and routers

2026-07-18 03:13:46 +00:00 · 2026-04-04 18:27:45 +02:00
parent 229edd42e9
commit c14864aa29
7 changed files with 141 additions and 109 deletions
@@ -1,9 +1,9 @@
 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, LoaderFunctionArgs, Navigate, Outlet, redirect, RouterProvider} from "react-router-dom";
 import CreateCharacter from "./first-edition/pages/CreateCharacter";
-import CharacterList from "./shared/pages/CharacterList";
+import CharacterList, {CharacterListItemDto} from "./shared/pages/CharacterList";
 import ErrorBoundary from "./shared/ErrorBoundary";
 import Header from "./shared/Header";
 import Footer from "./shared/Footer";
@@ -13,6 +13,11 @@ import { Provider } from "react-redux"
 import { useSelector, useDispatch } from 'react-redux'
 import {load, setUser, unsetUser, userSelector} from './shared/domain-models/userSlice'
 import {setCharacter} from "./second-edition/domain-models/characterSlice";
+import {getJson, getText} from "./shared/api/http";
+import {KarakterInputs} from "./first-edition/domain-models/karakter";
+import {Karakter2E} from "./second-edition/domain-models/karakter2E";
+
+const FaroContext = React.createContext<Faro | undefined>(undefined)

 function RootLayout() {
    return (
@@ -26,7 +31,27 @@ function RootLayout() {
    )
 }

-function Router(props: {faro?: Faro}) {
+function IndexRedirect() {
+    const fetchedUser = useSelector.withTypes<RootState>()(userSelector)
+
+    if (fetchedUser.state !== "finished") {
+        return null;
+    }
+
+    return <Navigate replace to={fetchedUser.email == null ? "/2e/karakter" : "/karaktereim"} />
+}
+
+function CreateCharacter1ERoute() {
+    const faro = React.useContext(FaroContext)
+    return <CreateCharacter faro={faro} />
+}
+
+function CreateCharacter2ERoute() {
+    const faro = React.useContext(FaroContext)
+    return <CreateCharacter2E faro={faro} />
+}
+
+function UserBootstrap() {
    const dispatch = useDispatch.withTypes<AppDispatch>()()
    const fetchedUser = useSelector.withTypes<RootState>()(userSelector)

@@ -37,13 +62,7 @@ function Router(props: {faro?: Faro}) {

        let isCancelled = false;
        dispatch(load())
-        fetch(`${window.location.origin}/api/User/me`)
-            .then(response => {
-                if (response.ok) {
-                    return response.text();
-                }
-                console.log(response)
-            })
+        getText("/api/User/me")
            .then(userNameResponse => {
                if (isCancelled) {
                    return;
@@ -68,74 +87,83 @@ function Router(props: {faro?: Faro}) {
        }
    }, [dispatch, fetchedUser.state])

-    const router = React.useMemo(() => createBrowserRouter([
-        {
-            path: "/",
-            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]);
-
-    return <RouterProvider router={router}/>
+    return null;
 }

+const loadCharacterList = () => getJson<CharacterListItemDto[]>("/api/Character")
+
+const loadCharacter1E = ({params}: LoaderFunctionArgs) => getJson<KarakterInputs & { isPublic: boolean }>(`/api/Character1E/${params.id}`)
+
+const loadCharacter2E = async ({params}: LoaderFunctionArgs) => {
+    try {
+        const loaded2Echaracter = await getJson<Karakter2E & { isPublic: boolean }>(`/api/Character2E/${params.id}`)
+        store.dispatch(setCharacter(loaded2Echaracter))
+        return loaded2Echaracter;
+    } catch (error) {
+        return {
+            isPublic: false,
+            error: error instanceof Error ? error.message : "Failed to load character",
+        };
+    }
+}
+
+const router = createBrowserRouter([
+    {
+        path: "/",
+        element: <RootLayout />,
+        children: [
+            {
+                index: true,
+                element: <IndexRedirect />,
+            },
+            {
+                path: "karaktereim",
+                element: <CharacterList />,
+                loader: loadCharacterList,
+                ErrorBoundary: ErrorBoundary,
+            },
+            {
+                path: "1e",
+                loader: () => redirect("/1e/karakter")
+            },
+            {
+                path: "1e/karakter",
+                element: <CreateCharacter1ERoute />,
+                ErrorBoundary: ErrorBoundary,
+            },
+            {
+                path: "1e/karakter/:id",
+                element: <CreateCharacter1ERoute />,
+                loader: loadCharacter1E,
+                ErrorBoundary: ErrorBoundary,
+            },
+            {
+                path: "2e",
+                loader: () => redirect("/2e/karakter")
+            },
+            {
+                path: "2e/karakter",
+                element: <CreateCharacter2ERoute />,
+                ErrorBoundary: ErrorBoundary,
+            },
+            {
+                path: "2e/karakter/:id",
+                element: <CreateCharacter2ERoute />,
+                loader: loadCharacter2E,
+                ErrorBoundary: ErrorBoundary,
+            },
+        ],
+    },
+]);
+
 function App(props: { faro?: Faro }) {

    return (
        <Provider store={store}>
-            <Router faro={props.faro} />
+            <FaroContext.Provider value={props.faro}>
+                <UserBootstrap />
+                <RouterProvider router={router}/>
+            </FaroContext.Provider>
        </Provider>
    );
 }