Jamming project help

Hi just finished the jamming project but I am getting authentication errors but not sure how to fix this problem. I am new to react! sorry. I am getting this on the inspect element.
any help appreciated

Couldn’t find authed_user when parsing the JSON for PasswordVault Field Checker.
2App.js:53 Uncaught TypeError: Cannot read properties of undefined (reading ‘then’)
at App.savePlayList (App.js:53:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
at invokeGuardedCallback (react-dom.development.js:4056:1)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070:1)
at executeDispatch (react-dom.development.js:8243:1)
at processDispatchQueueItemsInOrder (react-dom.development.js:8275:1)
at processDispatchQueue (react-dom.development.js:8288:1)
at dispatchEventsForPlugins (react-dom.development.js:8299:1)
at react-dom.development.js:8508:1

Hi,
the two async function in App.js you’re using are Spotify.savePlaylist() and Spotify.search(). Which of those are you calling on line 53 of App.js? It returns undefined.

this is my app.js
thank you for replaying.

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

  }

  addTrack(track){
let tracks = this.state.playlistTracks;
if(tracks.find(savedTrack => savedTrack.id === track.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});
  }

  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}/>
    <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;

In line 53 is the Spotify.savePlaylist
savePlayList

The code of App.js doesn’t help here as the error occurs in the savePlaylist function in Spotify.js. Please post that code and make sure it is properly formatted.

Please format that code in order to improve readability:

ok sorry is the first time I use this portal in codecademy.

You can still edit your previous posts. Just mark all the code and then press the </>

hahaha I learn something today, thank you. appreciate your time and help.

1 Like

You’re welcome. Does that mean you found the bug in your code or are you just referring to the formatting of the code here?

no I wish just the formatting the code. I still looking to find the error.

One thing I notice is that you have a problem with your scope:
You nest the processing of the results you get from data fetches. Make sure that all .then() are on the same level like:

fetch()
.then()
.then()
.then()

What you’re doing is

fetch()
.then()
.then( .then())

It will be easier to find if you break the line before the dot and start each new line with .then()

very good point, check all ( and all match up ok but still not working.

If I replace my code with yours in my App and correct the scope as described, it works fine.
But you get search results, which means that your authorization works fine, right?

if you get results in your app then yes, but with me is complaining about authorization?
I think the problem is authentication.

I get this when I click search

Couldn’t find authed_user when parsing the JSON for PasswordVault Field Checker.

The error message you posted does not complain about authorization. And if you get search results, you’re authorized. That’s why I asked if you do get search results?

ok, no I don’t get search results.

(Sorry, missed the first line of the error message.)
Did you edit the settings in the Spotify developer account? You need to add the localhost as an authorized address for the redirect.

Yes I did changed it to localhost on spotify.

Ok then we need to inspect the getAccessToken function.
Logging the access token is a good idea, but you have to log it before your return statement. Otherwise it will never reach the console.log: