News Fetcher

App.js

import React, { Component, PropTypes } from 'react';
import Headlines from '../components/Headlines';
import Newsfetcher from '../components/Newsfetcher';
import fetch from 'isomorphic-fetch';

class App extends Component {
  constructor() {
    super();
    this.state = {
      isFetching: false,
      items: []
    };
  }

  componentDidMount() {
    this.fetchItems()
  }

  fetchItems() {
    this.setState({isFetching: true}, function() {
      fetch("http://content.guardianapis.com/world?api-key=z3jkqkawzvc3jpqfkcvcuaa2")
      .then(response => response.json())
      .then(json => {
        this.setState({items: json.response.results, isFetching: false})
      });
    });
  }

  render() {
    return (
      <div>
        <Newsfetcher status={this.state.isFetching} refresh={this.fetchItems.bind(this)} />
        <Headlines items={this.state.items} />
      </div>
    );
  }
}

export { App as default };

Headlines.js

import React, { Component, PropTypes } from 'react'

class Headlines extends Component {
  render() {
    let { items } = this.props;
    let itemList = items.map((item, i) => {
      return (<li key={i}><a href={item.webUrl}>{item.webTitle}</a></li>)
    });
    return (
      <div>
        <ul>{itemList}</ul>
      </div>
    )
  }
}

export { Headlines as default };

NewsFetcher.js

import React, { Component, PropTypes } from 'react'

class Newsfetcher extends Component {
  render() {
    const { status, refresh } = this.props;
    return (
      <div>
        Fetching? {(status === true) ? "yes" : "no"}
        <p><a href="" onClick={refresh}>Refresh</a></p>
      </div>
    )
  }
}

export { Newsfetcher as default };