List items and disabled device

6 files changed, 27 insertions, 25 deletions

diff --git a/modern/src/common/components/SideNav.js b/modern/src/common/components/SideNav.js
index 648059d1..97968bd1 100644
--- a/modern/src/common/components/SideNav.js
+++ b/modern/src/common/components/SideNav.js
@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import {
-  List, ListItem, ListItemText, ListItemIcon, Divider, ListSubheader,
+  List, ListItemText, ListItemIcon, Divider, ListSubheader, ListItemButton,
 } from '@mui/material';
 import { Link, useLocation } from 'react-router-dom';
 
@@ -15,17 +15,16 @@ const SideNav = ({ routes }) => {
           <ListSubheader>{route.subheader}</ListSubheader>
         </Fragment>
       ) : (
-        <ListItem
+        <ListItemButton
           disableRipple
           component={Link}
           key={route.href}
-          button
           to={route.href}
           selected={location.pathname.match(route.match || route.href) !== null}
         >
           <ListItemIcon>{route.icon}</ListItemIcon>
           <ListItemText primary={route.name} />
-        </ListItem>
+        </ListItemButton>
       )))}
     </List>
   );
diff --git a/modern/src/main/DevicesList.js b/modern/src/main/DevicesList.js
index baf18dd8..e1db7853 100644
--- a/modern/src/main/DevicesList.js
+++ b/modern/src/main/DevicesList.js
@@ -1,12 +1,9 @@
 import React, { useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import makeStyles from '@mui/styles/makeStyles';
-import { IconButton, Tooltip } from '@mui/material';
-import Avatar from '@mui/material/Avatar';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemAvatar from '@mui/material/ListItemAvatar';
-import ListItemText from '@mui/material/ListItemText';
+import {
+  IconButton, Tooltip, Avatar, List, ListItemAvatar, ListItemText, ListItemButton,
+} from '@mui/material';
 import { FixedSizeList } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import BatteryFullIcon from '@mui/icons-material/BatteryFull';
@@ -26,6 +23,7 @@ import {
 } from '../common/util/formatter';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import { mapIcons } from '../map/core/preloadImages';
+import { useAdministrator } from '../common/util/permissions';
 
 const useStyles = makeStyles((theme) => ({
   list: {
@@ -70,6 +68,8 @@ const DeviceRow = ({ data, index, style }) => {
   const dispatch = useDispatch();
   const t = useTranslation();
 
+  const admin = useAdministrator();
+
   const { items } = data;
   const item = items[index];
   const position = useSelector((state) => state.positions.items[item.id]);
@@ -83,7 +83,12 @@ const DeviceRow = ({ data, index, style }) => {
 
   return (
     <div style={style}>
-      <ListItem button key={item.id} className={classes.listItem} onClick={() => dispatch(devicesActions.select(item.id))}>
+      <ListItemButton
+        key={item.id}
+        className={classes.listItem}
+        onClick={() => dispatch(devicesActions.select(item.id))}
+        disabled={!admin && item.disabled}
+      >
         <ListItemAvatar>
           <Avatar>
             <img className={classes.icon} src={mapIcons[item.category || 'default']} alt="" />
@@ -137,7 +142,7 @@ const DeviceRow = ({ data, index, style }) => {
             )}
           </>
         )}
-      </ListItem>
+      </ListItemButton>
     </div>
   );
 };
diff --git a/modern/src/other/GeofencesList.js b/modern/src/other/GeofencesList.js
index 7521de80..88db0654 100644
--- a/modern/src/other/GeofencesList.js
+++ b/modern/src/other/GeofencesList.js
@@ -1,10 +1,9 @@
 import React, { Fragment } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import makeStyles from '@mui/styles/makeStyles';
-import Divider from '@mui/material/Divider';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemText from '@mui/material/ListItemText';
+import {
+  Divider, List, ListItemButton, ListItemText,
+} from '@mui/material';
 
 import { devicesActions, geofencesActions } from '../store';
 import CollectionActions from '../settings/components/CollectionActions';
@@ -41,10 +40,10 @@ const GeofencesList = () => {
     <List className={classes.list}>
       {Object.values(items).map((item, index, list) => (
         <Fragment key={item.id}>
-          <ListItem button key={item.id} onClick={() => dispatch(devicesActions.select(item.id))}>
+          <ListItemButton button key={item.id} onClick={() => dispatch(devicesActions.select(item.id))}>
             <ListItemText primary={item.name} />
             <CollectionActions itemId={item.id} editPath="/settings/geofence" endpoint="geofences" setTimestamp={refreshGeofences} />
-          </ListItem>
+          </ListItemButton>
           {index < list.length - 1 ? <Divider /> : null}
         </Fragment>
       ))}
diff --git a/modern/src/reports/components/ReportsMenu.js b/modern/src/reports/components/ReportsMenu.js
index 09e287bf..dc0da4b9 100644
--- a/modern/src/reports/components/ReportsMenu.js
+++ b/modern/src/reports/components/ReportsMenu.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  Divider, List, ListItem, ListItemIcon, ListItemText,
+  Divider, List, ListItemButton, ListItemIcon, ListItemText,
 } from '@mui/material';
 import TimelineIcon from '@mui/icons-material/Timeline';
 import PauseCircleFilledIcon from '@mui/icons-material/PauseCircleFilled';
@@ -17,10 +17,10 @@ import { useAdministrator } from '../../common/util/permissions';
 const MenuItem = ({
   title, link, icon, selected,
 }) => (
-  <ListItem button key={link} component={Link} to={link} selected={selected}>
+  <ListItemButton button key={link} component={Link} to={link} selected={selected}>
     <ListItemIcon>{icon}</ListItemIcon>
     <ListItemText primary={title} />
-  </ListItem>
+  </ListItemButton>
 );
 
 const ReportsMenu = () => {
diff --git a/modern/src/settings/components/EditItemView.js b/modern/src/settings/components/EditItemView.js
index a5ac31b1..a646f629 100644
--- a/modern/src/settings/components/EditItemView.js
+++ b/modern/src/settings/components/EditItemView.js
@@ -37,7 +37,6 @@ const EditItemView = ({
   const { id } = useParams();
 
   useEffectAsync(async () => {
-    console.log(item);
     if (!item) {
       if (id) {
         const response = await fetch(`/api/${endpoint}/${id}`);
diff --git a/modern/src/settings/components/SettingsMenu.js b/modern/src/settings/components/SettingsMenu.js
index ef5b07d7..a37d5d1a 100644
--- a/modern/src/settings/components/SettingsMenu.js
+++ b/modern/src/settings/components/SettingsMenu.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  Divider, List, ListItem, ListItemIcon, ListItemText,
+  Divider, List, ListItemButton, ListItemIcon, ListItemText,
 } from '@mui/material';
 import SettingsIcon from '@mui/icons-material/Settings';
 import CreateIcon from '@mui/icons-material/Create';
@@ -21,10 +21,10 @@ import useFeatures from '../../common/util/useFeatures';
 const MenuItem = ({
   title, link, icon, selected,
 }) => (
-  <ListItem button key={link} component={Link} to={link} selected={selected}>
+  <ListItemButton key={link} component={Link} to={link} selected={selected}>
     <ListItemIcon>{icon}</ListItemIcon>
     <ListItemText primary={title} />
-  </ListItem>
+  </ListItemButton>
 );
 
 const SettingsMenu = () => {