From d9bd2a941c4a11c660e52db504587ba735a29add Mon Sep 17 00:00:00 2001
From: Desmond Kyeremeh <elDekyfin@gmail.com>
Date: Fri, 23 Jul 2021 13:52:48 +0000
Subject: Fixed homepage issues

---
 modern/src/DevicesList.js | 76 ++++++++++++++++++++++++++---------------------
 1 file changed, 42 insertions(+), 34 deletions(-)

(limited to 'modern/src/DevicesList.js')

diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
index 294a9ff..79b6298 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>
-- 
cgit v1.2.3