jmfer1 / jammming Goto Github PK

Satisfactory 👍

First of all, good job getting this project to work! Besides the redirectURI issue, it's a relatively smooth experience to clone and start your project, get started searching for songs, adding them to playlists and finally adding those playlists to an actual Spotify account. This was no small feat, good job!

Make sure to look through the Spotify API documentation and start thinking of other features that you can add to your web application. As long as you can break a user interface down to components and reason about the state that describes those components, you should be able to use React to build your ideas!

https://developer.spotify.com/web-api/endpoint-reference/

https://github.com/jmfer1/Jammming/tree/master/src/Components/util

This is not a component. It should not be in your components folder.

https://github.com/jmfer1/Jammming/blob/master/src/Components/util/Spotify.js#L27-L76

You've demonstrated a solid understanding of Promise-based APIs like fetch and have very strategically used ES6 template literals throughout your module to keep your code readable and maintainable 👍

As a challenge to yourself, consider rewriting this module using async/await. You may find that you can shrink the size of your module and write more expressive and intuitive code.

If you don't quite remember how async functions work, you can always revisit that material in our JavaScript: Requests lesson.

Running a search results in the following error.

To fix this, you need to update the redirect URI for the app you registered in your Spotify developer account. Make sure you're using the same redirect URI you've used in your code.

https://github.com/jmfer1/Jammming/blob/master/src/Components/App/App.js#L25-L29

Nice job remembering that the Spotify.search() method returns a Promise and properly chaining a .then() before setting your state 👍

Consider using ES6's property/value shorthand syntax here:

this.setState({ searchResults })

You can use this whenever you need an object whose key is the same its value (i.e. { searchResults: searchResults } ) and you might find it makes your code more terse.

https://github.com/jmfer1/Jammming/blob/master/src/Components/App/App.js#L31-L36

You aren't checking for duplicate tracks when adding a track to a playlist.

You learned about how iterator methods can make it easier for you to write terse and expressive code. Why not use one like find or some to determine if a track ID exists in the current playlist before adding it in?

https://github.com/jmfer1/Jammming/blob/master/src/Components/SearchResults/SearchResults.js

The class syntax is the standard way to define a React component. But it's kind of a lot of ritual for a component that doesn't refer to this.state and only has a render() function.

In these situations, and if you're confident that a component won't eventually need to hold its own state, it's often preferable to write your component as a stateless functional component rather than a full blown component using class.

These are equivalent ways to define a component, but just so you're aware of your options when writing your own code and also when reading somebody else's. Read more here!

https://github.com/jmfer1/Jammming/blob/master/src/Components/App/App.js#L32-L33

When you write some code like

let someArray = this.state.someProperty;
someArray.push();

You are directly mutating React's state, which is considered a bad practice. React's state should only be changed by this.setState() because this method in turn signals to React that a component needs to be re-rendered. Directly mutating the state does not, which can cause complications.

Consider using a non-mutating Array method instead, like slice, concat, map, or filter which all return a brand new array instead.

You are then free to mutate that copied array and then pass the final version of that copied array to this.setState().

Here's an example:

let updatedPlaylistTracks = this.state.playlistTracks.concat(track);
this.setState({
  playlistTracks: updatedPlaylistTracks
});

Read more about immutability in React here.

https://github.com/jmfer1/Jammming/blob/master/src/Components/App/App.js#L49-L57

Nice job using .map() and arrow functions' implicit return to get all of the track URIs in a single, concise line of code 👍

Also, nice job remembering that Spotify.savePlaylist returns a Promise and that you should use .then() to reset the Playlist's state after the request is resolved.

https://github.com/jmfer1/Jammming/blob/master/src/Components/Playlist/Playlist.js#L19

Use a value attribute instead of defaultValue and give it a value of {this.props.playlistName} so that your playlist name gets updated after you save one.