Jamming application

this application is used to get tracks from spotify then add these tracks to your playlist and make name to the playlist and resend your playlist to save it in your spotify api count .i do all the step and the application work well but i had a problem to adding challenge in my app so the challenge is to do a loading screen in my app while the playlist saved in the spotify so there’s my main files for this extra feature :

app file :

import React from "react";
import './App.css';
import SearchResults from "../SearchResults/SearchResults";
import Playlist from "../Playlist/Playlist";
import SearchBar from "../SearchBar/SearchBar";
import Spotify from "../../util/spotify";



class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
    
      searchResults: [{name:"FirstSong", artist:"artistName", album:"album1", id:1}, {name:"secondSong", artist:"artistName", album:"album1", id:2}, 
      {name:"thirdSong", artist:"artistName", album:"album1", id:3}],
      playlistName: "My Playlist",
      playlistTracks: [{name:"fourthSong", artist:"artistName2", album:"album1", id:4}, {name:"fifthSong", artist:"artistName2", album:"album1", id:5}, 
      {name:"sixthSong", artist:"artistName2", album:"album1", id:6}],
       
    }
    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);
   }

  
     
search (term) {
    Spotify.search(term).then(result => this.setState({
      searchResults: result
    }))

   }
     updatePlaylistName (name){
 this.setState ({
  playlistName: name
 })
}
  removeTrack (track) {
    const newPlaylistTrack = this.state.playlistTracks.filter(trck => trck.id !== track.id);
    this.setState({
      playlistTracks: newPlaylistTrack
    })

  }


    savePlaylist () {
      const trackUris = this.state.playlistTracks.map(track => track.uri)
      Spotify.savePlaylist(this.state.playlistName, trackUris).then(()=> {
        this.setState({
          
             playlistName: "New Playlist",
           playlistTracks: [],
        
        
      })
     
       
        })
    }
      
        
  addTrack (track) {
    if (this.state.playlistTracks.find(trackIn => track.id === trackIn.id)) {
      return
    }
    this.setState ({
      playlistTracks: [...this.state.playlistTracks, track]
    })
  }


 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} isRemoval={false} />
            <Playlist playlistName={this.state.playlistName} playlistTracks={this.state.playlistTracks} isRemoval={true} onRemove={this.removeTrack} onNameChange={this.updatePlaylistName} onSave={this.savePlaylist} />
          </div>
        </div>
      </div>
        
    )
 }
}
export default App;

the playlist file :

import "./Playlist.css";
import TrackList from "../TrackList/TrackList";
import ReactLoading from "react-loading";



class Playlist extends React.Component {
	constructor (props) {
		
		super(props);
		this.state = {
			isSaved: true
		}
		this.handleNameChange = this.handleNameChange.bind(this);
		this.onClick = this.onClick.bind(this);

		
		
	}

    [spoiler]
**onClick (event) {**
**    	this.setState({isSaved: false});**
**    		this.props.onSave().then(() => {**
**    			**
**    	this.setState({isSaved: true})**
**    	**

**})**
**}**
[/spoiler]
	
	handleNameChange (event) {
		this.props.onChange(event.target.value);
	}
	
	
	render () {
		return ( <>
			{!this.props.isSaved ? (  <ReactLoading
          type={"bars"}
          color={"#03fc4e"}
          height={100}
          width={100}
        />) : (
			<div className="Playlist">
              <input defaultValue={this.props.playlistName} onChange={this.props.updatePlaylistName} />
              <TrackList tracks={this.props.playlistTracks} isRemoval={this.props.isRemoval} onRemove={this.props.onRemove}  onChange={this.handleNameChange} />
              <button className="Playlist-save" onClick= {this.onClick} >SAVE TO SPOTIFY</button>
            </div>
            
       
        )}
        </>
        )
	}
};

export default Playlist;**strong text**

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