So I have almost finished Jammming project. https://www.codecademy.com/paths/build-web-apps-with-react/tracks/react-capstone/modules/jammming-capstone/projects/jammming-prj I have gotten up to step 95. When I click on the search button I get the following result.
I have read that it may be due to my not being the US and that there are several other API’s I can use. However I am unsure what to change in my Spofity.js file
let accessToken;
const clientID = '';
const redirectURI = 'https://localhost:3001/';
const Spotify = {
getAccessToken() {
if (accessToken) {
return accessToken;
}
// check for access token
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 accessUrls = `https://accounts.spotify.com/authorize?client_id=${clientID}&response_type=token&scope=playlist-modify-public&redirect_uri=${redirectURI}`;
window.location = accessUrls;
}
},
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 (!jsonResponse.tracks) {
return [];
}
return jsonResponse.tracks.items.map(track => ({
id: track.id,
name: track.name,
artist: track.artist[0].name,
album: track.album.name,
uri: track.uri
}));
});
},
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/{user_id}/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/{user_id}/playlists/{playlist_id}/tracks`,
{
headers: headers,
method: 'POST',
body: JSON.stringify({uris: trackUris})
})
})
})
}
};
export default Spotify;
I know that I need to change the urls but to what I am not sure. I have set up an account with deezer. Does anyone have experience of using deezer or any other API for the Jammming project? Can you help? Or is there a way I can get it working with Spotify? Also unable to access my dashboard on Spotify.
