Jamming app not working

Hi All,

I have just finished step 89 - 90. However I am getting problems with my Spotify.js module.

I have tried going forward to see if they give a solution but unfortunately have not found anything. It would have been easier to spot a a syntax error that way. I will be posting the code below. Would appreciate the help. I believe it may be a syntax error but have been looking for hours and haven’t spotted it.

Spotify.js module

const clientID = '#########secretcode';
const redirectURI = 'http://localhost:3000/';
let accessToken;

const Spotify = { 
    getAccessToken() {
        if(accessToken) {
            return accessToken;
        }
            //checks for access token match
        const accessTokenMatch = window.location.href.search.match(/access_token=([^&]*)/);
        const expiresInMatch = window.location.href.search.match(/expires_in=([^&]*)/);
        
        if (accessTokenMatch && expiresInMatch) {
            accessToken = accessTokenMatch[1];
            const expiresIn = Number(expiresInMatch[1]); 
            // this clears the parameters, allowing us to grab a new access token when it expires
            window.setTimeout(() => accessToken = '', expiresIn * 1000);
            window.history.pushState('Access Token', null, '/');
            return accessToken;
        } else {
            const accessURL = `https://accounts.spotify.com/authorize?client_id=${clientID}
            &response_type=token&scope=playlist-modify-public&redirect_uri=${redirectURI}`;
            windows.location = accessURL;
        }      
    }, 

    search(term) {
        const accessToken = getAccessToken.accessToken;
        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.item.map(track => ({
                    id: track.id,
                    name: name.id,
                    artist: track.artist[0].id,
                    album: track.album.id,
                    uri: track.uri
                }));
            });
    },

    savedPlaylist(name, trackUris) {
        if(!name || !trackUris.length) {
            return;
        }

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

        return fetch('https://api.spotify.com/v1/me', {headers: headers}
        ).then(response => {
            return 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 => {
                return response.json();
            }).then(jsonResponse => {
            const playlistID = jsonResponse.id;
            return(`https://api.spotify.com/v1/users/{user_id}/playlists/${playlistID}/tracks`, {
                headers: headers,
                method: 'POST',
                body: json.stringify({uris: trackUris})
            })
            })
        });
    }
}

export default Spotify;

For some reason I found that my code didn’t like having my URL endpoints multi-line. Try making yours single-line too and report back.

Edit: Specifically -

const accessURL = `https://accounts.spotify.com/authorize?client_id=${clientID}
            &response_type=token&scope=playlist-modify-public&redirect_uri=${redirectURI}`;

Try -

const accessURL = `https://accounts.spotify.com/authorize?client_id=${clientID}&response_type=token&scope=playlist-modify-public&redirect_uri=${redirectURI}`;
1 Like

many thanks [cptragnarok]

i did this it seemed to help somewhat but I am now getting errors elsewhere. It failed to compile but I will investigate and get back.

./src/util/Spotify.js
  Line 24:13:  'windows' is not defined                                               no-undef
  Line 29:29:  'getAccessToken' is not defined                                        no-undef
  Line 40:27:  Unexpected use of 'name'                                               no-restricted-globals
  Line 54:34:  Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 57:65:  'headers' is not defined                                               no-undef
  Line 63:26:  'headers' is not defined                                               no-undef
  Line 65:23:  'json' is not defined                                                  no-undef
  Line 71:26:  'headers' is not defined                                               no-undef
  Line 73:23:  'json' is not defined            

I have notied that you are calling Spotify.getAccessToken... incorrectly when creating your const accessToken variables. Think about how Spotify.getAccessToken is made. Is it an Object or a Method (I.e like a function in an object)?

i am having a cors policy error while trying to search. could you please help me there?