Spotify Capstone Jammming - No Search Results

[brookeemars]

I made it to step 95 in the Jammming Capstone React project and when I search for any artists, etc no results show up or even load.

Spotify.js

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

let accessToken;
const clientId = '3e78882a1a46417194786a2af5adc65b'; 
const redirectUri = 'http://localhost:3000/';

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

        //check for access token match
        const accessTokenMatch = window.location.href.match(/accessToken=([^&]*)/);
        const expiresInMatch = window.location.href.match(/expires_in=([^&]*)/);

        if (accessTokenMatch && expiresInMatch) {
            accessToken = accessTokenMatch[1];
            const expiresIn = Number(expiresInMatch[1]);
            //Clear the parameters from the URL, so the app doesn’t try grabbing the access token after it has expired
            window.setTimeout(() => accessToken = '', expiresIn * 1000);
            window.history.pushState('Access Token', null, '/');
        } 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 './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 (this.state.playlistTracks.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;

Searchbar.js

import React from 'react';
import './SearchBar.css';


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

    this.state = {
      term:''
    }

    this.search = this.search.bind(this);
    this.handleTermChange = this.handleTermChange.bind(this);
  }

  search(){
    this.props.onSearch(this.state.term);
  }

  handleTermChange(event) {
    this.setState({ term: event.target.value });
  }

    render(){
      return (
      <div className="SearchBar">
  <input placeholder="Enter A Song, Album, or Artist" onChange= {this.handleTermChange} />
  <button className="SearchButton" onClick={this.search} >SEARCH</button>
</div>)}
};

export default SearchBar;

I tried the recommendations in the other posts that were having similar issues (i.e. adding an event handler into the Searchbar.js file) and still can’t seem to get it to work.

I took about a month away from coding and feel like I have to relearn everything all over again. Even prior to taking time away, I was still having to refer to the ‘get unstuck’ video for most of the tasks.