Jamming is not Searching (results dont render)

[agustinlevental31284]

Hi! y did my work step by step to the 95 step , and when I search a song, first ask my for Spotify
permissions , then a token is put on my url

and when I press for another time Search, nothing happens, results are not rendered, and token dissapear

.
I think that its a Spotify.js problem, so im going to post it without my client Id. can anybody please help me ? Im not good at using the console to know what is the problem
PD : ignore all others comments in codebyte, they are for my own .

const clientId = //MY CLIENT ID//;

const redirectUri = “http://localhost:3000”;

let accessToken;

const Spotify = {

getAccessToken () {

    if (accessToken) {

        return accessToken;

    }

//ahora vamos a buscar el token con un metodo loco que te ense;an en code cademy

const accesTokenMatch = window.location.href.match(/access_token=([^&]*)/)

const expiresInMatch = window.location.href.match(/expires_in=([^&]*)/)

if (accesTokenMatch && expiresInMatch) {

//esto es raro y no lo entiendo



    accessToken = accesTokenMatch [1];

    const expiresIn = Number (expiresInMatch[1]);

   

   window.setTimeout (() => (accesTokenMatch = ""), expiresIn *1000);

   window.history.pushState ("Acces Token", null , "/");

   return accessToken;

    //no entiendo que paso ahi

}

else {

    const accesUrl = `https://accounts.spotify.com/authorize?client_id=${clientId}&response_type=token&scope=playlist-modify-public&redirect_uri=${redirectUri}`

    window.location = accesUrl;

}

} ,

search (term) {

const accesToken = Spotify.getAccessToken() ;

return fetch (https://api.spotify.com/v1/search?type=track&q=${term} , {

headers: { Authorization: `Bearer  + ${accesToken}`} }

).then(response =>{

return response.json();

// dice que la respuesta de la fetch recuest se transforme en un archivo json

}).then (jsonResponse => {

if (!jsonResponse.tracks)

// si el archivo json no tiene tracks

{

return ;

// returnea un array vacio

}

// sino mapea un array con las propiedades de esos tracks

return jsonResponse.tracks.items.map (track => ({

id: track.id,

name: track.name,

artist: track.artist [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;

[robinsonzapata]

Hi, I have the same problem, with authentication.

Couldn’t find authed_user when parsing the JSON for PasswordVault Field Checker.
do you see this when you inspect the page?

[agustinlevental31284]

I correct some typos , but still doesnt work! . When I press search, the array of searchResults state is empty! like if Json wasnt bring from the api .

Here is my

import React from ‘react’;

import {SearchBar} from ‘./SearchBar/SearchBar.jsx’

import {SearchResults} from “./SearchResults/SearchResults.jsx”

import {Playlist} from “./Playlist/Playlist.jsx”;

import app from “./app.css”;

import Spotify from “./Spotify”;

export class App extends React.Component {

constructor (props) {

super(props)

this.state = { searchResults: [] ,

playlistName : {name: “My Playlist”},

playlistTracks: [

]

}

// --------------------------------- BIND-------------------------------------------

this.addTrack = this.addTrack.bind(this)

this.removeTrack= this.removeTrack.bind (this)

this.updatePlaylistName= this.updatePlaylistName (this)

this.savePlaylist = this.savePlaylist.bind (this)

this.search = this.search.bind (this)

// --------------------------------- BIND-------------------------------------------

}

addTrack (track) {

let tracks = this.state.playlistTracks;

if (tracks.find(element =>  

 element.id === track.id)) {

  return }

   tracks.push(track)

  this.setState({playlistTracks: tracks})



};

removeTrack (track) {

  let tracks = this.state.playlistTracks;

  tracks = tracks.filter(element => element.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 onSearch= {this.search}></SearchBar>

 

  <div className="App-playlist">

<Playlist playlistName={this.state.playlistName}

playlistTracks= {this.state.playlistTracks}

onRemove = {this.removeTrack}

tracks= {this.state.searchResults}

onNameChange= {this.updatePlaylistName}

onSave= {this.savePlaylist}> </Playlist>



  </div>

  </div>



</div>

)

}

}

---

and here is my Spotify .
const clientId = “ca7a5a4ef3214cb0adb569b6433e64b3”;

const redirectUri = “http://localhost:3000”;

let accessToken;

const Spotify = {

getAccessToken () {

    if (accessToken) {

        return accessToken;

    }

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 , "/");

   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();

// dice que la respuesta de la fetch recuest se transforme en un archivo json

}).then (jsonResponse => {

if (!jsonResponse.tracks)

// si el archivo json no tiene tracks

{

return ;

// returnea un array vacio

}

// sino mapea un array con las propiedades de esos tracks

return jsonResponse.tracks.items.map (track => ({

id: track.id,

name: track.name,

artist: track.artist [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;

---

CAN ANYBODY HELP ME PLEASE ?

[agustinlevental31284]

here is my

import React from ‘react’;

import Searchbar from “./Searchbar.css”

export 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.props.term)

}

handleTermChange (event) {

this.setState( {term: event.target.value })

}

render () { return (

SEARCH

)

}

}