118 lines
3.8 KiB
TypeScript
118 lines
3.8 KiB
TypeScript
import * as React from "react";
|
|
import "./App.css";
|
|
import {Faro} from "@grafana/faro-web-sdk";
|
|
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";
|
|
import Header from "./shared/Header";
|
|
import Footer from "./shared/Footer";
|
|
import CreateCharacter2E from "./second-edition/pages/CreateCharacter2E";
|
|
import store, {AppDispatch, RootState} from './store'
|
|
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";
|
|
|
|
function Router(props: {faro?: Faro}) {
|
|
const dispatch = useDispatch.withTypes<AppDispatch>()()
|
|
const fetchedUser = useSelector.withTypes<RootState>()(userSelector)
|
|
|
|
if (fetchedUser.state === "not-started") {
|
|
dispatch(load())
|
|
fetch(`${window.location.origin}/api/User/me`)
|
|
.then(response => {
|
|
if (response.ok) {
|
|
return response.text();
|
|
}
|
|
console.log(response)
|
|
})
|
|
.then(userNameResponse => {
|
|
if (userNameResponse && userNameResponse.length > 0) {
|
|
dispatch(setUser(userNameResponse))
|
|
} else {
|
|
dispatch(unsetUser())
|
|
}
|
|
|
|
})
|
|
.catch(() => {
|
|
dispatch(unsetUser())
|
|
})
|
|
}
|
|
|
|
|
|
|
|
const router = createBrowserRouter([
|
|
{
|
|
path: "/",
|
|
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,
|
|
},
|
|
]);
|
|
|
|
return (
|
|
<div className='container'>
|
|
<RouterProvider router={router}/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function App(props: { faro?: Faro }) {
|
|
|
|
return (
|
|
<Provider store={store}>
|
|
<Header/>
|
|
<Router faro={props.faro} />
|
|
<Footer />
|
|
</Provider>
|
|
);
|
|
}
|
|
|
|
export default App;
|