source: sources/client/src/components/Sidedrawer/index.js@ bc20307

Last change on this file since bc20307 was bc20307, checked in by Tasevski2 <39170279+Tasevski2@…>, 2 years ago

Push before video
  • Property mode set to 100644
File size: 8.7 KB
Line 
1import { useContext } from 'react';
2import { useHistory } from 'react-router';
3import {
4 DrawerContainer,
5 CloseIcon,
6 DividerUnderListItem,
7 DividerUnderList,
8 DashboardIcon,
9 SupervisorAccountIcon,
10 LogoutIcon,
11 UserIcon,
12 MapIcon,
13 CarIcon,
14 TimerIcon,
15 ProfileIcon,
16 LoginIcon,
17 RegistrationIcon,
18} from './styles';
19
20import SwipeableDrawer from '@mui/material/SwipeableDrawer';
21import List from '@mui/material/List';
22import ListItem from '@mui/material/ListItem';
23import ListItemIcon from '@mui/material/ListItemIcon';
24import ListItemText from '@mui/material/ListItemText';
25import { IconButton } from '@mui/material';
26
27import onClickRouting from '../../utils/onClickRouting';
28import { roles } from '../../config/enums';
29import { UserContext } from '../../context/UserContext';
30import useLogoutUser from '../../hooks/useLogoutUser';
31
32const AdminAndEmployeeContent = ({ user, setIsOpen, history, logoutUser }) => {
33 return (
34 <>
35 <List>
36 <ListItem
37 onClick={() => {
38 setIsOpen(false);
39 onClickRouting('/', history);
40 }}
41 >
42 <ListItemIcon>
43 <DashboardIcon style={{ margin: 0 }} />
44 </ListItemIcon>
45 <ListItemText primary='Зони' />
46 </ListItem>
47 <DividerUnderListItem />
48 {user.role === roles.admin ? (
49 <>
50 <ListItem
51 onClick={() => {
52 setIsOpen(false);
53 onClickRouting('/employees', history);
54 }}
55 >
56 <ListItemIcon>
57 <SupervisorAccountIcon style={{ margin: 0 }} />
58 </ListItemIcon>
59 <ListItemText primary='Вработени' />
60 </ListItem>
61 <DividerUnderListItem />
62 </>
63 ) : null}
64 </List>
65 <List>
66 <DividerUnderList />
67 <ListItem>
68 <ListItemIcon>
69 <UserIcon style={{ margin: 0 }} />
70 </ListItemIcon>
71 <ListItemText
72 primary={`${user.firstName} ${user.lastName}`}
73 />
74 </ListItem>
75 <DividerUnderListItem />
76 <ListItem
77 onClick={() => {
78 setIsOpen(false);
79 logoutUser();
80 }}
81 >
82 <ListItemIcon>
83 <LogoutIcon style={{ margin: 0 }} />
84 </ListItemIcon>
85 <ListItemText primary='Одјави Се' id='err-color' />
86 </ListItem>
87 </List>
88 </>
89 );
90};
91
92const NotAuthContent = ({ setIsOpen, history }) => {
93 return (
94 <>
95 <List>
96 <ListItem
97 onClick={() => {
98 setIsOpen(false);
99 onClickRouting('/', history);
100 }}
101 >
102 <ListItemIcon>
103 <MapIcon style={{ margin: 0 }} />
104 </ListItemIcon>
105 <ListItemText primary='Мапа' />
106 </ListItem>
107 <DividerUnderListItem />
108 </List>
109 <List>
110 <DividerUnderList />
111 <ListItem
112 onClick={() => {
113 setIsOpen(false);
114 onClickRouting('/login', history);
115 }}
116 >
117 <ListItemIcon>
118 <LoginIcon style={{ margin: 0 }} />
119 </ListItemIcon>
120 <ListItemText primary='Најави Се' />
121 </ListItem>
122 <DividerUnderListItem />
123 <ListItem
124 onClick={() => {
125 setIsOpen(false);
126 onClickRouting('/register', history);
127 }}
128 >
129 <ListItemIcon>
130 <RegistrationIcon style={{ margin: 0 }} />
131 </ListItemIcon>
132 <ListItemText primary='Регистрирај Се' />
133 </ListItem>
134 </List>
135 </>
136 );
137};
138
139const UserAndGuestContent = ({ user, logoutUser, setIsOpen, history }) => {
140 const isGuest = user.role === roles.guest;
141 const mapUrl = isGuest ? '/' : '/maps';
142 return (
143 <>
144 <List>
145 {isGuest ? null : (
146 <>
147 <ListItem
148 onClick={() => {
149 setIsOpen(false);
150 onClickRouting('/', history);
151 }}
152 >
153 <ListItemIcon>
154 <CarIcon style={{ margin: 0 }} />
155 </ListItemIcon>
156 <ListItemText primary='Почетна' />
157 </ListItem>
158 <DividerUnderListItem />
159 </>
160 )}
161 <ListItem
162 onClick={() => {
163 setIsOpen(false);
164 onClickRouting(mapUrl, history);
165 }}
166 >
167 <ListItemIcon>
168 <MapIcon style={{ margin: 0 }} />
169 </ListItemIcon>
170 <ListItemText primary='Мапа' />
171 </ListItem>
172 <DividerUnderListItem />
173 <ListItem
174 onClick={() => {
175 setIsOpen(false);
176 onClickRouting('/session', history);
177 }}
178 >
179 <ListItemIcon>
180 <TimerIcon style={{ margin: 0 }} />
181 </ListItemIcon>
182 <ListItemText primary='Сесија' />
183 </ListItem>
184 <DividerUnderListItem />
185 </List>
186 <List>
187 <DividerUnderList />
188 <ListItem
189 onClick={() => {
190 if (isGuest) return;
191 setIsOpen(false);
192 onClickRouting('/my-profile', history);
193 }}
194 >
195 <ListItemIcon>
196 <UserIcon style={{ margin: 0 }} />
197 </ListItemIcon>
198 <ListItemText
199 primary={
200 isGuest
201 ? 'Гостин'
202 : `${user.firstName} ${user.lastName}`
203 }
204 />
205 </ListItem>
206 <DividerUnderListItem />
207 <ListItem
208 onClick={() => {
209 setIsOpen(false);
210 logoutUser();
211 }}
212 >
213 <ListItemIcon>
214 <LogoutIcon style={{ margin: 0 }} />
215 </ListItemIcon>
216 <ListItemText primary='Одјави Се' id='err-color' />
217 </ListItem>
218 </List>
219 </>
220 );
221};
222
223const Sidedrawer = ({ isOpen, setIsOpen, isMobile }) => {
224 const { user } = useContext(UserContext);
225 const { logoutUser } = useLogoutUser();
226 const history = useHistory();
227
228 let content;
229
230 if (user) {
231 const props = {
232 user,
233 logoutUser,
234 setIsOpen,
235 history,
236 };
237 if (user.role === roles.admin || user.role === roles.employee) {
238 content = <AdminAndEmployeeContent {...props} />;
239 } else {
240 content = <UserAndGuestContent {...props} />;
241 }
242 } else {
243 content = <NotAuthContent setIsOpen={setIsOpen} history={history} />;
244 }
245
246 return !isMobile ? null : (
247 <SwipeableDrawer
248 open={isOpen}
249 onClose={() => setIsOpen(false)}
250 onOpen={() => setIsOpen(true)}
251 >
252 <DrawerContainer>
253 <IconButton
254 onClick={() => setIsOpen(false)}
255 style={{ marginLeft: '190px' }}
256 >
257 <CloseIcon />
258 </IconButton>
259 {content}
260 </DrawerContainer>
261 </SwipeableDrawer>
262 );
263};
264
265export default Sidedrawer;
Note: See TracBrowser for help on using the repository browser.