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;