<commit_before>var forecastToArray = function(forecast) {
  var output = [];
  for (var i in forecast.data.temperature) {
    var period = {};
    period.id = i;
    for (var key in forecast.data) {
      period[key] = forecast.data[key][i];
    };

    for (var key in forecast.time) {
      period[key] = forecast.time[key][i];
    };

    output.push(period);
  };

  return output;
};

var Forecast = React.createClass({
  loadForecastFromServer: function() {
    var url = 'http://forecast.weather.gov/MapClick.php?lat=' + this.props.lat + '&lon=' + this.props.lon + '&FcstType=json';
    $.ajax({
      url: url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({
          data: data,
          forecast: forecastToArray(data),
        });
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(url, status, err.toString());
      }.bind(this)
    })
  },
  getInitialState: function() {
    return {data: false};
  },
  componentDidMount: function() {
    this.loadForecastFromServer();
    //setInterval(this.loadForecastFromServer, this.props.pollInterval)
  },
  render: function() {
    if ( !this.state.data ) {
      return (
        <h1>Loading data from NWS</h1>
      );
    } else if ( !this.state.data.productionCenter ) {
      console.log(this.state.data);
      return (
        <h1>Data not loaded correctly</h1>
      );
    }
    return (
      <div class="forecastResult">
        <h1>Forecast loaded from {this.state.data.productionCenter}</h1>
        <ForecastGraphicalList data={this.state.forecast} />
      </div>
    )
  },
});

var ForecastGraphicalList = React.createClass({
  render: function() {
    var periodNodes = this.props.data.map(function(data) {
      return (
        <li key={data.id}>{data.startPeriodName}</li>
      )
    });
    return (
      <ul className="forecastGraphicalList">
        {periodNodes}
      </ul>
    )
  }
});

React.render(
  <Forecast lat="44.098601844800385" lon="-70.69908771582459" pollInterval={200000}/>,
  document.getElementById('forecast')
)<commit_msg>Got a bit of nice data for each period<commit_after>var forecastToArray = function(forecast) {
  var output = [];
  for (var i in forecast.data.temperature) {
    var period = {};
    period.id = i;
    for (var key in forecast.data) {
      period[key] = forecast.data[key][i];
    };

    for (var key in forecast.time) {
      period[key] = forecast.time[key][i];
    };

    output.push(period);
  };

  return output;
};

var Forecast = React.createClass({
  loadForecastFromServer: function() {
    var url = 'http://forecast.weather.gov/MapClick.php?lat=' + this.props.lat + '&lon=' + this.props.lon + '&FcstType=json';
    $.ajax({
      url: url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({
          data: data,
          forecast: forecastToArray(data),
        });
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(url, status, err.toString());
      }.bind(this)
    })
  },
  getInitialState: function() {
    return {data: false};
  },
  componentDidMount: function() {
    this.loadForecastFromServer();
    //setInterval(this.loadForecastFromServer, this.props.pollInterval)
  },
  render: function() {
    if ( !this.state.data ) {
      return (
        <h1>Loading data from NWS</h1>
      );
    } else if ( !this.state.data.productionCenter ) {
      console.log(this.state.data);
      return (
        <h1>Data not loaded correctly</h1>
      );
    }
    return (
      <div class="forecastResult">
        <ForecastGraphicalList data={this.state.forecast} />
      </div>
    )
  },
});

var ForecastGraphicalList = React.createClass({
  render: function() {
    var periodNodes = this.props.data.map(function(data) {
      return (
        <ForecastGraphicalPeriod data={data} key={data.id}/>
      )
    });
    return (
      <ul className="forecastGraphicalList">
        {periodNodes}
      </ul>
    )
  }
});

var ForecastGraphicalPeriod = React.createClass({
  render: function() {
    var data = this.props.data;
    var desc = data.startPeriodName + ": " + data.text;
    var tempClass = "temp temp-" + data.tempLabel;
    return (
      <li key={data.id}>
        <p class="period-name">{data.startPeriodName}</p>
        <img class="forecast-icon" src={data.iconLink} alt={desc} title={desc} />
        <p class="short-desc">{data.weather}</p>
        <p class={tempClass}>{data.tempLabel}: {data.temperature} ºF</p>
      </li>
    )
  }
})

React.render(
  <Forecast lat="44.098601844800385" lon="-70.69908771582459" pollInterval={200000}/>,
  document.getElementById('forecast')
)
{'fraction_non_alphanumeric': 0.15788359788359788, 'fraction_numerical': 0.018624338624338623, 'mean_word_length': 2.6131498470948014, 'pattern_counts': {'":': 1, '<': 37, '<?xml version=': 0, '>': 37, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1951622', 'n_tokens_mistral': 1612, 'n_tokens_neox': 1550, 'n_words': 291}