Files
sbd2-frontend/src/App.tsx

104 lines
2.8 KiB
TypeScript

import { Routes, Route, Navigate } from 'react-router'
import { ThemeProvider } from './components/ThemeProvider'
import { AuthProvider, useAuth } from './contexts/AuthContext'
import { SocketProvider } from './contexts/SocketContext'
import { LoginPage } from './pages/LoginPage'
import { RegisterPage } from './pages/RegisterPage'
import { AuthCallbackPage } from './pages/AuthCallbackPage'
import { DashboardPage } from './pages/DashboardPage'
import { SoundsPage } from './pages/SoundsPage'
import { PlaylistsPage } from './pages/PlaylistsPage'
import { ExtractionsPage } from './pages/ExtractionsPage'
import { UsersPage } from './pages/admin/UsersPage'
import { SettingsPage } from './pages/admin/SettingsPage'
import { Toaster } from './components/ui/sonner'
function ProtectedRoute({ children }: { children: React.ReactNode }) {
const { user, loading } = useAuth()
if (loading) {
return <div className="min-h-screen flex items-center justify-center">Loading...</div>
}
if (!user) {
return <Navigate to="/login" replace />
}
return <>{children}</>
}
function AdminRoute({ children }: { children: React.ReactNode }) {
const { user, loading } = useAuth()
if (loading) {
return <div className="min-h-screen flex items-center justify-center">Loading...</div>
}
if (!user) {
return <Navigate to="/login" replace />
}
if (user.role !== 'admin') {
return <Navigate to="/" replace />
}
return <>{children}</>
}
function AppRoutes() {
const { user } = useAuth()
return (
<Routes>
<Route path="/login" element={user ? <Navigate to="/" replace /> : <LoginPage />} />
<Route path="/register" element={user ? <Navigate to="/" replace /> : <RegisterPage />} />
<Route path="/auth/callback" element={<AuthCallbackPage />} />
<Route path="/" element={
<ProtectedRoute>
<DashboardPage />
</ProtectedRoute>
} />
<Route path="/sounds" element={
<ProtectedRoute>
<SoundsPage />
</ProtectedRoute>
} />
<Route path="/playlists" element={
<ProtectedRoute>
<PlaylistsPage />
</ProtectedRoute>
} />
<Route path="/extractions" element={
<ProtectedRoute>
<ExtractionsPage />
</ProtectedRoute>
} />
<Route path="/admin/users" element={
<AdminRoute>
<UsersPage />
</AdminRoute>
} />
<Route path="/admin/settings" element={
<AdminRoute>
<SettingsPage />
</AdminRoute>
} />
</Routes>
)
}
function App() {
return (
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
<AuthProvider>
<SocketProvider>
<AppRoutes />
<Toaster richColors />
</SocketProvider>
</AuthProvider>
</ThemeProvider>
)
}
export default App