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!
