1 | import { useContext, useState } from 'react';
|
---|
2 | import { Route, Switch, Redirect } from 'react-router-dom';
|
---|
3 | import { useHistory } from 'react-router-dom';
|
---|
4 |
|
---|
5 | import {
|
---|
6 | Container,
|
---|
7 | Header,
|
---|
8 | TitleAndLogoWrapper,
|
---|
9 | LogoWrapper,
|
---|
10 | Logo,
|
---|
11 | HeaderTitle,
|
---|
12 | UserNameAndLogoutWrapper,
|
---|
13 | UserName,
|
---|
14 | LogoutIcon,
|
---|
15 | HeaderAndMainSectionWrapper,
|
---|
16 | SideMenu,
|
---|
17 | DashboardIcon,
|
---|
18 | SupervisorAccountIcon,
|
---|
19 | MainSection,
|
---|
20 | DividerUnderHeader,
|
---|
21 | UserIcon,
|
---|
22 | MenuBurgerIcon,
|
---|
23 | } from './styles';
|
---|
24 |
|
---|
25 | import IconButton from '@mui/material/IconButton';
|
---|
26 |
|
---|
27 | import logo from '../../resources/logo_2_transparent_bg.png';
|
---|
28 | import { roles } from '../../config/enums';
|
---|
29 | import DestinationComponent from '../../utils/DestinationComponent';
|
---|
30 | import onClickRouting from '../../utils/onClickRouting';
|
---|
31 | import AbsoluteLoader from '../../components/Loaders/AbsoluteLoader';
|
---|
32 |
|
---|
33 | import ParkingZones from '../../components/admin/ParkingZones';
|
---|
34 | import EmployeesTable from '../../components/admin/EmployeesTable';
|
---|
35 | import EmployeeEdit from '../../components/admin/EmployeeEdit';
|
---|
36 | import EmployeeCreate from '../../components/admin/EmployeeCreate';
|
---|
37 | import ParkingZone from '../../components/admin/ParkingZone';
|
---|
38 |
|
---|
39 | import { UserContext } from '../../context/UserContext';
|
---|
40 | import { AccessoriesContext } from '../../context/AccessoriesContext';
|
---|
41 | import useLogoutUser from '../../hooks/useLogoutUser';
|
---|
42 |
|
---|
43 | const ToParkingZones = new DestinationComponent('/', ParkingZones, true);
|
---|
44 | const ToEmployeesTable = new DestinationComponent(
|
---|
45 | '/employees',
|
---|
46 | EmployeesTable,
|
---|
47 | true
|
---|
48 | );
|
---|
49 | const ToEmployeeCreate = new DestinationComponent(
|
---|
50 | '/employees/create',
|
---|
51 | EmployeeCreate,
|
---|
52 | true
|
---|
53 | );
|
---|
54 | const ToEmployeeEdit = new DestinationComponent(
|
---|
55 | '/employees/:employeeId',
|
---|
56 | EmployeeEdit,
|
---|
57 | true
|
---|
58 | );
|
---|
59 | const ToParkingZone = new DestinationComponent(
|
---|
60 | '/zone/:zone_id',
|
---|
61 | ParkingZone,
|
---|
62 | true
|
---|
63 | );
|
---|
64 |
|
---|
65 | const adminRoutes = [
|
---|
66 | ToParkingZones,
|
---|
67 | ToEmployeesTable,
|
---|
68 | ToEmployeeCreate,
|
---|
69 | ToEmployeeEdit,
|
---|
70 | ToParkingZone,
|
---|
71 | ];
|
---|
72 |
|
---|
73 | const employeeRoutes = [ToParkingZones, ToParkingZone];
|
---|
74 |
|
---|
75 | const AdminHomeScreen = (props) => {
|
---|
76 | const { user, isLoadingUser } = useContext(UserContext);
|
---|
77 | const { isMobile, setIsOpenDrawer } = useContext(AccessoriesContext);
|
---|
78 | let history = useHistory();
|
---|
79 | const { logoutUser } = useLogoutUser();
|
---|
80 | let routes = user.role === roles.admin ? adminRoutes : employeeRoutes;
|
---|
81 |
|
---|
82 | return (
|
---|
83 | <Container>
|
---|
84 | {isLoadingUser ? (
|
---|
85 | <AbsoluteLoader
|
---|
86 | containerStyle={{
|
---|
87 | width: isMobile ? '150px' : '300px',
|
---|
88 | height: isMobile ? '150px' : '300px',
|
---|
89 | margin: 'auto',
|
---|
90 | }}
|
---|
91 | />
|
---|
92 | ) : (
|
---|
93 | <>
|
---|
94 | {!isMobile ? (
|
---|
95 | <SideMenu>
|
---|
96 | <IconButton onClick={() => onClickRouting('/', history)}>
|
---|
97 | <DashboardIcon />
|
---|
98 | </IconButton>
|
---|
99 | {user.role === roles.admin ? (
|
---|
100 | <IconButton
|
---|
101 | onClick={() => onClickRouting('/employees', history)}
|
---|
102 | >
|
---|
103 | <SupervisorAccountIcon />
|
---|
104 | </IconButton>
|
---|
105 | ) : null}
|
---|
106 | </SideMenu>
|
---|
107 | ) : null}
|
---|
108 |
|
---|
109 | <HeaderAndMainSectionWrapper>
|
---|
110 | <Header>
|
---|
111 | {isMobile ? (
|
---|
112 | <IconButton
|
---|
113 | onClick={() => setIsOpenDrawer(true)}
|
---|
114 | style={{ padding: 0 }}
|
---|
115 | >
|
---|
116 | <MenuBurgerIcon />
|
---|
117 | </IconButton>
|
---|
118 | ) : null}
|
---|
119 | <TitleAndLogoWrapper>
|
---|
120 | <LogoWrapper>
|
---|
121 | <Logo src={logo} />
|
---|
122 | </LogoWrapper>
|
---|
123 | <HeaderTitle>Park Up</HeaderTitle>
|
---|
124 | </TitleAndLogoWrapper>
|
---|
125 |
|
---|
126 | {isMobile ? null : (
|
---|
127 | <UserNameAndLogoutWrapper>
|
---|
128 | <UserIcon />
|
---|
129 | <UserName>
|
---|
130 | {user.firstName} {user.lastName}
|
---|
131 | </UserName>
|
---|
132 | <IconButton onClick={logoutUser}>
|
---|
133 | <LogoutIcon />
|
---|
134 | </IconButton>
|
---|
135 | </UserNameAndLogoutWrapper>
|
---|
136 | )}
|
---|
137 | </Header>
|
---|
138 | <DividerUnderHeader />
|
---|
139 | <MainSection>
|
---|
140 | <Switch>
|
---|
141 | {routes?.map((route, index) => (
|
---|
142 | <Route
|
---|
143 | key={index}
|
---|
144 | path={route.path}
|
---|
145 | component={route.component}
|
---|
146 | exact={route.exact}
|
---|
147 | />
|
---|
148 | ))}
|
---|
149 | <Redirect to='/' />
|
---|
150 | </Switch>
|
---|
151 | </MainSection>
|
---|
152 | </HeaderAndMainSectionWrapper>
|
---|
153 | </>
|
---|
154 | )}
|
---|
155 | </Container>
|
---|
156 | );
|
---|
157 | };
|
---|
158 |
|
---|
159 | export default AdminHomeScreen;
|
---|