About this Pull Request

I created an ADD & REMOVE songs functionality for when the user is creating a COSTUME playlists. Here you will find:

What does it do?
How it works ?
How to use it ?

What does this functionality do?

This functionality is all about adding and removing songs from the playlists the user is customizing. In the bottom part of the page you will find two boxes:

The one on the left The 'Results' box takes in all of the songs that the SongSearcher returns, learn about it here #5. Bassically, based on the user's input the SpotifyAPI will return the top songs that match this input

This box contains just displays the info of each of this songs

The one on the right This box is the canva of the user ... Here the users can CUSTOMIZE their playlists, setting the name, adding and removing songs 😎

So this functionality focuses on giving the user this ability of adding and removing songs when they want and always update the data. When users end the customization and press the 'Save this in Spotify' Button the new playlist will be created in their account, learn about it here #27

How does this functionality work?

If you learn about this app's state here #21, you see clearly that this PR is all about creating two arrays on the SpotifyContext of the app. Each of these containing:
- result songs from user search input
- songs the user is adding to it's playlist
  1. This way, we just needed two create two functions for ADDING and REMOVING elements from the playlists_array
    
    IMPORTANT this PR is using mock-data, the real songs data from Spotify will be provided here #5
Like this, we will always have the data in the Context up to date with any modifications the user does
After that, we just need to see how to use it ...

How to use this functionality ?

To use the ADD & REMOVE functions created previously is actually very simple:

you import the data you need using the useContext and the SpotifyContext created, learn about it here

Now, to retrieve each element take into consideration the structure of the state: 👀

const state = {
    token: {
        getAccessToken,
        setAccessToken
    },
    songs: {
        resultSongs,
        setResultSongs,
    },
    playlist: {
        playlistSongs,
        addToPlaylist,
        removeFromPlaylist,
    }
}

Now, if you want to display this info with the SongContainer, you need pass this info:
The, once you imported the functions you just need to use them with the correct sintaxis:

addToPlaylist(song) song as the whole data of that specific song removeFromPlaylist(id) id as the id of the song to remove

IMPORTANT, since the data display in the UI depends on this global state, each modification will be reflected in the layout immediately

Test

See how it works: addAndRemoveSongs

Matdweb / Jamming

Add and remove songs functionality #28

About this Pull Request

What does this functionality do?

How does this functionality work?

How to use this functionality ?

Test