Jammming project TypeError: window.SetTimeout is not a function

hi im having an issue with the jamming project i cant seem to resolve the error im not sure what to do can you please advice me what to change so i can move on.

thanks

spotify.js

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

let accessToken;

const Spotify = {
    getAccessToken() {
        if (accessToken) {
            return accessToken;

        }

        // check for access token match
        // window href will get the url we want to get
        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]);
            // This clears the parameter, allowing 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.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(`/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(`/v1/users/${userId}/playlists/${playlistId}/tracks`, {
                    headers:  headers,
                    method: 'POST',
                    body: JSON.stringify({ uris: trackUris })
                })
            })

        })
    }
}

export default Spotify;

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.state = {
      // searchResults: [{name: 'name1', artist: 'artist1', album: 'album1', id: 1},
                      // {name: 'name2', artist: 'artist2', album: 'album2', id: 2},
                      // {name: 'name3', artist: 'artist3', album: 'album3', id: 3}
                    // ],
                      // playlistName: 'My PlayList',
                      // playlistTracks: [{name: 'playlistName1', artist: 'playlistArtist1', album: 'playlistAlbum1', id: 4},
                      // {name: 'playlistName2', artist: 'playlistArtist2', album: 'playlistAlbum2', id: 5},
                      // {name: 'playlistName3', artist: 'playlistArtist3', album: 'playlistAlbum3', id: 6}
                    // ]

                    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() {
    //alert("this method is linked to the button correctly!")
    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 })
    })
  }

  render(){
    return (
      <div>
        <h1>Ja<span className="highlight">mmm</span>ing</h1>
        <div className="App">
          {/* <! -- Add a SearchBar component -->  */}
          <SearchBar onSearch={this.search} />
          <div className="App-playlist">
            {/* <!-- Add a SearchResults component --> */}
            <SearchResults searchResults={this.state.searchResults}
                            onAdd={this.addTrack} />
            {/* <!-- Add a Playlist component --> */}
            <Playlist playlistName={this.state.playlistName} 
                      playlistTracks={this.state.playlistTracks} 
                      onRemove={this.removeTrack} 
                      onNameChange={this.updatePlaylistName}
                      onSave={this.savePlaylist} />
          </div>
        </div>
      </div>
    )
  }
}

export default App;

searchbar.js

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

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.state.term);
    }

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

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

please can you provide me with a solution and if possible with example.
thanks

If I look at the documentation (link) for setTimeout, I can see the the name of the method is cammelCase while you use PascalCase.

hi thanks for the reply that helped but im getting an error now

looking at the spotify api documentation:

400 Bad Request - The request could not be understood by the server due to malformed syntax. The message body will contain more information; see Response Schema.

you could check your network tab, find the 400 and see what response you get back.

hi yes its saying the following

{
“error”: {
“status”: 401,
“message”: “No token provided”
}
}

I haven’t actually done this project, so I have no idea.

but this should enable you to debug your code further? You can check where you get the access token, then check parsing is done correctly (if any parsing is happening), then check if the token is added to request correctly

you could use breakpoints in the console, or use console.log() or use your network tab to see what is send along with the request. There are plenty of options here

hi again but i cant seem to sort this out any help you can offer would be valuable.
thanks

Then I would recommend making a new topic so someone experience in this project can help you out

I would recommend to do what you did earlier: include your full code (remove any sensitive data) and include the exercise url in the new topic you made

this makes it a lot easier to help you (for whoever is helping you)

thanks for the help been struggling with this today