yuanh1987 / jammming

Codecademy Unit 3 Project

Synopsis

Jammming works in conjunction with Spotify platform. The app is designed to retrieve a list a tracks and allow users to upload a customized playlist back to their Spotify user account.

Code Example

savePlaylist(playlistName, trackURIs) {
    if (!playlistName || !trackURIs.length) {
        return;
    }
    const accessToken = Spotify.getAccessToken();
    const headers = {Authorization: `Bearer ${accessToken}`, 'Content-Type': 'application/json'};
    let userId;
    //GET current user's ID
    return fetch('https://api.spotify.com/v1/me', {headers: headers}).then(response => {
      if(response.ok) {
        return response.json();
      }
      }).then(jsonResponse => {
        userId = jsonResponse.id;
    //POST a new playlist with the input name to the current user's Spotify account. Receive the playlist ID back from the request.
    return fetch(`https://api.spotify.com/v1/users/${userId}/playlists`, {headers: headers, method: 'POST', body: JSON.stringify({name: playlistName})}).then(response => {
      if (response.ok) {
        return response.json();
      } else {
        console.log('Request Failed!');
      }}).then(jsonResponse => {
        const playlistId = jsonResponse.id;
    //POST the track URIs to the newly-created playlist, referencing the current user's account (ID) and the new playlist (ID)
    return fetch(`https://api.spotify.com/v1/users/${userId}/playlists/${playlistId}/tracks`, {headers: headers, method: 'POST', body: JSON.stringify({uris: trackURIs})
            });
        });
    });
}

Motivation

Capstone project for Codecademy "Build Front-end Web Application from Scratch" course

Installation

This project can be tested with node by enter 'npm start' from the project directory

API Reference

Relevant Spotify API can be found under this link: https://developer.spotify.com/documentation/web-api/reference/

jammming's Issues

Avoid Mutating State Directly

In some of your functions you are modifying the state directly instead of using setState to do so. This is against the tenants of React and should be avoided at all costs. For example, you addTrack function looks like this:

jammming/src/Components/App/App.js

Lines 24 to 33 in 9b916dd

	//this method checks if a selected song pre-exists in the playlist. If not, add to the end of the list and update state
	addTrack(track) {
	let tracks = this.state.playlistTracks;
	if(tracks.find(savedTrack => savedTrack.id === track.id)) {
	return;
	} else {
	tracks.push(track);
	this.setState({playlistTracks:tracks});
	}
	}

Here you are simply pushing the new track into the array that is within state. This means that the array is now being mutated directly. To avoid this, you can make your code look something like this:

  addTrack(track) {
    let playlistTracks = [ ...this.state.playlistTracks ];
    if(playlistTracks.find(savedTrack => savedTrack.id === track.id)) {
      return;
    } else {
      playlistTracks.push(track);
      this.setState({ playlistTracks });
    }
  }

Feature Request Review

Rubric Score

Criteria 1: Objective Section

• Score Level: 4/4
• Comment(s): The overall goal of the feature request is summarized from the user’s perspective in no more than 1-2 complete sentences.

Criteria 2: Background Section

• Score Level: 4/4
• Comment(s): Good work here. You've given a solid overview and justified the reason behind why the functionality is important for the app.

Criteria 3: Technical Design Section

• Score Level: 4/4
• Comment(s): Nice work explaining the technical details of the feature. I like that you created a new "Sample" class, the code looks great and you've set things up in there appropriately (bound methods, settings state, etc). Great job!

Criteria 4: Caveats Section

• Score Level: 4/4
• Comment(s):

However, each specific function in React should be handled by different components to clearly lay out the app structure and for debugging purpose.

Good note here! As apps grow and get more complicated, it's important to keep the project structure clean and refactor when necessary.

Including the screenshot with how the album cover would be displayed with the play/pause button was a good addition as well.

Overall Score: 16/16 🔥

Awesome job! I really didn't see any issues here throughout the feature request. You detailed the functionality very well, included code snippets that reflected your technical design choices, and seemed to have executed effectively. 👍

Spotify.js

You did a good job with your Spotify.js code. A lot of learners have issues with the Spotify API, so it is great to see that you did well with it. Good job!

Leveraging ES6 Language Features

You did a good job leveraging ES6/ES7 language features in your code. I would recommend going through and seeing what other language features you could use. For instance, using async/await for asynchronous requests, or perhaps leveraging object destructuring if applicable.

Summary - Meets Expectations

Overall, you did a good job with this project. You formatted your code well, so it was easy to read. You also did well leveraging ES6 features in your code, which is great. I would advise that you go back and remove any code that directly modifies state, but other than that you did a great job. Keep up the good work!