pierrelf.com
this repo has no description
1import { Routes, Route, Navigate } from 'react-router-dom';
2import { ThemeProvider } from '@mui/material/styles';
3import CssBaseline from '@mui/material/CssBaseline';
4import CircularProgress from '@mui/material/CircularProgress';
5import Box from '@mui/material/Box';
6import theme from './theme';
7import { useAuth } from './hooks/useAuth';
8import { AppShell } from './components/layout/AppShell';
9import { LoginPage } from './pages/LoginPage';
10import { RegisterPage } from './pages/RegisterPage';
11import { HomePage } from './pages/HomePage';
12import { LessonPage } from './pages/LessonPage';
13import { ReviewPage } from './pages/ReviewPage';
14import type { ReactNode } from 'react';
15
16function ProtectedRoute({ children }: { children: ReactNode }) {
17 const { user, loading } = useAuth();
18
19 if (loading) {
20 return (
21 <Box
22 sx={{
23 display: 'flex',
24 justifyContent: 'center',
25 alignItems: 'center',
26 minHeight: '100vh',
27 }}
28 >
29 <CircularProgress color="primary" />
30 </Box>
31 );
32 }
33
34 if (!user) {
35 return <Navigate to="/login" replace />;
36 }
37
38 return <>{children}</>;
39}
40
41function RootRedirect() {
42 const { user, loading } = useAuth();
43
44 if (loading) {
45 return (
46 <Box
47 sx={{
48 display: 'flex',
49 justifyContent: 'center',
50 alignItems: 'center',
51 minHeight: '100vh',
52 }}
53 >
54 <CircularProgress color="primary" />
55 </Box>
56 );
57 }
58
59 return <Navigate to={user ? '/home' : '/login'} replace />;
60}
61
62function App() {
63 return (
64 <ThemeProvider theme={theme}>
65 <CssBaseline />
66 <Routes>
67 <Route path="/" element={<RootRedirect />} />
68 <Route path="/login" element={<LoginPage />} />
69 <Route path="/register" element={<RegisterPage />} />
70 <Route
71 element={
72 <ProtectedRoute>
73 <AppShell />
74 </ProtectedRoute>
75 }
76 >
77 <Route path="/home" element={<HomePage />} />
78 <Route
79 path="/lesson/:topicId/:lessonId"
80 element={<LessonPage />}
81 />
82 <Route path="/review" element={<ReviewPage />} />
83 </Route>
84 </Routes>
85 </ThemeProvider>
86 );
87}
88
89export default App;