Jamming, save tracks to playlist error 400

link to the project: https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/jammming/projects/jammming-prj

Hi Guys,

I made it almost to the end. everything works except when I try to post the tracks to my created playlist on Spotify. playlist is created buy tracks does not post!

I get error 400:

here is my code:


const Spotify = {
    getAccessToken() {
        if (accessToken) {
            return accessToken;
        }
        const accessTokenMatch = window.location.href.match(/access_token=([^&]*)/);
        const expiresInMatch = window.location.href.match(/expires_in=([^&]*)/);

        if (accessTokenMatch && expiresInMatch) {
            accessToken = accessTokenMatch[1]; //get accessToken from url
            const expiresIn = expiresInMatch[1]; //get expiry time from url
            window.setTimeout(() => accessToken = '', expiresIn * 1000); // clear access token when it expires
            window.history.pushState('Access Token', null, '/'); //push state!
            return accessToken; // return it!
        } else {
            const accessUrl = `https://accounts.spotify.com/authorize?client_id=${clientId}&response_type=token&scope=playlist-modify-public&redirect_uri=${redirectUri}`;
            window.location = accessUrl;
        }
    },

    search(term) {
        const accessToken = Spotify.getAccessToken();
        return fetch(`https://api.spotify.com/v1/search?type=track&q=${term}`,
            {

                headers: { Authorization: `Bearer ${accessToken}` }

            }).then(response => {
                return response.json();
            }).then(jsonResponse =>{
                if(!jsonResponse.tracks){
                    return [];
                }                
                return jsonResponse.tracks.items.map(track => ({
                    id: track.id,
                    name: track.name,
                    artist: 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 => 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;
                // console.log(userId)
                // console.log(playlistId)
                // console.log(headers)
                // console.log(trackUris)
                return fetch(`https://api.spotify.com/v1/users/${userId}/playlists/${playlistId}/tracks`,
                {
                    headers: headers,
                    method: 'POST',
                    body: JSON.stringify({uris: trackUris})
                })
            })
        })

;
    }
}

Has this issue ever been resolved yet? I am having the same issue :confused: