fixed the search and saveToPlaylist functions

This commit is contained in:
dinotutic 2022-11-28 02:08:16 +01:00
parent 5e570ffa50
commit 5e3b7b4b39
3 changed files with 23 additions and 7 deletions

15
.vscode/launch.json vendored Normal file
View File

@ -0,0 +1,15 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
}
]
}

View File

@ -22,7 +22,9 @@ class SearchBar extends React.Component {
placeholder="Enter A Song, Album, or Artist" placeholder="Enter A Song, Album, or Artist"
onChange={this.handleTermChange} onChange={this.handleTermChange}
/> />
<button className="SearchButton">SEARCH</button> <button className="SearchButton" onClick={this.search}>
SEARCH
</button>
</div> </div>
); );
} }

View File

@ -1,5 +1,5 @@
const clientId = "c39c93bbf05745fb986d1e566004eb31"; const clientId = "c39c93bbf05745fb986d1e566004eb31";
const redirectUri = "http://localhost:3000/"; const redirectUri = "http://localhost:3000";
let accessToken = ""; let accessToken = "";
export const Spotify = { export const Spotify = {
@ -22,8 +22,7 @@ export const Spotify = {
window.history.pushState("Access Token", null, "/"); window.history.pushState("Access Token", null, "/");
return accessToken; return accessToken;
} else { } else {
const accessUrl = `https://accounts.spotify.com/authorize?client_id=${clientId}&response_type= const accessUrl = `https://accounts.spotify.com/authorize?client_id=${clientId}&response_type=token&scope=playlist-modify-public&redirect_uri=${redirectUri}`;
token&scope=playlist-modify-public&redirect_uri=${redirectUri}`;
window.location = accessUrl; window.location = accessUrl;
} }
}, },
@ -54,13 +53,13 @@ export const Spotify = {
if (!name || !trackUris.length) { if (!name || !trackUris.length) {
return; return;
} }
const accessToken = Spotify.getAccessToken; const accessToken = Spotify.getAccessToken();
const headers = { Authorization: `Bearer ${accessToken}` }; const headers = { Authorization: `Bearer ${accessToken}` };
let userId; let userId;
return fetch(`https://api.spotify.com/v1/me`, { headers: headers }) return fetch(`https://api.spotify.com/v1/me`, { headers: headers })
.then((response) => response.json()) .then((response) => response.json())
.then((jsonResponse) => { .then((jsonResponse) => {
userId = jsonResponse.Id; userId = jsonResponse.id;
return fetch(`https://api.spotify.com/v1/users/${userId}/playlists`, { return fetch(`https://api.spotify.com/v1/users/${userId}/playlists`, {
headers: headers, headers: headers,
method: "POST", method: "POST",
@ -68,7 +67,7 @@ export const Spotify = {
}) })
.then((response) => response.json()) .then((response) => response.json())
.then((jsonResponse) => { .then((jsonResponse) => {
const playlistId = jsonResponse.Id; const playlistId = jsonResponse.id;
return fetch( return fetch(
`https:/api.spotify.com/v1/users/${userId}/playlists/${playlistId}/tracks`, `https:/api.spotify.com/v1/users/${userId}/playlists/${playlistId}/tracks`,
{ {