Https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-react-part-ii/modules/fecp-challenge-project-jammming/projects/jammming-prj

https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-react-part-ii/modules/fecp-challenge-project-jammming/projects/jammming-prj
please someone help me to fix this problem i had follow the video of the jamming application project step by step but the when i put a artist term in the input search there’s no results and this is my relevant code :

app.js file : 
import './App.css';
import React from "react";
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);

 }
 search(term) {
Spotify.search(term).then(searchResults=> {
 this.setState({searchResults: searchResults})
})
 

 }
 savePlaylist() {
   let trackUris = this.state.PlaylistTracks.map(track=> track.uri);
   Spotify.savePlaylist(this.state.PlaylistName, trackUris).then(()=> {
     this.setState({
       PlaylistName: 'New playlist',
       PlaylistTracks: []
     })
   })
 }
 
 updatePlaylistName(name) {
  this.setState({PlaylistName: name})
 }

 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});  
 }
 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 playlistTracks={this.state.PlaylistTracks} onRemove={this.removeTrack} onChangeName={this.updatePlaylistName} onSave={this.savePlaylist} />
         </div>
       </div>
     </div>
   )
 }
}
export default App;

Spotify.js file :

let accessToken;
const clientId = 'xxxxxxxxxxxxxxxxxxxxxxxxx';
const redirectUri = 'http://localhost:3000';
const Spotify = {
getAccessToken() {
	if (accessToken) {
		return accessToken;
	}
	let accessTokenMatch = window.location.href.match(/access_token=([^&]*)/);
	let expiresInMatch = window.location.href.match(/expires_in=([^&]*)/);
	if(accessToken && expiresInMatch) {
		accessToken = accessTokenMatch[1];
		const expiresIn = Number(expiresInMatch);
		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;
	}
},
search(term) {
	const accessToken = Spotify.getAccessToken();
if (!accessToken) {
	return;
}
return fetch(`https://api.spotify.com/v1/search?type=track&q=${term}`, {headers: {Authorization: `Bearer ${accessToken}`}}).then(response => {
	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/me/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;```
the searchResults.js file : 

import React from “react”;
import ‘./SearchResults.css’;
import TrackList from ‘…/TrackList/TrackList’;

class SearchResults extends React.Component {
render() {
return (


Results




)
}
}

export default SearchResults;

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.