import React, { Component, Fragment } from 'react'; import { connect } from 'react-redux'; import { updateDevices } from './actions'; 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'; const mapStateToProps = state => ({ devices: state.devices }); class DeviceList extends Component { componentDidMount() { fetch('/api/devices').then(response => { if (response.ok) { response.json().then(devices => { this.props.dispatch(updateDevices(devices)); }); } }); } render() { const devices = this.props.devices.map(device => ); return ( {devices} ); } } export default connect(mapStateToProps)(DeviceList);