jammming's People
jammming's Issues
Summary
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!
Spotify module
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.
Redirect URI
Searching for tracks
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.
Adding tracks to playlist
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?
Stateless functional components
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!
Avoid writing to state
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.
Saving playlist to account
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.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.