Hello, I’m having troubles to save the playlist to my account, as I’m getting the 400 Error when saving it. Also, the playlist title isn’t refreshing.
Here is my Spotify.js
const clientId = ""; // deleted for this post
const redirectUri = "http://react-app-jammming.surge.sh";
let accessToken;
export const Spotify = {
getAccessToken() {
if (accessToken) {
return accessToken;
}
// check for an access token match - match() return an array with the values found
const accessTokenMatch = window.location.href.match(/access_token=([^&]*)/);
const expiresInMatch = window.location.href.match(/expires_in=([^&]*)/);
if (accessTokenMatch && expiresInMatch) {
accessToken = accessTokenMatch[1];
const expiresIn = Number(expiresInMatch[1]);
// this clears the parameters, allowing us to grab a new access token when it expires
window.setTimeout(() => accessToken = '', expiresIn * 1000);
window.history.pushState('Access Token', null, '/');
return accessToken;
} else {
const accessUrl = `https://accounts.spotify.com/authorize?client_id=${clientId}&response_type=token&scope=playlist-modify-public&redirect_uri=${redirectUri}`;
window.location = accessUrl;
}
},
search(term) {
const accessToken = Spotify.getAccessToken();
return fetch(`https://api.spotify.com/v1/search?type=track&q=${term}`,
{ headers: {
Authorization: `Bearer ${accessToken}`
}}).then(response => {
return response.json();
}).then(jsonResponse => {
// if nothing comes from SPOTIFY API then return an empty array
if (!jsonResponse) {
return [];
}
return jsonResponse.tracks.items.map(track => ({
id: track.id,
name: track.name,
artist: track.artists[0].name,
album: track.album.name,
uri: track.uri
}));
});
},
savePlaylist(name, trackUris) {
if(!name || !trackUris.length) {
return;
}
const accessToken = Spotify.getAccessToken();
const headers = { Authorization: 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 })
});
});
}).catch(err => console.log(err));
}
}
And here is my App.js
import React from "react";
import ReactDOM from "react-dom";
import './App.css';
import { SearchBar } from "../SearchBar/SearchBar";
import { SearchResults } from "../SearchResults/SearchResults";
import { Playlist } from "../Playlist/Playlist";
import { Spotify } from "../../util/Spotify";
class App extends React.Component {
constructor(props) {
super(props);
this.addTrack = this.addTrack.bind(this);
this.removeTrack = this.removeTrack.bind(this);
this.updatePlaylistName = this.updatePlaylistName.bind(this);
this.savePlaylist = this.savePlaylist.bind(this);
this.search = this.search.bind(this);
this.state = {
searchResults: [],
playlistName: "My Playlist",
playlistTracks: []
}
}
addTrack(track) {
let tracks = this.state.playlistTracks;
if (tracks.find(savedTrack => savedTrack.id === track.id )) {
return;
}
tracks.push(track);
this.setState( { playlistTracks: tracks } );
}
removeTrack(track) {
let tracks = this.state.playlistTracks;
tracks.splice(tracks.indexOf(track.id), 1);
this.setState( { playlistTracks: tracks } );
}
updatePlaylistName(newPlaylistName) {
this.setState({ playlistName: newPlaylistName});
}
savePlaylist() {
const trackUris = this.state.playlistTracks.map(track => track.uri);
Spotify.savePlaylist(this.state.playlistName, trackUris)
.then(() => {
this.setState({
playlistName: "New Playlist",
playlistTracks: []
});
});
}
search(searchTerm) {
Spotify.search(searchTerm).then(searchResults => {
this.setState({ searchResults: searchResults })
})
}
render() {
return (
<div>
<h1>Ja<span className="highlight">mmm</span>ing</h1>
<div class="App">
<SearchBar onSearch={this.search} />
<div className="App-playlist">
<SearchResults searchResults={this.state.searchResults}
onAdd={this.addTrack} />
<Playlist playlistName={this.state.playlistName}
playlistTracks={this.state.playlistTracks}
onRemove={this.removeTrack}
onNameChange={this.updatePlaylistName}
onSave={this.savePlaylist} />
</div>
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"))
export default App;
I managed to do everything as the video, but having this 400 Error in my fetch’s in “savePlaylist” method, getting “undefined” for my variables: “userId” & “playlistId”.
Do you have experimented something similar? I can’t understand what is going on, because everything else works as expected!!
Thank you very much. Kind regards, Andy.-
