{"size": 1564, "ext": "js", "max_stars_repo_path": "src/containers/weather_list.js", "max_stars_repo_name": "KazuhisaTaniguchi/ReduxSimpleWeather", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/containers/weather_list.js", "max_issues_repo_name": "KazuhisaTaniguchi/ReduxSimpleWeather", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/containers/weather_list.js", "max_forks_repo_name": "KazuhisaTaniguchi/ReduxSimpleWeather", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 24.8253968254, "max_line_length": 73, "alphanum_fraction": 0.5671355499}
import React, {Component, PropTypes} from 'react'
import {connect} from 'react-redux'
import Chart from '../components/chart'
import GoogleMapOriginal from '../components/googel_map'


class WeatherList extends Component{
  static get propTypes() {
    return {
      weather: PropTypes.array
    }
  }
  renderWeather(cityData){
    const city_id = cityData.city.id
    const temps = cityData.list.map( weather=>weather.main.temp )
    const pressures = cityData.list.map( weather=>weather.main.pressure )
    const humiditys = cityData.list.map( weather=>weather.main.humidity )

    const {lon, lat} = cityData.city.coord

    return(
      <tr key={city_id}>
        <td>
          <GoogleMapOriginal lat={lat} lng={lon} />
        </td>
        <td>
          <Chart data={temps} color="orange" units="K" />
        </td>
        <td>
          <Chart data={pressures} color="green" units="hPa" />
        </td>
        <td>
          <Chart data={humiditys} color="black" 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}){
  // {weather} === {weather: weather}
  return {weather}
}

export default connect(mapStateToProps, null)(WeatherList)
