Jamming - This site can't be reached

When I search for an artist, I get redirected to the ‘this site can’t be reached’ page. I’m not sure why or what I’m doing wrong.


Spotify.js

const clientId = 'correct';
const redirectUri = 'http://some-name.surge.sh/';

let accessToken;

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

        // check for an 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, '/');
            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;
            console.log(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 './App.css';
import React from 'react';
import SearchBar from '../SearchBar/SearchBar.js';
import SearchResults from '../SearchResults/SearchResults';
import Playlist from '../Playlist/Playlist';


import Spotify from '../../util/Spotify';

console.log(Spotify.search) 


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

The error you’re getting is a DNS lookup failure

accounts.spotify.com%20%20%20%20%20%20%20%20%20%20%20%20. doesn’t look valid to me, either. :slight_smile:

Thank you for your reply. I’m not exactly sure why it’s coming up like that or why the failure occurs. Any advice would be much appreciated.

I am assuming that http://some-name.surge.sh/ is not the actual value of your redirectUri in your code? In which case, that would be the first place I’d look if you haven’t already.

Thank you for your reply. No, it’s not, but I ensured I used the right value of

redirectUri

for both the code and SpotifiyAPI that’s why I’m unsure of what else it could be