Jamming not searching/ type erros

Jamming project

hey guys, ive been going through the forms trying to figure this out. So my issue is that after I hit search im not getting any results. Also im getting this error…

Unhandled Rejection (TypeError): Failed to execute ‘fetch’ on ‘Window’: Invalid value

search

C:/Users/Mark/Desktop/projects/jamming/src/util/Spotify.js:40

  37 | },  38 | search(term) {  39 |     const accessToken = Spotify.getaccessToken;> 40 |     return fetch(`https://api.spotify.com/v1/search?type=track&q=${term}`, {  41 |         headers: {  42 |             Authorization: `Bearer ${accessToken}`  43 |         }

heres my code, thank you ahead of time if you figure this out before I do! im pretty sure the rest of my code is good but there may be something in one of these files im misssing.
Spotify.js

const clientID ='bdd3c69f5f624329a77ec00d5bd839f3';
const redirectUri = 'http://localhost: 3000/';




let accessToken;

const Spotify = {
getaccessToken(){
    if (accessToken) {
        return accessToken;
    } 

//Check for 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];
     accessToken = accessToken.replace('=', '');
     const expiresIn = Number(expiresInMatch[1]);
      
     //this clears the parameter, allowing us to grab a new access TOken when it expires.
     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()
    }).then(jsonResponse => {
        if (!jsonResponse.tracks) {
            return [];
        }
        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.legnth) {
        return;
    }

    const accessToken = Spotify.getaccessToken();
    const headers = {Authorization: `Bearers ${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;```

SearchBar.js
```import React from 'react';
import './SearchBar.css'

 class SearchBar extends React.Component {
constructor(props){
    super(props)

    this.search= this.search.bind(this);
    this.handleTermChange = this.handleTermChange.bind(this);
}

    search(){
        this.props.onSearch(this.state.term)
    }

    handleTermChange(e) {
this.setState({
    term: e.target.value
})
    }

    render() {
        return (
            <div className="SearchBar">
  <input placeholder="Enter A Song, Album, or Artist" onChange={this.handleTermChange}/>
  <button className="SearchButton" onClick={this.search}>SEARCH</button>
</div>
        )
    }
}


export default SearchBar```

app.js
```import React from 'react';
import '../App/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 = {
      //Hardcoded results for this.state.searchResults containing array of track objects
      searchResults: [],
      playlistName: 'My Hot Jammz',
      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) {
if (this.state.playlistTracks.find(savedTrack => 
  savedTrack.id === track.id)) {
    return;
  }
  this.setState({
    playlistTracks: [...this.state.playlistTracks, track]
  })
}

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.url);
 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">
          {/*Pass the state of the App component’s searchResults to the SearchResults component*/}
        <SearchResults searchResults={this.state.searchResults} onAdd={this.addTrack} />

        {/*inside of Playlist component we pass down the state of playlistName & playlistTracks*/}
        <Playlist playlistName={this.state.playlistName}
        playlistTracks={this.state.playlistTracks} onRemove={this.removeTrack} onSave={this.savePlaylist} />
    </div>
  </div>
</div>
    )
  }
}

export default App;

I’m not sure if it’s the root cause of that specific error message, but the first thing I notice is the extra space in the redirect:

const redirectUri = 'http://localhost: 3000/';

The next thing I noticed is:

const accessToken = Spotify.getaccessToken;

Is this what you meant to assign? You could try adding a console.log() here to make sure it’s the value you’re expecting.

Click for extra hint

You’re not calling the method because it’s missing the ()

There are other things as well, but hopefully something above will get you past the specific error you posted about so you can continue the debugging process.