how to make API GET call for SpotifyAPI specifically, getUserPlaylists()? - node.js

Question

I am trying to make a web application using the Spotify web API.
I used the Spotify auth-server code provided in their GitHub repo for my authorization code https://github.com/spotify/web-api-auth-examples
I followed the instructions here https://medium.com/#jonnykalambay/now-playing-using-spotifys-awesome-api-with-react-7db8173a7b13 to create a simple app that getsCurrentPlayback and displays the songs album art of what is now playing on users Spotify account.
I added a getFeatures function to get the valence of the song.
Right now I want to call the getUsersPlaylists() function from the spotify-web-api.
Once I can get the playlists to call to work I want to iterate through the tracks in the playlist to get each tracks valence. I think once I can get the playlist API call to work I can figure out the rest on my own.
(Help a poor college student out whose teammates don't do anything and who can't get help from the Prof because of COVID)
Thanks so much in advance!
Here is the code for my App.js. I am using REACT
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Spotify from 'spotify-web-api-js';
const spotifyWebApi = new Spotify();
class App extends Component {
constructor(){
super();
const params = this.getHashParams();
this.state ={
loggedIn: params.access_token ? true : false,
nowPlaying: {
name: "Not Checked",
image: '',
trackId: "",
valence: ""
},
idParams: {
userId: ""
},
playlistParam: {
playlistName: ""
},
myAccessToken: {
token: ""
}
}
if(params.access_token){
spotifyWebApi.setAccessToken(params.access_token);
}
}
getHashParams() {
var hashParams = {};
var e, r = /([^&;=]+)=?([^&;]*)/g,
q = window.location.hash.substring(1);
while ( e = r.exec(q)) {
hashParams[e[1]] = decodeURIComponent(e[2]);
}
return hashParams;
}
getToken() {
return spotifyWebApi.getAccessToken();
}
// Get user Id of logged in account user.
async getUserId(myToken)
{
const headers = {
Authorization: `Bearer ${myToken}`
};
let userId = '';
const response = await fetch('https://api.spotify.com/v1/me/playlists',
{
headers : headers
}
);
const jsonResponse = await response.json();
if(jsonResponse)
{
userId = jsonResponse.id;
}
return userId;
}
//***HERE IS SOME CODE I HAVE TRIED***
//
// fetch("https://api.spotify.com/v1/me/playlists?limit=1&offset=0", {
// headers: {
// Accept: "application/json",
// Authorization: "Bearer",
// "Content-Type": "application/json"
// }
// })
// fetch("https://api.spotify.com/v1/me/playlists", {
// headers: {
// Authorization: "Bearer {params.access_token}"
// //console.log("Have Gotten The Playlist");
// }
// });
//
// getUserPlaylist() {
// fetch("https://api.spotify.com/v1/me/playlists/", {
// headers: {
// Authorization: "Bearer {this.getToken()}"
// }
// });
//
// console.log("Have Completed It");
//
// }
//********
getNowPlaying() {
spotifyWebApi.getMyCurrentPlaybackState()
.then((response) => {
this.setState({
nowPlaying: {
name: response.item.name,
image: response.item.album.images[0].url,
trackId: response.item.id
}
});
})
}
getFeatures(){
spotifyWebApi.getAudioFeaturesForTrack(this.state.nowPlaying.trackId)
.then(
function(data){
console.log("Valence of song: ", data.valence);
},
function(err){
console.log(err)
}
);
}
render(){
return (
<div className="App">
<a href="http://localhost:8888">
<button>Login With Spotify</button>
</a>
<div> Now Playing: { this.state.nowPlaying.name } </div>
<div>
<img src={ this.state.nowPlaying.image } style={{width: 100}}/>
</div>
<div>
Track Id: { this.state.nowPlaying.trackId } </div>
<button onClick={() => this.getNowPlaying()}>
Check Now Playing
</button>
<button onClick={() => this.getFeatures()}>
Get Valence
</button>
<button onClick={() => this.getUserPlaylist()}>
Get your Playlists
</button>
<div> Your Selected Playlist : {this.state.playlistParam.playlistName}</div>
<button onClick={() => console.log(this.getUserId(this.params.access_token))}> Get User Id</button>
</div>
);
}
}
export default App;