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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate, useLocation } from 'react-router-dom';
import {
Paper, BottomNavigation, BottomNavigationAction, Menu, MenuItem, Typography, Badge,
} from '@mui/material';
import DescriptionIcon from '@mui/icons-material/Description';
import SettingsIcon from '@mui/icons-material/Settings';
import MapIcon from '@mui/icons-material/Map';
import PersonIcon from '@mui/icons-material/Person';
import ExitToAppIcon from '@mui/icons-material/ExitToApp';
import { sessionActions } from '../../store';
import { useTranslation } from './LocalizationProvider';
import { useRestriction } from '../util/permissions';
const BottomMenu = () => {
const navigate = useNavigate();
const location = useLocation();
const dispatch = useDispatch();
const t = useTranslation();
const readonly = useRestriction('readonly');
const disableReports = useRestriction('disableReports');
const userId = useSelector((state) => state.session.user.id);
const socket = useSelector((state) => state.session.socket);
const [anchorEl, setAnchorEl] = useState(null);
const currentSelection = () => {
if (location.pathname === `/settings/user/${userId}`) {
return 'account';
} if (location.pathname.startsWith('/settings')) {
return 'settings';
} if (location.pathname.startsWith('/reports')) {
return 'reports';
} if (location.pathname === '/') {
return 'map';
}
return null;
};
const handleAccount = () => {
setAnchorEl(null);
navigate(`/settings/user/${userId}`);
};
const handleLogout = async () => {
setAnchorEl(null);
await fetch('/api/session', { method: 'DELETE' });
navigate('/login');
dispatch(sessionActions.updateUser(null));
};
const handleSelection = (event, value) => {
switch (value) {
case 'map':
navigate('/');
break;
case 'reports':
navigate('/reports/route');
break;
case 'settings':
navigate('/settings/preferences');
break;
case 'account':
setAnchorEl(event.currentTarget);
break;
case 'logout':
handleLogout();
break;
default:
break;
}
};
return (
<Paper square elevation={3}>
<BottomNavigation value={currentSelection()} onChange={handleSelection} showLabels>
<BottomNavigationAction
label={t('mapTitle')}
icon={(
<Badge color="error" variant="dot" overlap="circular" invisible={socket !== false}>
<MapIcon />
</Badge>
)}
value="map"
/>
{!disableReports && (
<BottomNavigationAction label={t('reportTitle')} icon={<DescriptionIcon />} value="reports" />
)}
<BottomNavigationAction label={t('settingsTitle')} icon={<SettingsIcon />} value="settings" />
{readonly ? (
<BottomNavigationAction label={t('loginLogout')} icon={<ExitToAppIcon />} value="logout" />
) : (
<BottomNavigationAction label={t('settingsUser')} icon={<PersonIcon />} value="account" />
)}
</BottomNavigation>
<Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={() => setAnchorEl(null)}>
<MenuItem onClick={handleAccount}>
<Typography color="textPrimary">{t('settingsUser')}</Typography>
</MenuItem>
<MenuItem onClick={handleLogout}>
<Typography color="error">{t('loginLogout')}</Typography>
</MenuItem>
</Menu>
</Paper>
);
};
export default BottomMenu;
|
