Playlist Core Functionality Components

Overview

These components provide interactive modal windows for users to create new Spotify playlists, add to playlists using songs from the Search page results and from the currently playing song in the Playerbar, and view and edit the contents of a playlist from the homescreen directly within the SpotiReels application. It connects to Spotify's Web API to utilize these features using their access token and automatically closes once a playlist is created, or a song is added.

CreatePlaylistPopup.jsx

This popup appears when the user clicks the "+ New Playlist" button in the sidebar.

Responsibilities

• Render a modal popup interface for playlist creation
• Fetch and store the current Spotify user's ID
• Handle playlist creation through Spotify's Web API
• Display feedback (loading, success, or error message)
• Reset input fields and close after successful creation

State Variable	Purpose
userId	Stores the logged-in user's Spotify ID
name	Playlist name entered by the user
description	Optional playlist description entered by the user
busy	Indication of whether the playlist creation is in progress
msg	Displays status messages (success or errors)

---

Creating a Playlist Form Submission

When the user submits the form, the component sends a POST request to the Spotify API endpoint: POST https://api.spotify.com/v1/users/{user_id}/playlists

AddToPlaylistPopup.jsx

This popup appears when the user clicks the "+ Add" button that appears above the top right of the playerbar when a song is playing, and also appears on every search result within the search page.

Responsibilities

• Render a modal popup interface for adding selected songs to a user's playlist of choice
• Fetch and store the current Spotify user's ID
• Handles playlist additions through Spotify's Web API
• Display feedback (loading, success, or error message)
• Reset input fields and close after successful additions.

PlaylistContentPopup.jsx

This popup appears when a user clicks on a playlist tab from the user's playlists that populate the homescreen.

Responsibilities

• Render a modal popup interface for viewing and editing the contents of a playlist.
• Fetch and store the current Spotify user's ID
• Handles playlist changes (name changes, description changes, etc.) through Spotify's Web API
• Display feedback (loading, success, or error message)
• Allows for playback by choosing individual songs within a playlist and passing the songID to the playerbar.
• Reset input fields and close after successful additions.