108 lines
3.3 KiB
TypeScript
108 lines
3.3 KiB
TypeScript
import React from 'react';
|
|
import { createBrowserRouter, Outlet, useParams } from 'react-router-dom';
|
|
import Header from './components/Header';
|
|
import BottomNav from './components/BottomNav';
|
|
import { EventStatsProvider } from './context/EventStatsContext';
|
|
import { GuestIdentityProvider } from './context/GuestIdentityContext';
|
|
import LandingPage from './pages/LandingPage';
|
|
import ProfileSetupPage from './pages/ProfileSetupPage';
|
|
import HomePage from './pages/HomePage';
|
|
import TaskPickerPage from './pages/TaskPickerPage';
|
|
import TaskDetailPage from './pages/TaskDetailPage';
|
|
import UploadPage from './pages/UploadPage';
|
|
import UploadQueuePage from './pages/UploadQueuePage';
|
|
import GalleryPage from './pages/GalleryPage';
|
|
import PhotoLightbox from './pages/PhotoLightbox';
|
|
import AchievementsPage from './pages/AchievementsPage';
|
|
import SlideshowPage from './pages/SlideshowPage';
|
|
import SettingsPage from './pages/SettingsPage';
|
|
import LegalPage from './pages/LegalPage';
|
|
import NotFoundPage from './pages/NotFoundPage';
|
|
|
|
function HomeLayout() {
|
|
const { slug } = useParams();
|
|
|
|
if (!slug) {
|
|
return (
|
|
<div className="pb-16">
|
|
<Header title="Event" />
|
|
<div className="px-4 py-3">
|
|
<Outlet />
|
|
</div>
|
|
<BottomNav />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<GuestIdentityProvider slug={slug}>
|
|
<EventStatsProvider slug={slug}>
|
|
<div className="pb-16">
|
|
<Header slug={slug} />
|
|
<div className="px-4 py-3">
|
|
<Outlet />
|
|
</div>
|
|
<BottomNav />
|
|
</div>
|
|
</EventStatsProvider>
|
|
</GuestIdentityProvider>
|
|
);
|
|
}
|
|
|
|
export const router = createBrowserRouter([
|
|
{ path: '/', element: <SimpleLayout title="Fotospiel"><LandingPage /></SimpleLayout> },
|
|
{
|
|
path: '/setup/:slug',
|
|
element: <SetupLayout />,
|
|
children: [
|
|
{ index: true, element: <ProfileSetupPage /> },
|
|
],
|
|
},
|
|
{
|
|
path: '/e/:slug',
|
|
element: <HomeLayout />,
|
|
children: [
|
|
{ index: true, element: <HomePage /> },
|
|
{ path: 'tasks', element: <TaskPickerPage /> },
|
|
{ path: 'tasks/:taskId', element: <TaskDetailPage /> },
|
|
{ path: 'upload', element: <UploadPage /> },
|
|
{ path: 'queue', element: <UploadQueuePage /> },
|
|
{ path: 'gallery', element: <GalleryPage /> },
|
|
{ path: 'photo/:photoId', element: <PhotoLightbox /> },
|
|
{ path: 'achievements', element: <AchievementsPage /> },
|
|
{ path: 'slideshow', element: <SlideshowPage /> },
|
|
],
|
|
},
|
|
{ path: '/settings', element: <SimpleLayout title="Einstellungen"><SettingsPage /></SimpleLayout> },
|
|
{ path: '/legal/:page', element: <SimpleLayout title="Rechtliches"><LegalPage /></SimpleLayout> },
|
|
{ path: '*', element: <NotFoundPage /> },
|
|
]);
|
|
|
|
function SetupLayout() {
|
|
const { slug } = useParams<{ slug: string }>();
|
|
if (!slug) return null;
|
|
return (
|
|
<GuestIdentityProvider slug={slug}>
|
|
<EventStatsProvider slug={slug}>
|
|
<div className="pb-0">
|
|
<Header slug={slug} />
|
|
<Outlet />
|
|
</div>
|
|
</EventStatsProvider>
|
|
</GuestIdentityProvider>
|
|
);
|
|
}
|
|
|
|
function SimpleLayout({ title, children }: { title: string; children: React.ReactNode }) {
|
|
return (
|
|
<div className="pb-16">
|
|
<Header title={title} />
|
|
<div className="px-4 py-3">
|
|
{children}
|
|
</div>
|
|
<BottomNav />
|
|
</div>
|
|
);
|
|
}
|
|
|