content: import React, { Component } from 'react';
  import Show from 'components/Show/Show';
  import './ShowCollection.css';
  import axios from 'axios';
  
  class ShowCollection extends Component {
  
    constructor(props) {
      super();
  
      this.state = {
        apiUrl: `https://api.nbc.com/v3.11.2/shows?derivatives=landscape.widescreen.size640.x1%2C\
        landscape.widescreen.size1920.x1&fields%5Bimages%5D=derivatives%2Cpath&fields%5Bshows%5D=shortT\
        itle%2CsortTitle%2Ccategory%2Cdescription%2CurlAlias%2Cfrontends%2Ctype&filter%5Bactive%5D=1&fi\
        lter%5Bfrontends%5D=tv&include=image%2CiosProperties.compactImage&page%5Bnumber%5D=1&page%5Bsiz\
        e%5D=50&sort=sortTitle`,
        sortAsc: true
      }
  
      this.sort = this.sort.bind(this);
    }
  
    componentDidMount() {
      this.fetchShows();
    }
  
    fetchShows() {
      axios.get(this.state.apiUrl)
      .then((response) => {
        const showsWithoutImages = response.data.data.map((show) => {
          return { id: show.id, attributes: show.attributes, imageId: show.relationships.image.data.id}
        });
  
        const shows = showsWithoutImages.map((show) => {
          return { ...show, imageUrl: this.getImageUrl(response.data.included, show.imageId)};
        });;
  
        this.setState({ ...this.state, shows});
      })
    }
  
    getImageUrl(included, imageId) {
      return included.find((show) => show.id === imageId).attributes.path;
    }
  
    renderShows() {
      return this.state.shows.map((show) => {
        return (
          <Show {...show} key={ show.id }/>
        );
      });
    }
  
    sort(a, b) {
      const shows = this.state.shows.sort((a, b) => {
        const aTitle = a.attributes.sortTitle.toUpperCase();
        const bTitle = b.attributes.sortTitle.toUpperCase();
  
        if (this.state.sortAsc) {
          return (aTitle > bTitle) ? -1 : (aTitle < bTitle) ? 1 : 0;  
        } else {
          return (aTitle < bTitle) ? -1 : (aTitle > bTitle) ? 1 : 0;  
        }    
      });
      this.setState({ ...this.state, shows, sortAsc: !this.state.sortAsc });
    }
  
    render() {
      return this.state.shows ? (
        <div className="wrapper">
          <span onClick={ this.sort }>Sort</span>
          <div className="show-container">
            { this.renderShows() }
          </div>
        </div>
        ) : ( 
        <div className="show-container">
          Loading...
        </div>
      );
    }
  }
  
  export default ShowCollection;