App.jsx

import React from 'react';
import ReactDOM from 'react-dom';

import Header from './components/Artist'
import Artist from './components/Artist';


class App extends React.Component{ 
  
  constructor(){
    super();
    this.state = {
      artists: [{name: "lol"}, {name: 'kek'}],
      artistSearchUrl: "https://api.spotify.com/v1/search?type=artist&limit=50&q=james"
    }

  }
  
  render() {
    return(
      <div>
        <Header/>
        <div className=""> 
          {this.state.artists.map( (artist) => <Artist name={artist.name} /> )}
        </div>

      </div> 
    )
  }
  
  _queryArtists() {
    let url = this.state.artistSearchUrl;   
    this._ajaxRequest(url, this._applyArtists.bind(this))
  }
  
  _applyArtists(result) {
    result = JSON.parse(result);
    let artists = result.artists.items;
    let sortedArtists = this._sortByImageSize(artists)
    this.setState({artists: artists})
  }
  
  _sortByImageSize(artists){
    let sorted = artists.map( artist => {
      let hasSquareImage = artist.images.some(function(image){
        return image.width === image.height;
      })
      if(hasSquareImage){
        return artist;
      }
    })
    return sorted;
  }
  
  
  _ajaxRequest(url, callback){
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = function() {
      if (xhr.status === 200) {
        callback(xhr.responseText)
      }
      else {
        alert('Request failed.  Returned status of ' + xhr.status);
      }
    };
    xhr.send();
  }
}


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