pbscoots / jammming Goto Github PK
View Code? Open in Web Editor NEWSpotify API project
Spotify API project
jammming/src/Components/App/App.js
Lines 28 to 44 in e0935bd
It helps keep your component organized and easy to read when you add a single line of blank space between each method! Like this:
this.savePlaylist = this.savePlaylist.bind(this);
this.search = this.search.bind(this);
}
addTrack(track){
if (-1 === this.state.playlistTracks.indexOf(track.id)) {
this.setState({ playlistTracks: this.state.playlistTracks.concat(track)});
}
}
removeTrack(track){
this.setState({
playlistTracks: this.state.playlistTracks.filter(function(check) {
return check.id !== track.id;
})
});
}
updatePlaylistName (name) {
this.setState({playlistName: name});
Giving the user the ability to preview tracks before adding them to the playlist will improve the efficiency of the app. The previews can be played in the current browser by adding a html audio element. We could then use (this.state.trackURI) for example as the players source. The design of the play and pause button is correct by creating the state isPlaying which would toggle to true or false. The technical design is practical and implementable. Great feature request.
jammming/src/Components/App/App.js
Lines 60 to 81 in e0935bd
Good job remembering to indent your JSX just like HTML! A lot of people just paste it in and forget to fix up the formatting
The project ran well. No major errors were detected. I would suggest running and testing the functionalities of the app before publishing to github. Ensure that all the features are working correctly. Since the only error was in relation to state, here is a great document to cover;
Line 54 in e0935bd
This seems to work, so good job on that!! It's a little convoluted, so just for reference here's our official solution for it:
savePlaylist(name, trackUris) {
if (!name || !trackUris.length) {
return;
}
const accessToken = Spotify.getAccessToken();
const headers = { Authorization: `Bearer ${accessToken}` };
let userId;
return fetch('https://api.spotify.com/v1/me', {headers: headers}
).then(response => response.json()
).then(jsonResponse => {
userId = jsonResponse.id;
return fetch(`https://api.spotify.com/v1/users/${userId}/playlists`, {
headers: headers,
method: 'POST',
body: JSON.stringify({name: name})
}).then(response => response.json()
).then(jsonResponse => {
const playlistId = jsonResponse.id;
return fetch(`https://api.spotify.com/v1/users/${userId}/playlists/${playlistId}/tracks`, {
headers: headers,
method: 'POST',
body: JSON.stringify({uris: trackUris})
});
});
});
}
jammming/src/Components/App/App.js
Lines 36 to 42 in e0935bd
It's usually better when you avoid fitting so much logic into your setState. I'd suggest taking this and splitting it into two lines instead of one really long one and using a new variable. This will help you avoid silly mistakes and makes it a little easier to read! Something like this:
removeTrack(track){
const tracks = this.state.playlistTracks.filter(function(check) {
return check.id !== track.id;
})
this.setState({ playlistTracks: tracks });
}
The reason why the playlistName does not reset when the 'save to spotify' button is clicked is because the value of the input that displays the name has a default value not set to this.props.playlistName
like so;
<input defaultValue={'New Playlist'} onChange={this.handleNameChange}/>
It should be like this instead;
<input value={this.props.playlistName} onChange={this.handleNameChange}/>
in playList.js
jammming/src/Components/App/App.js
Lines 12 to 24 in e0935bd
You don't need to start with this in your state, you should just start out with an empty array for both searchResults and playlistTracks:
this.state = {
searchResults: [],
playlistName: '',
playlistTracks: []
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.