I am stuck on step 88 of Jamming project. It requires me to update state of App.js with ‘the value resolved from Spotify.search()
‘s promise.’ I receive the correct value inside of Spotify.js function but I don’t know how to pass it to the App.js state.
Here is my code:
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.addTrack = this.addTrack.bind(this);
this.removeTrack = this.removeTrack.bind(this);
this.changePlaylistName = this.changePlaylistName.bind(this);
this.savePlaylist = this.savePlaylist.bind(this);
this.search = this.search.bind(this);
this.state = {
searchResults: [{
id: 1,
name: 'T.N.T',
artist: 'AC/DC',
album: 'T.N.T',
uri: ''
},
{
id: 2,
name: 'Girls Got Rhythm',
artist: 'AC/DC',
album: 'Highway to ■■■■',
uri: ''
},
{
id: 3,
name: 'Green river',
artist: 'Creedence Clearwater Revival',
album: 'GR',
uri: ''
},
{
id: 4,
name: 'Some song',
artist: 'Good artist',
album: 'The best album',
uri: ''
}],
playlistName: 'Awesome mix',
playlistTracks:[{
id: 5,
name: 'Rock you like hurricane',
artist: 'Scorpions',
album: 'Good album',
uri: ''
},
{
id: 6,
name: 'Pretty fly',
artist: 'The Offspring',
album: 'Americana',
uri: ''
},
{
id: 7,
name: 'By the way',
artist: 'Red Hot Chili Peppers',
album: 'Americana',
uri: ''
},
{
id: 8,
name: 'Давай вернёмся',
artist: 'Чайф',
album: 'Депрессивный альбом',
uri: ''
}]
}
}
//Add track to playlist
addTrack(track) {
if (this.state.playlistTracks.find(savedTrack => savedTrack.id === track.id)) {
return;
} else {
const currentList = this.state.playlistTracks;
currentList.push(track)
this.setState({ //change current state
playlistTracks: currentList
})
}
}
removeTrack(track) {
const newPlaylistTracks = this.state.playlistTracks.filter(savedTrack => savedTrack.id !== track.id);
this.setState({
playlistTracks: newPlaylistTracks
})
}
changePlaylistName(newName) {
this.setState({
playlistName: newName
});
}
savePlaylist() {
const trackURIs = this.state.playlistTracks.map(track => track['uri']);
}
search(searchTerm) {
Spotify.search(searchTerm);
}
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
playlistName={this.state.playlistName}
playlistTracks={this.state.playlistTracks}
onNameChange={this.changePlaylistName}
onRemove={this.removeTrack}
onSave={this.savePlaylist}
/>
</div>
</div>
</div>
);
}
}
export default App;
Spotify.js
let userAccessToken;
let expiresIn;
const tokenRegEx = /access_token=([^&]*)/; //regular expression to search for user's access token in the URL
const expiresInRegEx = /expires_in=([^&]*)/; //regular expression to search for access token expiration time in the URL
const clientID = '544070faa1314ec4ac27a1ee3eab3049';
const redirectURI = 'http://localhost:3000/';
const Spotify = {
getAccessToken() {
if (userAccessToken) {
return userAccessToken;
} else if (window.location.href.match(tokenRegEx)) {
userAccessToken = window.location.href.match(tokenRegEx)[1];
expiresIn = window.location.href.match(expiresInRegEx)[1];
//wiping out browser's history
window.setTimeout(() => userAccessToken = '', expiresIn*1000);
window.history.pushState('Access Token', null, '/');
} else {
window.location = `https://accounts.spotify.com/authorize?client_id=${clientID}&response_type=token&scope=playlist-modify-public&redirect_uri=${redirectURI}`
}
},
search(term) {
this.getAccessToken();
fetch(`https://api.spotify.com/v1/search?type=track&q=${term}`,
{
headers: { 'Authorization': `Bearer ${userAccessToken}` }
})
.then(response => response.json())
.then(response => {
if (response.tracks.items.length === 0) {
return []
} else {
let tracks = response.tracks.items.map(track => {
return {
id: track.id,
name: track.name,
artist: track.artists[0].name,
album: track.album,
uri: track.uri
}
});
return tracks;
}
})
.catch(err => console.log(err) );
}
}
export default Spotify;
On line 44 of Spotify.js you will see this string ‘return tracks’ - this is the result of the promise. How do I pass it to the App.js state?