stubayford / jammming Goto Github PK

Your CSS all looks perfect! As an added challenge, consider adding extra design aspects and resizing options using media queries.

https://github.com/StuBayford/jammming/blob/master/src/Components/App/App.js#L25-L28

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/StuBayford/jammming/blob/master/src/Components/App/App.js#L27

This is a creative way to check if a track has been added to the playlist previously and definitely gets the job done 👍

This is a great submission! You clearly put a lot of time and effort into making your code clear and efficient. I especially appreciated your comments and log statements. My main recommendations are to look into jsx spacing conventions to make your code a little neater, and to consider adding extra styling to your projects once you've gotten to this point. Extra styling is a great challenge, a lot of people don't think to add it, but having good CSS and design skills can really help set your work apart from others! Great job.

https://github.com/StuBayford/jammming/blob/master/src/Components/App/App.js#L57-L63

Keep in mind that Spotify.savePlaylist returns a Promise and you should use .then to reset the Playlist's state after the Spotify request is resolved.

Also, nicely done using that combination of .map, ES6's arrow function, and implicit return to get all the track IDs in one single, neat line of code.

You can remove the line storing the playlistName in a variable since you don't actually use that variable.

https://github.com/StuBayford/jammming/blob/master/src/Components/Playlist/Playlist.js#L19

Instead, to make sure that you're properly resetting the playlistName, give this input element an attribute of value instead of defaultValue and set it equal to {this.props.playlistName} which is getting passed down from the App component.

Great job keeping your code organized and being consistent in your spacing! However, sometimes I think you add a few too many spaces and line breaks. For example, this could be kept on a single line:
<a className="Track-action" onClick={this.removeTrack}> - </a>

Additionally, you may be using double tabs instead of single tabs? Just a few minor issues, it would make your code easier to read if you look into this.

Great job adding concise comments in this file! It's really helpful for others who want to scan through your code and find specific things. In the future, consider adding more comments on other files as well! It may seem irrelevant on things like the small CSS files like the ones in this project, but it's a good habit to get into.

https://github.com/StuBayford/jammming/blob/master/src/util/Spotify.js#L30-L123

Nicely done! 🔥

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.

Satisfactory 👍

First of all, good job getting this project to work! It's a 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/