Jammming is not searching

When I press search, the program does not search. Note, I DID provide the search method to an onClick attribute of a button in SearchBar.js.What could be wrong in my code?
This is 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 Title',
      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) {
    const tracks = this.state.playlistTracks;
    if(tracks.find(el => el.id === track.id))
      return;
    tracks.push(track);
    this.setState({playlistTracks: tracks});
  }

  removeTrack(track){
    let tracks = this.state.playlistTracks;
    tracks = tracks.filter(cur => cur.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 search={this.search} />
              <div className="App-playlist">
              <SearchResults searchResults={this.state.searchResults} onAdd={this.addTrack} onSearch={this.search} /> 
              <Playlist title={this.state.playlistName} 
                        tracks={this.state.playlistTracks} 
                        onRemove={this.removeTrack} 
                        onNameChange={this.updatePlaylistName} 
                        onSave={this.savePlaylist} />
              </div>
          </div>
      </div>
    );
  }
}

export default App;

This is Spotify.js

let accessToken;

const clientId = 'a406e3205d614f7599b819f88f9cf1f2';

const redirectUri = 'http://localhost:3000/';

const Spotify = {

    getAccessToken() {

        if(accessToken)

            return accessToken;

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

            window.setTimeout(() => accessToken = '', expiresIn * 1000);

            window.history.pushState('Access Token', null, '/');

            return accessToken;

        } else {

            window.location = `https://accounts.spotify.com/authorize?client_id=${clientId}&response_type=token&scope=playlist-modify-public&redirect_uri=${redirectUri}`;

        }

    },

    search(term) {

        const token = Spotify.getAccessToken();

        return fetch(`https://api.spotify.com/v1/search?type=track&q=${term}`, {headers: {Authorization: `Bearer ${token}`}}).then(response => response.json())

            .then(responseJson => {

                if(!responseJson.tracks)

                    return [];

                return responseJson.tracks.items.map(track => ({id: track.id, name: track.artists[0].name, album: track.album.name, uri: track.uri}));

            });

    },

    savePlaylist(name, uris) {

        if(name && uris.length) {

            const token = Spotify.getAccessToken();

            const headers = {Authorization: `Bearer ${token}`};

            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: uris})

                              })

                            })

            });

        }

    }

};

export default Spotify;

Thank you in advance!

I am also having the SAME problem in jammming after I provided the onClick={this.search} attribute to <SearchBar />.

I’m also having the same issue. Have either of you had any luck resolving it?

same problem. no error or anything but i am not getting any search results and the console shows this:
“[HMR] Waiting for update signal from WDS…”. has anybody solved it?

same problem here, I am so sick of it now.

Many different problems could cause the search to not work. Do you mind posting your code?

I’ve noticed that when I do the first search after logging in/linking my spotify account that it works. However, if I refresh the page or load the page any subsequent visit, I have to do one search which clears the input field and changes the URL by appending the access_token to it, and then the search will work without issue. I then navigated to the codecademy Jammming link and it does the same thing. I believe that this is a design flaw and something that should be addressed. If I find a solution I will reply to this thread with it.

I’m thinking it’s a navigation issue or something with the way the access token is handled. Like are we not actually getting an access token until after we click the search button? If I’m reading/understanding the Spotify.js code correctly, then that’s what it looks like to me.

URL BEFORE clicking the “Search” button:

http://jammming.s3-website-us-east-1.amazonaws.com/

URL AFTER clicking the “Search” button:

http://jammming.s3-website-us-east-1.amazonaws.com/#access_token=BQA_pjgNX8ZHm0O7KIS5otejXj7nOKg_qbwCjVQ6-fuOGsyFckRX3mGeUlWnmNxAKoN02H8wxgDHes_Hyqs8jrPX7RrXiDVBVgyFhhQQmQTK74hPiiwBpj4oj7qdaV_Ozpa03Bx6RqWTf80WmF6SexAuy1zDpJYnuWtPOvVn_2mTHtWZzm5LsTl-IQbjKOI&token_type=Bearer&expires_in=3600

URL AFTER the 2nd search:

http://jammming.s3-website-us-east-1.amazonaws.com/

My project solution thus far: