ah-admin
07d58ecb58
- Store setzt 'me' erst nach dem Laden der Bootstrap-Daten (Start, Login, Registrierung) - vorher rendereten Seiten gegen leere Daten und brachen ab; Seite lief erst nach manuellem Reload (Race zwischen setMe und ladeAlles) - FehlerGrenze (ErrorBoundary) in App.tsx: Render-Fehler zeigen Hinweis + Reload-Button statt schwarzem Bildschirm
93 lines
3.1 KiB
TypeScript
93 lines
3.1 KiB
TypeScript
import { Routes, Route, Navigate } from 'react-router'
|
||
import { Component, type ReactNode } from 'react'
|
||
import { StoreProvider, useStore } from './store/store'
|
||
import AppLayout from './components/AppLayout'
|
||
import Login from './pages/Login'
|
||
import Dashboard from './pages/Dashboard'
|
||
import Payments from './pages/Payments'
|
||
import Tickets from './pages/Tickets'
|
||
import Documents from './pages/Documents'
|
||
import Messages from './pages/Messages'
|
||
import BenutzerVerwaltung from './pages/BenutzerVerwaltung'
|
||
|
||
/** Fängt Render-Fehler ab – statt schwarzem Bildschirm: Hinweis + Reload. */
|
||
class FehlerGrenze extends Component<{ children: ReactNode }, { fehler: boolean }> {
|
||
state = { fehler: false }
|
||
static getDerivedStateFromError() {
|
||
return { fehler: true }
|
||
}
|
||
render() {
|
||
if (this.state.fehler) {
|
||
return (
|
||
<div className="flex min-h-screen items-center justify-center bg-[#22333b] p-6">
|
||
<div className="max-w-md rounded-2xl bg-white p-8 text-center shadow-2xl dark:bg-slate-900">
|
||
<h1 className="text-xl font-bold">Da ist etwas schiefgelaufen</h1>
|
||
<p className="mt-2 text-sm text-slate-500">
|
||
Die Seite konnte nicht korrekt dargestellt werden. Ein Neuladen hilft in der Regel weiter.
|
||
</p>
|
||
<button
|
||
onClick={() => window.location.reload()}
|
||
className="mt-5 rounded-xl bg-amber-500 px-6 py-2.5 font-semibold text-slate-900 hover:bg-amber-400"
|
||
>
|
||
Seite neu laden
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
return this.props.children
|
||
}
|
||
}
|
||
|
||
function Ladebildschirm() {
|
||
return (
|
||
<div className="flex min-h-screen items-center justify-center bg-[#22333b]">
|
||
<div className="text-center text-slate-300">
|
||
<div className="text-lg font-semibold text-white">Hinterstein Immobilien</div>
|
||
<div className="mt-1 text-sm">Mieterportal wird geladen …</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function RequireAuth({ children }: { children: React.ReactElement }) {
|
||
const { me, bereit } = useStore()
|
||
if (!bereit) return <Ladebildschirm />
|
||
if (!me) return <Navigate to="/login" replace />
|
||
return children
|
||
}
|
||
|
||
function LoginGate() {
|
||
const { me, bereit } = useStore()
|
||
if (!bereit) return <Ladebildschirm />
|
||
if (me) return <Navigate to="/" replace />
|
||
return <Login />
|
||
}
|
||
|
||
export default function App() {
|
||
return (
|
||
<FehlerGrenze>
|
||
<StoreProvider>
|
||
<Routes>
|
||
<Route path="/login" element={<LoginGate />} />
|
||
<Route
|
||
element={
|
||
<RequireAuth>
|
||
<AppLayout />
|
||
</RequireAuth>
|
||
}
|
||
>
|
||
<Route path="/" element={<Dashboard />} />
|
||
<Route path="/mietkonto" element={<Payments />} />
|
||
<Route path="/schadensmeldungen" element={<Tickets />} />
|
||
<Route path="/dokumente" element={<Documents />} />
|
||
<Route path="/nachrichten" element={<Messages />} />
|
||
<Route path="/benutzer" element={<BenutzerVerwaltung />} />
|
||
</Route>
|
||
<Route path="*" element={<Navigate to="/" replace />} />
|
||
</Routes>
|
||
</StoreProvider>
|
||
</FehlerGrenze>
|
||
)
|
||
}
|