Feature Request: Jammming

I have been working on adding a few new features to Jammming project and my first goal is pulling a list of playlists from Spotify.

Here are the adjustments I made but it hasn’t been working as I hoped, can someone help?

  1. Added an empty object of spotifyList array into src/App.js
  2. Added componentDidMount method to call playlists when the first render is complete in src/App.js
  3. Passed spotifyList state to SpotifyPlaylist component.
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      spotifyList: [],
    };
...
 async componentDidMount() {
    await Spotify.bringPlaylist().then(
      (spotifyList) => {
        this.setState({ spotifyList, loading: false });
      },
      (error) => {
        this.setState({ loading: false, error });
      }
    );
  }
...
render () return {
<SpotifyPlaylist onSearch={this.search} spotifyList={this.state.spotifyList} />

In the meantime, I’ve added below to Spotify.js to make a GET request:

bringPlaylist(){
    let userID;
    return fetch(`https://api.spotify.com/v1/users/${userID}/playlists`)
   .then(response=>{
    if (response.ok) {return response.json()};
    throw new Error('Request failed!');}
    ,networkError=>{console.log(networkError.message);}).then(jsonResponse=>{return jsonResponse;})
   }

Your fetch requests are missing the Authorization Headers that confirm to the Spotify who you are.

You should have them in your search() and savePlaylist() methods in Spotify.js.

And you need to retrieve the userID with a fetch first and then call another fetch to retrieve the playlists. This is almost identical to what savePlaylist() does.

const accessToken = Spotify.getAccessToken();
const headers = { Authorization: `Bearer ${accessToken}` };
let userId;

return fetch("https://api.spotify.com/v1/me", {
      headers,
})
.then((response) => response.json())
.then((jsonResponse) => {

	userId = jsonResponse.id;
		
	return fetch(`https://api.spotify.com/v1/users/${userId}/playlists`, {
		headers,
	})
	.then((response) => response.json())
	.then((jsonResponse) => {
		console.log(jsonResponse);
	})
});

This is assuming your URL is valid, I know you can POST to it because savePlaylist() uses it, I have not looked at Spotify API docs.

I had not tested this when posted this morning.

It does return an array of items[], each one a playlist.

async componentDidMount() {
	await Spotify.bringPlaylists();
}

bringPlaylists() {
	const accessToken = Spotify.getAccessToken();
	const headers = { Authorization: `Bearer ${accessToken}` };
	let userId;

	return fetch("https://api.spotify.com/v1/me", {
		headers,
	})
		.then((response) => response.json())
		.then((jsonResponse) => {
			userId = jsonResponse.id;

			return fetch(`https://api.spotify.com/v1/users/${userId}/playlists`, {
			headers,
			})
				.then((response) => response.json())
				.then((jsonResponse) => {
					console.log(jsonResponse);
				});
		});
},

image