Https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-react-part-ii/modules/fecp-challenge-project-jammming/projects/jammming-prj

please someone help me to fix my code in the jamming raeact app project when i make a song or singer in the input searchBar and i click the search button nothing happen please help me
this is my code :
the app.js file :

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: [{name: "playListname1", artist: "playListArtist1", album: "playListAlbum1", id:4},
         {name: "playListname2", artist: "playListArtist2", album: "playListAlbum2", id:5},
         {name: "playListname3", artist: "playListArtist3", album: "playListAlbum3", id:6}]
    }
    this.addTrack = this.addTrack.bind(this);
    this.removeTrack = this.removeTrack.bind(this);
    this.updatePlaylistName = this.updatePlaylistName.bind(this);
    this.savePlaylistUris = this.savePlaylistUris.bind(this);
    this.search = this.search.bind(this);
  }
 updatePlaylistName(name) {
this.setState({playListName: name})
}
  addTrack(track) {
      let tracks = this.state.playListTracks;
    if(tracks.find(savedTrack=> savedTrack.id === track.id)) {
        return;
    }
      tracks.push(track);
      this.setState({playListTracks: tracks})
  }
  search(term) {
    Spotify.search(term).then(searchResults=> {
      this.setState({searchResults: searchResults})
    })
  }
   savePlaylistUris() {
     
     const trackUris = this.state.playListTracks.map(track=> track.uri);
     Spotify.savePlaylist(this.state.playListName, trackUris).then(()=> {
       this.setState({
       playlistName: 'New Playlist',
       playListTracks: []
     })
     })
   }
  removeTrack(track){
  let tracks = this.state.playListTracks;
  tracks = tracks.filter(currentTrack=>currentTrack.id !== track.id);
this.setState({playListTracks: tracks})  
  }
  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 playListTracks={this.state.playListTracks} onRemove={this.removeTrack} onChangeName={this.updatePlaylistName} onSave={this.savePlaylistUris} />
          </div>
        </div>
      </div>
    )
  }
}


export default App;

the spotify.js file :

const clientId = '3d1a15ec7bc94fc28137d5e2528ac51c';
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];
 	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, '/')
 }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: {Authorisation: `Bearer ${accessToken}`

     }
 }).then(response=> {
     response.json();
 }).then(jsonResponse=> {
     if(!jsonResponse.tracks) {
         return [];
     }
    return jsonResponse.tracks.items.map(track=> ({
         id: track.id,
         name: track.name,
         artist:track.artists[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=> {
             return 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;
             return fetch(`https://api.spotify.com/v1/users/${userId}/playlists/${playlistId}/tracks`,{
                 headers: headers,
                 method: 'POST',
                 body: JSON.stringify({uris: trackUris})
             })
         })
     }

 }

export default Spotify;

the searcBar.js file:

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

export default SearchBar;

https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-react-part-ii/modules/fecp-challenge-project-jammming/projects/jammming-prj

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.