Jammming nothing happens in console and api

Hi,

Didn’t get callback from spotify, when sending “GET” i receive tracks, but no information about this in console and in spotify api. When sending “POST”, after click “Save to spotify”, playlist clears but nothing happens in console and spotify api.

In forum i read many topics thats telling that they have error, but they can see it console, i cant see nothing

Spotify.js

import SearchBar from "../Components/SearchBar/SearchBar";

const clientId = '';
const redirectUri = 'http://detailed-truck.surge.sh/;
let accessToken;

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];
            const expiresIn = Number(expiresInMatch[1]);

            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(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;```

App.js

import React from 'react';
import SearchResults from '../SearchResults/SearchResults';
import './App.css';
import Playlist from '../Playlist/Playlist';
import SearchBar from '../SearchBar/SearchBar';
import Spotify from '../../util/Spotify';

  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        searchResults: [],
        playlistName: 'My list',
        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(this.state.playlistTracks.find(savedTrack => savedTrack === 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})
      });
  }


  componentDidMount() {
    window.addEventListener('load', () => {Spotify.getAccessToken()});
  }

  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;```

Assuming that this is the same code that you published to the surge site, then everything is working as expected. You didn’t log anything to the console in your code and there weren’t any errors when saving the playlist, so nothing was automatically logged either.

I used your surge site to search and save a playlist:

After pressing Save To Spotify, the playlist is on Spotify: