Public Access
103 lines
4.8 KiB
React
103 lines
4.8 KiB
React
import {Link, Route, Routes, useLocation, useNavigate} from 'react-router-dom';
|
|
import {useTranslation} from 'react-i18next';
|
|
import {useEffect, useState} from 'react';
|
|
|
|
import LandingPage from './pages/LandingPage';
|
|
import LoginPage from './pages/LoginPage';
|
|
import ImprintPage from './pages/ImprintPage';
|
|
import Dashboard from "./pages/Dashboard.jsx";
|
|
import RegistrationPage from './pages/RegistrationPage.jsx';
|
|
import SettingsPage from './pages/SettingsPage.jsx';
|
|
import AdminHintsPage from './pages/AdminHintsPage.jsx';
|
|
import AdminUsersPage from './pages/AdminUsersPage.jsx';
|
|
import GameLibrary from './pages/GameLibrary.jsx';
|
|
import GameDetail from './pages/GameDetail.jsx';
|
|
import WishlistPage from './pages/WishlistPage.jsx';
|
|
import PlayNextPage from './pages/PlayNextPage.jsx';
|
|
import StatsPage from './pages/StatsPage.jsx';
|
|
import ImportPage from './pages/ImportPage.jsx';
|
|
import PublicProfilePage from './pages/PublicProfilePage.jsx';
|
|
import AppHeader from './components/AppHeader.jsx';
|
|
import RequireSession from './components/RequireSession.jsx';
|
|
import {Toaster} from '@/components/ui/sonner';
|
|
import {TooltipProvider} from '@/components/ui/tooltip';
|
|
import PageBackground from './components/PageBackground.jsx';
|
|
import {usePreferences} from './context/PreferencesContext.jsx';
|
|
import {useCurrentUserActions} from './context/CurrentUserContext.jsx';
|
|
import {clearSession, hasSession} from './utils/auth.js';
|
|
import {logout} from './utils/api.js';
|
|
|
|
function App() {
|
|
const {t} = useTranslation();
|
|
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
|
const {appearance, syncPreferences, resetAppearance} = usePreferences();
|
|
const {setUser} = useCurrentUserActions();
|
|
|
|
// Hooks for routing
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
|
|
useEffect(() => {
|
|
// No local expiry check here: a 401 from the backend ends the session (useSessionExpired), and a browser
|
|
// clock that runs ahead would otherwise end it silently.
|
|
setIsAuthenticated(hasSession());
|
|
}, [location]);
|
|
|
|
// On login and on page load; the cached look shows until Auth answers.
|
|
useEffect(() => {
|
|
if (isAuthenticated) syncPreferences();
|
|
}, [isAuthenticated, syncPreferences]);
|
|
|
|
// Waits for Auth: a late logout answer would clear the cookies of a login that came after it.
|
|
const handleLogout = async () => {
|
|
await logout();
|
|
clearSession();
|
|
resetAppearance();
|
|
setUser(null);
|
|
setIsAuthenticated(false);
|
|
navigate('/login');
|
|
};
|
|
|
|
return (
|
|
<TooltipProvider>
|
|
{/* isolate: the background layer sits behind the content but in front of this div's own background. */}
|
|
<div className="isolate min-h-screen flex flex-col bg-background text-foreground font-sans">
|
|
{/* A public profile shows the owner's background instead. */}
|
|
{isAuthenticated && !location.pathname.startsWith('/u/') && <PageBackground appid={appearance.backgroundAppid}/>}
|
|
<AppHeader isAuthenticated={isAuthenticated} onLogout={handleLogout}/>
|
|
|
|
<main className="grow flex flex-col">
|
|
<Routes>
|
|
<Route path="/" element={<LandingPage/>}/>
|
|
<Route path="/login" element={<LoginPage/>}/>
|
|
<Route path="/register" element={<RegistrationPage/>}/>
|
|
<Route element={<RequireSession/>}>
|
|
<Route path="/dashboard" element={<Dashboard/>}/>
|
|
<Route path="/library" element={<GameLibrary/>}/>
|
|
<Route path="/library/:appid" element={<GameDetail/>}/>
|
|
<Route path="/wishlist" element={<WishlistPage/>}/>
|
|
<Route path="/play-next" element={<PlayNextPage/>}/>
|
|
<Route path="/stats" element={<StatsPage/>}/>
|
|
<Route path="/import" element={<ImportPage/>}/>
|
|
<Route path="/settings" element={<SettingsPage/>}/>
|
|
<Route path="/admin/users" element={<AdminUsersPage/>}/>
|
|
<Route path="/admin/hints" element={<AdminHintsPage/>}/>
|
|
</Route>
|
|
<Route path="/u/:name" element={<PublicProfilePage/>}/>
|
|
<Route path="/impressum" element={<ImprintPage/>}/>
|
|
</Routes>
|
|
</main>
|
|
|
|
<footer className="border-t py-6 text-center text-sm text-muted-foreground">
|
|
<Link to="/impressum" className="font-medium hover:text-foreground transition-colors">
|
|
{t('IMPRINT.TITLE')}
|
|
</Link>
|
|
</footer>
|
|
</div>
|
|
<Toaster richColors position="bottom-right"/>
|
|
</TooltipProvider>
|
|
);
|
|
}
|
|
|
|
export default App;
|