import React, { Fragment } 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 IconButton from '@material-ui/core/IconButton'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; import ListItemAvatar from '@material-ui/core/ListItemAvatar'; import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; import ListItemText from '@material-ui/core/ListItemText'; import LocationOnIcon from '@material-ui/icons/LocationOn'; import MoreVertIcon from '@material-ui/icons/MoreVert'; import { devicesActions } from './store'; import EditCollectionView from './EditCollectionView'; import { useEffectAsync } from './reactHelper'; const useStyles = makeStyles(() => ({ list: { maxHeight: '100%', overflow: 'auto', }, })); const DeviceView = ({ updateTimestamp, onMenuClick }) => { const classes = useStyles(); const dispatch = useDispatch(); const items = useSelector(state => Object.values(state.devices.items)); useEffectAsync(async () => { const response = await fetch('/api/devices'); if (response.ok) { dispatch(devicesActions.refresh(await response.json())); } }, [updateTimestamp]); return ( {items.map((item, index, list) => ( dispatch(devicesActions.select(item))}> onMenuClick(event.currentTarget, item.id)}> {index < list.length - 1 ? : null} ))} ); } const DevicesList = () => { return ( ); } export default DevicesList;