Fixed homepage issues

2 files changed, 55 insertions, 43 deletions

diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
index 294a9fff..79b62982 100644
--- a/modern/src/DevicesList.js
+++ b/modern/src/DevicesList.js
@@ -1,8 +1,7 @@
-import React, { Fragment } from 'react';
+import React, { useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { makeStyles } from '@material-ui/core/styles';
 import Avatar from '@material-ui/core/Avatar';
-import Divider from '@material-ui/core/Divider';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemAvatar from '@material-ui/core/ListItemAvatar';
@@ -19,11 +18,16 @@ import { devicesActions } from './store';
 import EditCollectionView from './EditCollectionView';
 import { useEffectAsync } from './reactHelper';
 import { formatPosition } from './common/formatter';
+import { getDevices, getItemPosition } from './common/selectors';
 
 const useStyles = makeStyles((theme) => ({
   list: {
     maxHeight: '100%',
   },
+  listInner: {
+    position: 'relative',
+    margin: theme.spacing(1.5, 0),
+  },
   icon: {
     width: '25px',
     height: '25px',
@@ -82,43 +86,40 @@ const DeviceRow = ({ data, index, style }) => {
 
   const { items } = data;
   const item = items[index];
-  const position = useSelector((state) => state.positions.items[item.id]);
+  const position = useSelector(getItemPosition(item.id));
   const showIgnition = position?.attributes.hasOwnProperty('ignition') && position.attributes.ignition;
 
   return (
     <div style={style}>
-      <Fragment key={index}>
-        <ListItem button key={item.id} className={classes.listItem} onClick={() => dispatch(devicesActions.select(item))}>
-          <ListItemAvatar>
-            <Avatar>
-              <img className={classes.icon} src={`images/icon/${item.category || 'default'}.svg`} alt="" />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText primary={item.name} secondary={item.status} classes={{ secondary: classes[getStatusColor(item.status)] }} />
-          <ListItemSecondaryAction className={classes.indicators}>
-            {position && (
-              <Grid container direction="row" alignItems="center" alignContent="center" spacing={2}>
-                {showIgnition && (
-                  <Grid item>
-                    <SvgIcon component={IgnitionIcon} />
-                  </Grid>
-                )}
-                {position.attributes.hasOwnProperty('batteryLevel') && (
-                  <Grid item container xs alignItems="center" alignContent="center">
-                    <Grid item>
-                      <span className={classes.batteryText}>{formatPosition(position.attributes.batteryLevel, 'batteryLevel')}</span>
-                    </Grid>
-                    <Grid item>
-                      <BatteryFullIcon className={classes[getBatteryStatus(position.attributes.batteryLevel)]} />
-                    </Grid>
-                  </Grid>
-                )}
+      <ListItem button key={item.id} className={classes.listItem} onClick={() => dispatch(devicesActions.select(item))}>
+        <ListItemAvatar>
+          <Avatar>
+            <img className={classes.icon} src={`images/icon/${item.category || 'default'}.svg`} alt="" />
+          </Avatar>
+        </ListItemAvatar>
+        <ListItemText primary={item.name} secondary={item.status} classes={{ secondary: classes[getStatusColor(item.status)] }} />
+        <ListItemSecondaryAction className={classes.indicators}>
+          {position && (
+          <Grid container direction="row" alignItems="center" alignContent="center" spacing={2}>
+            {showIgnition && (
+            <Grid item>
+              <SvgIcon component={IgnitionIcon} />
+            </Grid>
+            )}
+            {position.attributes.hasOwnProperty('batteryLevel') && (
+            <Grid item container xs alignItems="center" alignContent="center">
+              <Grid item>
+                <span className={classes.batteryText}>{formatPosition(position.attributes.batteryLevel, 'batteryLevel')}</span>
+              </Grid>
+              <Grid item>
+                <BatteryFullIcon className={classes[getBatteryStatus(position.attributes.batteryLevel)]} />
               </Grid>
+            </Grid>
             )}
-          </ListItemSecondaryAction>
-        </ListItem>
-        {index < items.length - 1 ? <Divider /> : null}
-      </Fragment>
+          </Grid>
+          )}
+        </ListItemSecondaryAction>
+      </ListItem>
     </div>
   );
 };
@@ -126,8 +127,13 @@ const DeviceRow = ({ data, index, style }) => {
 const DeviceView = ({ updateTimestamp, onMenuClick }) => {
   const classes = useStyles();
   const dispatch = useDispatch();
+  const listInnerEl = useRef(null);
 
-  const items = useSelector((state) => Object.values(state.devices.items));
+  const items = useSelector(getDevices);
+
+  if (listInnerEl.current) {
+    listInnerEl.current.className = classes.listInner;
+  }
 
   useEffectAsync(async () => {
     const response = await fetch('/api/devices');
@@ -146,6 +152,8 @@ const DeviceView = ({ updateTimestamp, onMenuClick }) => {
             itemCount={items.length}
             itemData={{ items, onMenuClick }}
             itemSize={72 + 1}
+            overscanCount={10}
+            innerRef={listInnerEl}
           >
             {DeviceRow}
           </FixedSizeList>
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index 417cdb03..e0707404 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -36,10 +36,10 @@ const useStyles = makeStyles((theme) => ({
     bottom: theme.spacing(8),
     zIndex: 1301,
     transition: 'transform .5s ease',
+    backgroundColor: 'white',
     [theme.breakpoints.down('md')]: {
       width: '100%',
       margin: 0,
-      backgroundColor: 'white',
     },
   },
   sidebarCollapsed: {
@@ -50,7 +50,7 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   paper: {
-    borderRadius: '0px',
+    zIndex: 1,
   },
   toolbar: {
     display: 'flex',
@@ -61,8 +61,6 @@ const useStyles = makeStyles((theme) => ({
   },
   deviceList: {
     flex: 1,
-    overflow: 'auto',
-    padding: theme.spacing(1.5, 0),
   },
   sidebarToggle: {
     position: 'absolute',
@@ -71,7 +69,13 @@ const useStyles = makeStyles((theme) => ({
     borderRadius: '0px',
     minWidth: 0,
     [theme.breakpoints.down('md')]: {
-      left: theme.spacing(0),
+      left: 0,
+    },
+  },
+  sidebarToggleText: {
+    marginLeft: theme.spacing(1),
+    [theme.breakpoints.only('xs')]: {
+      display: 'none',
     },
   },
   sidebarToggleBg: {
@@ -121,10 +125,10 @@ const MainPage = () => {
         disableElevation
       >
         <ListIcon />
-        {!isPhone ? t('deviceTitle') : ''}
+        <div className={classes.sidebarToggleText}>{t('deviceTitle')}</div>
       </Button>
-      <div className={`${classes.sidebar} ${collapsed && classes.sidebarCollapsed}`}>
-        <Paper className={classes.paper} elevation={isTablet ? 3 : 1}>
+      <Paper elevation={3} className={`${classes.sidebar} ${collapsed && classes.sidebarCollapsed}`}>
+        <Paper className={classes.paper} square elevation={3}>
           <Toolbar className={classes.toolbar} disableGutters>
             {isTablet && (
             <IconButton onClick={handleClose}>
@@ -154,7 +158,7 @@ const MainPage = () => {
         <div className={classes.deviceList}>
           <DevicesList />
         </div>
-      </div>
+      </Paper>
 
       <BottomNav showOnDesktop />
     </div>