Jammming Save Playlist Not Working

Projects Skill Path Projects
1

I’m on the last part of the Jammming project build and the Save Playlist does not appear to be working. I can add the tracks to the playlist but when I go to hit the Save Playlist button, nothing appears to happen.

The savePlayList method in the Spotify.js file is below.

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 => 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})
                })
            })
        })
    }

and the savePlaylist method in the App.js file is below.

savePlaylist() {
    const trackUris = this.state.playlistTracks.map(track => track.uri);
    Spotify.savePlaylist(this.state.playlistName, trackUris).then(() => {
      this.setState({
        playlistName: 'New Playlist',
        playlistTracks: []
      })
    })
  }
2

I am having the same problem here :confused: did you ever find a solution?

3

I have the exact same problem. Did anyone find a solution for this?

4

Make sure your call to the component in App.js has the onSave={this.savePlaylist} attribute

            <Playlist playlistName={this.state.playlistName} 
                      playlistTracks={this.state.playlistTracks} 
                      onRemove={this.removeTrack} 
                      onNameChange={this.updatePlaylistName} 
                      onSave={this.savePlaylist} />

The original post didn’t show that part of App.js but I had the same issue and realized I left that off. Not sure if I missed in video or if video missed it. Otherwise the code provided looks exactly like my code and I have it working.

I posted my code on github here: GitHub - killacom/jammming: codecademy react capstone project