1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
import './App.css';
import { RouterProvider, createBrowserRouter, Navigate } from 'react-router-dom';
import Login from './pages/Login';
import Surveys from './pages/Surveys';
import NewSurvey from './pages/NewSurvey';
import SurveyResults from './pages/SurveyResults';
import SurveyAssignees from './pages/SurveyAssignees';
import Users from './pages/Users';
import NavBar from './components/NavBar';
import useLoginState from './hooks/useLoginState';
import CssBaseline from '@mui/material/CssBaseline';
import CustomThemeProvider from './CustomThemeProvider';
function routes({ login, logout, isLoggedIn }) {
function withNavBar(component) {
const navbarLinks = [
{ label: 'Surveys', link: '/surveys' },
{ label: 'New Survey', link: '/surveys/new' },
{ label: 'Users', link: '/users' },
];
return (<>
<NavBar isLoggedIn={isLoggedIn} pages={navbarLinks} logout={logout} />
{component}
</>);
}
if (!isLoggedIn) {
return ([
{
path: '*',
element: <Login login={login}/>,
},
]);
} else {
return ([
{
path: '/',
element: <Navigate to={{ pathname: '/surveys' }} />,
},
{
path: '/surveys',
element: withNavBar(<Surveys />),
},
{
path: '/surveys/new',
element: withNavBar(<NewSurvey />),
},
{
path: '/surveys/:surveyId/results',
element: withNavBar(<SurveyResults />),
},
{
path: '/surveys/:surveyId/assignees',
element: withNavBar(<SurveyAssignees />),
},
{
path: '/users',
element: withNavBar(<Users />),
},
]);
}
}
export default function App() {
const { login, logout, isLoggedIn } = useLoginState();
const currentRoutes = routes({isLoggedIn, logout, login});
return (
<>
<CssBaseline />
<CustomThemeProvider>
<RouterProvider router={
createBrowserRouter(currentRoutes)
}/>
</CustomThemeProvider>
</>
);
}
|
