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
|
import React, { useEffect, useRef, useState } from 'react';
import { useDispatch } from 'react-redux';
import makeStyles from '@mui/styles/makeStyles';
import { FixedSizeList } from 'react-window';
import AutoSizer from 'react-virtualized-auto-sizer';
import { devicesActions } from '../store';
import { useEffectAsync } from '../reactHelper';
import DeviceRow from './DeviceRow';
const useStyles = makeStyles((theme) => ({
list: {
maxHeight: '100%',
},
listInner: {
position: 'relative',
margin: theme.spacing(1.5, 0),
},
}));
const DeviceList = ({ devices }) => {
const classes = useStyles();
const dispatch = useDispatch();
const listInnerEl = useRef(null);
if (listInnerEl.current) {
listInnerEl.current.className = classes.listInner;
}
const [, setTime] = useState(Date.now());
useEffect(() => {
const interval = setInterval(() => setTime(Date.now()), 60000);
return () => {
clearInterval(interval);
};
}, []);
useEffectAsync(async () => {
const response = await fetch('/api/devices');
if (response.ok) {
dispatch(devicesActions.refresh(await response.json()));
} else {
throw Error(await response.text());
}
}, []);
return (
<AutoSizer className={classes.list}>
{({ height, width }) => (
<FixedSizeList
width={width}
height={height}
itemCount={devices.length}
itemData={devices}
itemSize={72}
overscanCount={10}
innerRef={listInnerEl}
>
{DeviceRow}
</FixedSizeList>
)}
</AutoSizer>
);
};
export default DeviceList;
|
