selwyk / jamming Goto Github PK

Satisfactory 👍

Good job getting the project to work. It's no small feat!

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/sikandar47/jamming/blob/master/src/util/Spotify.js

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.

https://github.com/sikandar47/jamming/blob/master/src/Components/App/App.js#L28

Nice job using .findIndex() to determine if a track ID exists in the current playlist before adding it in. 👍

Iterator methods can make it easier for you to write terse and expressive code. This is much better than relying on the traditional loop. Consider using find or some instead though, which might be just a little bit more terse than findIndex.

https://github.com/sikandar47/jamming/blob/master/src/Components/App/App.js#L49-L55

Nice job using .map() and arrow functions' implicit return to get all of the track URIs in a single, concise line of code and using .then() to reset the Playlist's state after the save playlist request is resolved. 👍

https://github.com/sikandar47/jamming/blob/master/src/Components/Playlist/Playlist.js#L18

Use a value attribute instead of defaultValue and set it to {this.props.playlistName} so that your playlist's name resets properly after save.

https://github.com/sikandar47/jamming/blob/master/src/Components/App/App.js#L59-L63

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

Consider renaming the tracks variable to searchResults and then 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/sikandar47/jamming/blob/master/src/Components/App/App.js#L29-L30

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/sikandar47/jamming/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!