text: import React, { Component } from 'React';
  import Chart from '../components/chart';
  import GoogleMap from '../components/google-map';
  // import actions from '../actions/index';
  import { connect } from 'react-redux';
  
  class WeatherList extends Component {
  	renderWeather(cityData) {
  		const cityName = cityData.city.name;
  		const temps = cityData.list.map(weather => weather.main.temp);
  		const pressure = cityData.list.map(weather => weather.main.pressure);
  		const humidity = cityData.list.map(weather => weather.main.humidity);
  		const { lon, lat } = cityData.city.coord;
  
  		console.log(temps);
  		return (
  			<tr key={cityName}>
  				<td>
  					<GoogleMap lon={lon} lat={lat} />
  				</td>
  				<td>
  					<Chart data={temps} color="red" units="K" />
  				</td>
  				<td>
  					<Chart data={pressure} color="orange" units="hPa" />
  				</td>
  				<td>
  					<Chart data={humidity} color="blue" units="%" />
  				</td>
  			</tr>
  		);
  	}
  	render() {
  		return (
  			<table className="table table-hover">
  				<thead>
  					<tr>
  						<th>City</th>
  						<th>Temperature (K)</th>
  						<th>Pressure (hPa) </th>
  						<th>Humidity (%) </th>
  					</tr>
  				</thead>
  				<tbody>{this.props.weather.map(this.renderWeather)}</tbody>
  			</table>
  		);
  	}
  }
  
  function mapStateToProps({ weather }) {
  	return { weather };
  }
  
  export default connect(mapStateToProps)(WeatherList);
  