I’m currently stuck on step 94 of the Create a Playlist App With the Spotify API (Part One) project.
When I enter something into the search field and click the search button, nothing happens. When I check the console, I don’t see any errors to help indicate where the code isn’t working.
- I’ve gone over the walkthrough video step by step. So far, my code seems identical to the instructor’s code, as far as the App.js and Spotify.js components go. I’m assuming the issue is there, but I could be wrong.
- I’ve tried different browsers.
- I’ve tried it on different computers in different buildings, just to make sure it isn’t machine or network related.
No luck.
Here’s the link to the code on Github. I’ve scrubbed the clientId for security purposes.
For convenience, here’s the Spotify.js code
const clientId = ""; //removed for security;
const redirectUri = "http://localhost:3000/";
let accessToken;
const Spotify = {
getAccessToken() {
if (accessToken) {
return accessToken;
}
//check for an 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]);
window.setTimeout(() => (accessToken = ""), expiresIn * 1000);
window.history.pushState("Access Token", null, "/"); //code is used to help you wipe the access token and URL parameters
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();
return fetch(`https://api.spotify.com/v1/search?type=track&q=${term}`, {
headers: { Authorization: `Bearer ${accessToken}` },
})
.then((response) => {
return 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/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;
And here’s the App.js code.
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: [],
};
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);
}
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) {
console.log(term);
Spotify.search(term).then((searchResults) => {
this.setState({ searchResults: searchResults });
});
}
addTrack(track) {
let tracks = this.state.playlistTracks;
if (tracks.find((savedTrack) => savedTrack.id === tracks.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 });
}
updatePlaylistName(name) {
this.setState({ playlistName: name });
}
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}
onRemove={this.removeTrack}
onNameChange={this.updatePlaylistName}
onSave={this.savePlaylist}
/>
</div>
</div>
</div>
);
}
}
export default App;
Appreciate any help I can get. Thanks!