Practice Project: Jammming | Codecademy
I’ve got to the end of the project and everything seemed to be fine, but once I tried to search the tracks nothing appears. If someone could help me by telling me what I did wrong and also maybe a way to learn and not repeat the same mistake I would appreciate it. I followed a bit of the walkthrough at the end because I was struggling a little with certain stuff but even then a mistake must of been made.
Spotify.js
import React from 'react';
import Playlist from '../Components/Playlist/Playlist';
let userToken;
const clientID = 'ee3c1d7c21754336a8f9d81682e1c8c6';
const redirectURI = "http://localhost:3000/";
const Spotify = {
getAccessToken() {
if (userToken) {
return userToken;
}
const userTokenMatch = window.location.href.match(/access_token=([^&]*)/);
const expiresInMatch = window.location.href.match(/expires_in=([^&]*)/);
if(userTokenMatch && expiresInMatch) {
userToken = userTokenMatch[1];
let expireTime = Number(expiresInMatch[1]);
window.setTimeout(() => userToken = '', expireTime * 1000);
window.history.pushState('Access Token', null, '/');
} 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(userSearch) {
const userToken = Spotify.getAccessToken();
return fetch(`https://api.spotify.com/v1/search?type=track&q=${userSearch}`, {
headers: {
Authorization: `Bearer ${userToken}`
}
}).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
}))
})
},
playlistUri(playlistName, trackUris) {
if(!playlistName || !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: playlistName})
}).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})
})
})
})
}
}
export default Spotify;
and App.js
type or paste code here
I understand that the app.js code isnt showing up, but on the computer it gives me “403 Error” so i’m not being able to fix it.