pbscoots / jammming Goto Github PK

Giving the user the ability to preview tracks before adding them to the playlist will improve the efficiency of the app. The previews can be played in the current browser by adding a html audio element. We could then use (this.state.trackURI) for example as the players source. The design of the play and pause button is correct by creating the state isPlaying which would toggle to true or false. The technical design is practical and implementable. Great feature request.

The project ran well. No major errors were detected. I would suggest running and testing the functionalities of the app before publishing to github. Ensure that all the features are working correctly. Since the only error was in relation to state, here is a great document to cover;

https://reactjs.org/docs/faq-state.html

The reason why the playlistName does not reset when the 'save to spotify' button is clicked is because the value of the input that displays the name has a default value not set to this.props.playlistName like so;

<input defaultValue={'New Playlist'} onChange={this.handleNameChange}/>

It should be like this instead;

<input value={this.props.playlistName} onChange={this.handleNameChange}/>

in playList.js

This seems to work, so good job on that!! It's a little convoluted, so just for reference here's our official solution for it:

  savePlaylist(name, trackUris) {
    if (!name || !trackUris.length) {
      return;
    }

    const accessToken = Spotify.getAccessToken();
    const headers = { Authorization: `Bearer ${accessToken}` };
    let userId;

    return fetch('https://api.spotify.com/v1/me', {headers: headers}
    ).then(response => response.json()
    ).then(jsonResponse => {
      userId = jsonResponse.id;
      return fetch(`https://api.spotify.com/v1/users/${userId}/playlists`, {
        headers: headers,
        method: 'POST',
        body: JSON.stringify({name: name})
      }).then(response => response.json()
      ).then(jsonResponse => {
        const playlistId = jsonResponse.id;
        return fetch(`https://api.spotify.com/v1/users/${userId}/playlists/${playlistId}/tracks`, {
          headers: headers,
          method: 'POST',
          body: JSON.stringify({uris: trackUris})
        });
      });
    });
  }

It's usually better when you avoid fitting so much logic into your setState. I'd suggest taking this and splitting it into two lines instead of one really long one and using a new variable. This will help you avoid silly mistakes and makes it a little easier to read! Something like this:

 removeTrack(track){
   const tracks = this.state.playlistTracks.filter(function(check) {
        return check.id !== track.id;
      })

    this.setState({ playlistTracks: tracks });
  }

You don't need to start with this in your state, you should just start out with an empty array for both searchResults and playlistTracks:

 this.state = {
       searchResults: [],
       playlistName: '',
       playlistTracks: []
     } 

Good job remembering to indent your JSX just like HTML! A lot of people just paste it in and forget to fix up the formatting

It helps keep your component organized and easy to read when you add a single line of blank space between each method! Like this:

   this.savePlaylist = this.savePlaylist.bind(this);
    this.search = this.search.bind(this);
  }

 addTrack(track){
   if (-1 === this.state.playlistTracks.indexOf(track.id)) {
     this.setState({ playlistTracks: this.state.playlistTracks.concat(track)});
   }
 }

 removeTrack(track){
   this.setState({
     playlistTracks: this.state.playlistTracks.filter(function(check) {
       return check.id !== track.id;
     })
   });
 }

 updatePlaylistName (name) {
   this.setState({playlistName: name});