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?

1 Like

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:

was this ever figured out?

Hi All,

I have the same issue, i have followed all the steps up to 95 and when trying to click Search, it keeps coming with the page: "INVALID_CLIENT: Invalid redirect URI and also keep redirecting the page.
issue with the Spotify login not residing in US.

It prompted me only once with the Authorization to login in but nothing happened with the Search action.

It may be the case that i am not residing in US and they have already mentioned in the beginning that they have some learners outside of the United States are unable to create a Spotify account.

I have also added <button className=“SearchButton” onClick={this.search}>SEARCH in SearchBar.js which was needed and not mentioned in the project otherwise when you click on Search button it will have not have any effect as it is not calling the search function you declared.

Can anyone please help with the solution as this is not working and keeps coming as "INVALID_CLIENT: Invalid redirect URI"

I am quite keen to finish the project as this is good understanding of full React App development and without above issue being resolved unable to deploy further.

Please let me know if you have find any solutions.

Thanks in advance :slight_smile:

Naiya

2 Likes

It stinks that we are all having the same issue

Having the same issue…here’s my repo on GitHub: GitHub - fab33150/JammingPlaylist

The first issue you’re having is that your Search button in your SearchBar component doesn’t have a click event:

<button className="SearchButton">SEARCH</button>

After you add a click event so that it can search, then you’ll be able to continue debugging.

1 Like

Thank you for that…I noticed however in the project walkthrough around the 1hr 30 min mark the instructor doesn’t have a click event either. I tried with an onClick = {this.state.search} but that did not work either

You don’t have a property in your state called search, but your SearchBar component does have a search() method that you already wrote (this.search) .

You’re right…

<button onClick={this.props.onSearch} 

I was able to generate search results this way however it now seems that I have the same navigation issue that arraysolver199907 had on Jan 11 in this thread

It should be onClick={this.search} since your search() method passes the term from SearchBar’s state to the this.props.onSearch. Otherwise, you’ll be passing the click event object to this.props.onSearch and you’d never get results.

As for the navigation issue, if you’re talking about being redirected back to the app from Spotify and there being no results, then that’s to be expected with how the instructions were written. It will redirect back to your app with a long URL that includes the access_token and expiration in seconds. Upon searching again, your code in Spotify.getAccessToken() will get the token from the URL. This is the code snippet that does it:

    //check for 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]);
2 Likes

I see…Got it…Thank you!

Did you set the Redirect URI in your Spotify application per Step 81?

I have also added <button className=“SearchButton” onClick={this.search} >SEARCH in SearchBar.js which was needed and not mentioned in the project otherwise when you click on Search button it will have not have any effect as it is not calling the search function you declared.

This solved my problem. Thank you!