please someone help me to fix my code in the jamming raeact app project when i make a song or singer in the input searchBar and i click the search button nothing happen please help me
this is my code :
the app.js file :
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 playlist",
playListTracks: [{name: "playListname1", artist: "playListArtist1", album: "playListAlbum1", id:4},
{name: "playListname2", artist: "playListArtist2", album: "playListAlbum2", id:5},
{name: "playListname3", artist: "playListArtist3", album: "playListAlbum3", id:6}]
}
this.addTrack = this.addTrack.bind(this);
this.removeTrack = this.removeTrack.bind(this);
this.updatePlaylistName = this.updatePlaylistName.bind(this);
this.savePlaylistUris = this.savePlaylistUris.bind(this);
this.search = this.search.bind(this);
}
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})
}
search(term) {
Spotify.search(term).then(searchResults=> {
this.setState({searchResults: searchResults})
})
}
savePlaylistUris() {
const trackUris = this.state.playListTracks.map(track=> track.uri);
Spotify.savePlaylist(this.state.playListName, trackUris).then(()=> {
this.setState({
playlistName: 'New Playlist',
playListTracks: []
})
})
}
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.savePlaylistUris} />
</div>
</div>
</div>
)
}
}
export default App;
the spotify.js file :
const clientId = '3d1a15ec7bc94fc28137d5e2528ac51c';
const redirectUri = 'http://localhost:3000';
let accessToken;
const Spotify = {
getAccessToken() {
if(accessToken) {
return accessToken;
}
//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]);
//this clears the parameter, allowing us to grab a new access token when it expires.
window.setTimeout(()=> accessToken = '', expiresIn * 1000);
window.history.pushState('Access Token', null, '/')
}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();
return fetch(`https://api.spotify.com/v1/search?type=track&q=${term}`, {
headers: {Authorisation: `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=> {
return 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;
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 searcBar.js file:
import React from "react";
import "./SearchBar.css";
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 onChange={this.handleTermChange} placeholder="Enter A Song, Album, or Artist" />
<button className="SearchButton" onClick={this.search}>SEARCH</button>
</div>
)
}
}
export default SearchBar;