User's Liked Songs

Overview

The LikedSongs.js page displays all of a user's Spotify Liked Songs in a scrollable grid format. It communicates with the backend using the user's refresh token, allowing them to:

• View their saved tracks
• Play songs sending them to global player
• Unlike (remove) songs directly from the interface
• Load more songs incrementally

Responsibilities

• Fetch and render the user's liked tracks
• "Load more" for large libraries
• Allow users to unlike tracks via backend API
• Handle authentication errors
• User Interface grid layout

Functionality

• When a user goes to the Liked Songs page, the client sends POST /spotify/liked to server.
• This gains the refreshToken which is exchanged for access.
• This then calls the spotify.getMySavedTracks([ limit, offset ]).
• For readability, flattenSavedTracks(...) is used to make a simplified list.

State Variable	Description
items	Array of liked songs
loading	Boolean flag for pagination, prevents duplicates
error	Human-readable string of errors for user to debug
offset	Numeric cursor for pagination
total	Total number of liked tracks

Like/Unlike Feature

Overview

• A user can like and unlike songs using the LikeButton.

UI

• Heart shaped button on top right of each card when searching on Search page.
• When in unlike state, heart is not filled.
• When in like state, heart is filled.

Functionality

• When the user presses the button, the client sends POST /spotify/like or POST /spotify/unlike to the server.
• This exchanges the refreshToken to get access to call spotify.addToMySavedTracks([trackId]) or spotify.removeFromMySavedTracks([trackId])