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
81
82
|
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 Container from "@mui/material/Container";
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} />
<Container>{component}</Container>
</>
);
}
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>
</>
);
}
|
