<div id="app"></div>

const Album = (props) => {
  return (
    <div className="column">
      <div className="box">
        <article className="media">
          <div className="media-left">
            <figure className="image is128x128">
              <img src={props.album.artworkUrl100}
                 alt="album cover" />
            </figure>
          </div>
          <div className="media-content">
            <div className="content">
              <p className="is-size-5">
                <strong>
                  {props.album.collectionName}
                </strong>
              </p>
            </div>
          </div>
        </article>
      </div>
    </div>
  )
}

const URL = 'https://itunes.apple.com/lookup?callback=shortcb&entity=album&id=16269045';

class App extends React.Component {
  state = { albums: [] }
  
  componentDidMount() {

    fetchJsonp(URL)
      .then(response => { 
        return response.json()
      })
      .then(json => {
        let data = json.results;
      
        // pull the first result off the array cause it's bogus
        data.splice(0, 1);

        let albums = [];

        data.forEach((item, index) => {
          if (index % 2) {
            albums.push([data[index - 1], data[index]]);
          }
        });
      
      this.setState({
        albums: albums
      });
    });
  }

  render() {
    return (
      <section className="section">
        {this.state.albums.map((albumRow, index) => {
          return (
            <div className="columns">
              {albumRow.map(album => {
                return <Album album={album}></Album>;
              })}
            </div> 
          )
        })};
      </section>
    ) 
  }
}


ReactDOM.render(<App />, document.getElementById('app'));