[bc20307] | 1 | import { useContext, useState } from 'react';
|
---|
[3a58bd6] | 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,
|
---|
[bc20307] | 22 | MenuBurgerIcon,
|
---|
[3a58bd6] | 23 | } from './styles';
|
---|
| 24 |
|
---|
| 25 | import IconButton from '@mui/material/IconButton';
|
---|
| 26 |
|
---|
[bc20307] | 27 | import logo from '../../resources/logo_2_transparent_bg.png';
|
---|
[3a58bd6] | 28 | import { roles } from '../../config/enums';
|
---|
| 29 | import DestinationComponent from '../../utils/DestinationComponent';
|
---|
| 30 | import onClickRouting from '../../utils/onClickRouting';
|
---|
[bc20307] | 31 | import AbsoluteLoader from '../../components/Loaders/AbsoluteLoader';
|
---|
[3a58bd6] | 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 |
|
---|
[bc20307] | 39 | import { UserContext } from '../../context/UserContext';
|
---|
| 40 | import { AccessoriesContext } from '../../context/AccessoriesContext';
|
---|
| 41 | import useLogoutUser from '../../hooks/useLogoutUser';
|
---|
| 42 |
|
---|
[3a58bd6] | 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) => {
|
---|
[bc20307] | 76 | const { user, isLoadingUser } = useContext(UserContext);
|
---|
| 77 | const { isMobile, setIsOpenDrawer } = useContext(AccessoriesContext);
|
---|
[3a58bd6] | 78 | let history = useHistory();
|
---|
[bc20307] | 79 | const { logoutUser } = useLogoutUser();
|
---|
[3a58bd6] | 80 | let routes = user.role === roles.admin ? adminRoutes : employeeRoutes;
|
---|
| 81 |
|
---|
| 82 | return (
|
---|
| 83 | <Container>
|
---|
[bc20307] | 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}
|
---|
[3a58bd6] | 108 |
|
---|
[bc20307] | 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>
|
---|
[3a58bd6] | 125 |
|
---|
[bc20307] | 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 | )}
|
---|
[3a58bd6] | 155 | </Container>
|
---|
| 156 | );
|
---|
| 157 | };
|
---|
| 158 |
|
---|
| 159 | export default AdminHomeScreen;
|
---|