Jammming Step 95 Showing no Search Result from Spotify

Hi There
Regarding : Jammming step 95 following video

I have followed the video few times to check what i am mssing or doing wrong but for some reason i am unabel to see any search result from Spotify. I will appreciate if someone can have a look and what i am missing or doing wrong.

Before live search adding and deleting functionality was working fine.

Following is my code
App.js

import React from '../../../node_modules/react';
import { SearchBar } from '../SearchBar/SearchBar';
import {SearchResults} from '../SearchResults/SearchResults';
import {PlayList} from '../PlayList/PlayList';

import './App.css';

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 playList = this.state.playlistTracks;
    if (playList.find(savedTrack => savedTrack.id === track.id)){
      return;
    } 
    playList.push(track);
    this.setState({ playlistTracks: playList});
  }

  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){
    console.log(term);
    Spotify.search(term).then(tracks => {
      this.setState({searchResults: tracks})
    })
  }


  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;

Spotify.js

const clientId = '6429bac60722404e9192************';
const redirectUri = 'http://localhost:3000';

let accessToken;

const Spotify = {
    getAccessToken(){
        //alert('Spotify');
        if(accessToken){
            return accessToken;
        }
        //check access token
        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]);
        // clear parameter to grab a new access token
            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();
        console.log(accessToken);
        return fetch(`https://api.spotify.com/v1/search?type=track&q=${term}`, 
        { headers: { 
            Authorization: `Bearer ${accessToken}`
        }
        }).then(response => { 
            console.log(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;

SearchBar.js

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

export 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">SEARCH</button>
            </div>
        )
    }
}

SearchResults.js

import React from 'react';
import {TrackList} from '../TrackList/TrackList';
import './SearchResults.css';

export class SearchResults extends React.Component {
    render() {
        return (
            <div className="SearchResults">
                <h2>Results</h2>
                <TrackList tracks={this.props.searchResults} onAdd={this.props.onAdd} isRemoval={false} />
            </div>
        )
    }
}

PlayList.js

import React from 'react';
import {TrackList} from '../TrackList/TrackList';
import './PlayList.css';

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

        this.handleNameChange = this.handleNameChange.bind(this);
    }

    handleNameChange(event){
        this.props.onNameChange(event.target.value);
    }
    render() {
        return (
            <div className="Playlist">
                <input defaultValue={"New Playlist"} 
                onChange={this.handleNameChange} />

                <TrackList tracks={this.props.playlistTracks} 
                onRemove={this.props.onRemove} isRemoval={true} />

                <button className="Playlist-save" 
                onClick={this.props.onSave}>SAVE TO SPOTIFY</button>
            </div>
        )
    }
}   

TrackList.js

import React from 'react';
import {Track} from '../Track/Track';
import './TrackList.css';

export class TrackList extends React.Component {
    render() {
        return ( 
                <div className="TrackList">
                    { this.props.tracks.map(track => {
                        return <Track track={track} 
                            key={track.id} 
                            onAdd={this.props.onAdd} 
                            onRemove={this.props.onRemove}
                            isRemoval={this.props.isRemoval} />
                        
                        })
                    }
                
                </div>
               )
    }
}

Track.js

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

export class Track extends React.Component {
    constructor(props){
        super(props);
        this.addTrack = this.addTrack.bind(this); 
        this.removeTrack = this.removeTrack.bind(this);
    }

    renderAction(){
        if (this.props.isRemoval){
            return <button className="Track-action" onClick={this.removeTrack}>-</button>
        } else {
            return <button className="Track-action" onClick={this.addTrack}>+</button>
        }
    }

    addTrack(){
        this.props.onAdd(this.props.track);
    }

    removeTrack(){
        this.props.onRemove(this.props.track);

    }

    render() {
        return (
            <div className="Track">
                <div className="Track-information">
                    <h3>{this.props.track.name}</h3>
                    <p>{this.props.track.artist} | {this.props.track.album}</p>
                </div>
                {this.renderAction()}
            </div>
        )
    }
}

Kind Regards
Atif

Hi! Pretty new here, but I had the same problem. The button in your SearchBar component (in SearchBar.js) doesn’t do anything yet. I think there is a step missing from the instructions because everyone had this problem and no one could find out where in the instructions it told you to add this.

You just need to add an onClick attribute that’s equal to {this.search} to jumpstart the functionality of the button.

Hope this helps!