Stuck on Step 83 in the Jamming Project

Web Development
1

Hello everyone. I hope you are all well. I am currently having an issue in the Jamming App. I took a screenshot of the error here it is right here:

JammmingError
JammmingError991×550 103 KB

Here is my code in the Spotify.js file:

let accessToken;
const clientID = "Hiding client ID for security purposes";
const redirectURI = "http://localhost:3000/";

const Spotify = {
    getAccessToken() {
        if(accessToken) {
            return accessToken;
        }
        const tokenInURL = window.location.href.match(/access_token=([^&]*)/);
        const expiryTime = window.location.href.match(/expires_in=([^&]*)/);

        if(tokenInURL && expiryTime) {
        //Setting access token and expire time variables
            accessToken = tokenInURL[1];
            const expiresIn = Number(expiryTime[1]);
        //Setting the function which will reset the access token when it expires
            window.setTimeout(() => (accessToken = ""), expiresIn * 1000);
        //Clearing the url after the access token expires
            window.history.pushState("Access token", null, "/");
            return accessToken;
        }
        const redirect = `https://accounts.spotify.com/authorize?client_id=${clientID}&response_type=token&scope=playlist-modify-public&redirect_uri=${redirectURI}`;
        window.location = redirect;
    },
    search(term) {
        accessToken = Spotify.getAccessToken();
        return fetch(`https://api.spotify.com/v1/search?type=track&q=${term}`, {
            method: 'GET',
            headers: {Authorization: `bearer ${accessToken}`},
        }).then(response => response.json())
        .then(jsonResponse => {
            if(!jsonResponse) {
                console.log("Response Error");
            }
            
            return jsonResponse.tracks.items.map((t) => ({
                id: t.id,
                name: t.name,
                artist: t.artists[0].name,
                album: t.album.name,
                uri: t.uri

            }));
        })
    }
}

export { Spotify };

And here is the code for App.js:


import React, { useState } from "react";
import styles from "./App.module.css";
import SearchResults from "../SearchResults/SearchResults";
import Playlist from "../Playlist/Playlist";
import SearchBar from "../SearchBar/SearchBar";
import { Spotify } from "../../util/Spotify/Spotify";

function App () {
  const [searchResults, setSearchResults] = useState([{
    name: "example track name 1",
    artist: "example track artist 1",
    album: "example track album 1",
    id: 1
  }, { 
    name: "example track name 2",
    artist: "example track artist 2",
    album: "example track album 2",
    id: 2
  } ]);
  const [playlistName, setPlaylistName] = useState("Example Playlist");
  const [playlistTracks, setPlaylistTracks] = useState([{
    name: "example track name 3",
    artist: "example track artist 3",
    album: "example track album 3",
    id: 3
  }, { 
    name: "example track name 4",
    artist: "example track artist 4",
    album: "example track album 4",
    id: 4
  }]);

function addTrack(track) {
  const existingTrack = playlistTracks.find((t) => t.id === track.id);
  const newTrack = playlistTracks.concat(track);
  if(existingTrack) {
    console.log("Track already exists");
  }
  else {
    setPlaylistTracks(newTrack);
  }

}

function removeTrack(track) {
  const existingTrack = playlistTracks.filter((t) => t.id !== track.id);
  setPlaylistTracks(existingTrack);
}

function updatePlaylistName(name) {
  setPlaylistName(name);
}

function savePlaylist() {
  const trackURIs = playlistTracks.map((t) => t.uri);
}

function search(term) {
  Spotify.search(term).then(result => setSearchResults(result));
  console.log(term);
}

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

export default App;

To specify which part of the code that uses the Spotify.js code in App.js, here it is:

function search(term) {
  Spotify.search(term).then(result => setSearchResults(result));
  console.log(term);
}

And to show the specific code that the error is being thrown at in Spotify.js, here is the search method:

search(term) {
        accessToken = Spotify.getAccessToken();
        return fetch(`https://api.spotify.com/v1/search?type=track&q=${term}`, {
            method: 'GET',
            headers: {Authorization: `bearer ${accessToken}`},
        }).then(response => response.json())
        .then(jsonResponse => {
            if(!jsonResponse) {
                console.log("Response Error");
            }
            
            return jsonResponse.tracks.items.map((t) => ({
                id: t.id,
                name: t.name,
                artist: t.artists[0].name,
                album: t.album.name,
                uri: t.uri

            }));
        })
    }

I’ve been stuck on this for a few hours and have tried everything, but no luck. Any help would be greatly appreciated!