Hello , Project Jamming
I Stuck and trying to make request to Spotify server to complete project but I fail to do it , I watched Walkthrough and followed every step .
I’m trying to make requests to spotify independently outside of Jamming project to see response and fix , this is code I’m trying to run in , every other part of project works well just fetching response I fail
const clientId = 'ff1b7ba01ae24c469fa72a0bc39caa26';
const redirectUri = 'http://localhost:3000';
let accessToken;
const spotify = {
getAccessToken() {
if (accessToken) {
return accessToken;
}
// check for access toke match
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]);
window.setTimeout(() => accessToken = '', expiresIn * 1000); // No Idea what this line doing ?
window.history.pushState('Access Token', null, '/'); // No Idea what this line doing ?
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; // No idea what this line doing ???
}
},
search(term) {
console.log('access0');
const accessToken = `https://accounts.spotify.com/authorize?
client_id=${clientId}&response_type=token&scope=playlist-
modify-public&redirect_uri=${redirectUri}`
return fetch(`https://api.spotify.com/v1/search?type=track&q=${term}`,
{ header: {
Authorization: `Bearer ${accessToken}`
} }).then(response => {
console.log(response) // trying to log this :
/* Response
body: ReadableStream
locked: true
<prototype>: object { … }
bodyUsed: true
headers: Headers
<prototype>: HeadersPrototype { append: append(), delete: delete(), get: get(), … }
ok: false
redirected: false
status: 401
statusText: "Unauthorized"
type: "cors"
url: "https://api.spotify.com/v1/search?type=track&q=michael"
<prototype>: ResponsePrototype
arrayBuffer: function arrayBuffer()
blob: function blob()
body:
bodyUsed:
clone: function clone()
constructor: function ()
formData: function formData()
headers:
json: function json()
ok:
redirected:
status:
statusText:
text: function text()
type:
url:
*/
return response.json();
}).then(jsonResponse => {
if (!jsonResponse.tracks) {
return [];
}
return jsonResponse.tracks.items.map(track => ({
id: track.id,
name: track.name,
artists: 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: `Bearer ${accessToken}`};
let userId;
return fetch('https://api.spotify.com/v1/me', {headers: headers}
).then(response => {
return 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})
})
})
})
}
}
