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