Jammming project - Cannot read property 'then' of undefined

https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-react-part-ii/modules/fecp-challenge-project-jammming/projects/jammming-prj

Hi all, I was wondering if somebody could please help me out. I have just been completing the ‘Jammming’ project, I have almost completed it but I am getting an error when I try to search for new songs in the search bar. There are no songs coming up, then when I click save playlist I get an error - ‘Cannot read property ‘then’ of undefined’. It looks like there is an issue linking my app.js to my Spotify.js file but I can’t see any problem. There may possibly be an issue with my access key function but again, i have consulted the solution and can’t see any issues. Can anybody help me please?

I have included my Spotify.js code below:

const clientID = client ID goes here;
const redirectUri = “http://localhost:3000/”;

let accessToken;

const Spotify = {
getAccessToken() {
if (accessToken) {
return accessToken;
}

// Check for access token match

const accessTokenMatch = window.location.href.match(/access_token=([^&]*)/);
const expiresInMatch = window.location.href.match(/expires_in=([^&]*)/);

if (accessTokenMatch && expiresInMatch) {
  accessToken = accessTokenMatch[1];
  const expiresIn = Number(expiresInMatch[1]);

  // This clears the parameters, allowing us tp 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}`;
  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: function(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 })
          }
        );
      });
  });

}
};

export default Spotify;

Here is my App.js code:

import React from ‘react’;
import ‘./App.css’;
import SearchBar from ‘…/SearchBar/SearchBar’;
import SearchResults from ‘…/SearchResults/SearchResults’;
import Playlist from ‘…/Playlist/Playlist’;
import Spotify from ‘…/…/util/Spotify’;

class App extends React.Component {
constructor(props) {
super(props);

    this.state = {
        searchResults: [],
        playlistName: 'My Playlist',
        playlistTracks: []
    };
    this.addTrack = this.addTrack.bind(this);
    this.removeTrack = this.removeTrack.bind(this);
    this.updatePlaylistName = this.updatePlaylistName.bind(this);
    this.savePlaylist = this.savePlaylist.bind(this);
    this.search = this.search.bind(this);
};

addTrack(track) {
    let tracks = this.state.playlistTracks;
    if (tracks.find(savedTrack => savedTrack.id === track.id)) {
        return;
    }
    
    tracks.push(track);
    this.setState({playlistTracks: tracks});
};

removeTrack(track) {
    let tracks = this.state.playlistTracks;
    tracks = tracks.filter(currentTrack => currentTrack.id !== track.id);
    
    this.setState({ playlistTracks: tracks });
};

updatePlaylistName(name) {
    this.setState({playlistName: name});
};

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

search(term) {
    Spotify.search(term).then(searchResults => {
        this.setState({searchResults: searchResults})
    })
}

render() {
    return (
        <div>

Jammming

) } }

export default App;

Hi

Make sure to format the code in your posts when you ask questions because this makes it more readable (especially for debugging), you’ll get help much quicker this way.

First press the Screen Shot 2021-01-03 at 1.42.27 PM button and then paste the code between the tick marks Screen Shot 2021-01-03 at 1.42.33 PM

Did you ever work this out? I have the exact same error, and not having a lot of success in troubleshooting it so far.

hi i’m having the same problem as well. I have followed the walk through video step by step I’m beginning to think its my spotify account thats based in Malaysia. But i was able to get an API key from my account so i shouldn’t be getting any problems right except for my newbie coding skills right? Anyways hope to find a solution soon or to magically appear.

Hi Luci, sorry for the delay. So after a bit of reading under the youtube project walkthrough, I realised somebody had posted this comment -
After Step 73, I feel that they should put an onClick attribute in the search bar’s element. The onClick should equal to {this.search}.
I could not get the app to work until I realised they missed out on telling this.

  • I’m crossing my fingers that this was the same issue you were having as me and that it fixes the error message for you!

Hi, I’ve replied to another comment about the same issue, hopefully it helps you out! There seems to be more conversation about the project on the youtube video than on these forums lol.

i did add the onClick={this.search} attribute towards the button tag in SearchBar.js file. So i guess everyone was bound to run into errors and figure out how to fix it. But i had another issue where but that was a bug from a typo i made.

I take that back. Malaysian Spotify works fine!!

Thanks @connorclements113 ! Yes, the onClick has it working for me now.