Jammer - Spotify API React.JS - Deployed Error

Hey everyone,

Im new to coding and have just completed the Jammer project, and deployed the app via surge. I’ve tested the deployed version on multiple accounts and keep running into an error.

When other users (“beside’s myself”) attempt to search tracks a GET error prompts on the console.

However, when using the deployed version via my own spotify account, I am able to return tracklist and add to playlist for my account, but not anyone else’s for some reason.

Think there may be an issue with how im treating the accessToken, but I cannot figure out why the deployed version works on my accounts but no one else’s. Any thoughts on this would be greatly appreciated.

Thanks

let clientId = ""; //redacted
let redirectUri = "http://project-spotify.surge.sh/"
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]);
            
            window.setTimeout(() => accessToken = "", expiresIn * 1000);
            window.history.pushState("Access Token", null, "/");
            // This clears the parameters, allowing us to grab a new access token when it expires. 
            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(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;
import './App.css';
import SearchBar from "../SearchBar/SearchBar"
import SearchResults from "../SearchResults/SearchResults"
import React from 'react';
import Playlist from "../Playlist/Playlist"
import Spotify from '../../util/Spotify';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchResults: [],
      playlistName: "New 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

    let filteredTracks = tracks.filter(removedTrack => removedTrack.id !== track.id)
  
    this.setState({
      playlistTracks: filteredTracks
    })
  }

  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>
        <h1>Ja<span className="highlight">mmm</span>ing</h1>
        <div className="App">
          <SearchBar 
            onSearch={this.search}/>
          <div className="App-playlist">
            <SearchResults 
              searchResults={this.state.searchResults} 
              onAdd={this.addTrack} />
            <Playlist 
              playlistName={this.state.playlistName} 
              playlistTracks={this.state.playlistTracks}
              onRemove={this.removeTrack}
              onNameChange={this.updatePlaylistName} 
              onSave={this.savePlaylist}/>
          </div>
        </div>
      </div>
    );
  }
}
  


export default App;


codecademyforumsbetter). That way you’ll be helping everyone – helping people to answer your question and helping others who are stuck to find the question and answer! :slight_smile: