import React, { Component, Fragment } from 'react'; import { connect } from 'react-redux'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; import ListItemAvatar from '@material-ui/core/ListItemAvatar'; import ListItemText from '@material-ui/core/ListItemText'; import Avatar from '@material-ui/core/Avatar'; import LocationOnIcon from '@material-ui/icons/LocationOn'; import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; import IconButton from '@material-ui/core/IconButton'; import MoreVertIcon from '@material-ui/icons/MoreVert'; import Divider from '@material-ui/core/Divider'; import { devicesActions } from 'src/store'; const mapStateToProps = state => ({ devices: Object.values(state.devices.items) }); class DeviceList extends Component { handleClick(device) { this.props.dispatch(devicesActions.select(device)); } render() { const devices = this.props.devices.map((device, index, list) => this.handleClick(device)}> {index < list.length - 1 ? : null} ); return ( {devices} ); } } export default connect(mapStateToProps)(DeviceList);