Changeset 821dc0e for frontend

Timestamp:

02/08/26 16:02:01 (5 months ago)

Author:

Filip Gavrilovski <filipgavrilovski28@…>

Branches:

main

Children:

2fa6841, a5406e1

Parents:

7621d7b

Message:

add add to playlist button to song detail page

File:

• frontend/src/pages/SongDetail.tsx (modified) (6 diffs)

frontend/src/pages/SongDetail.tsx

@@ -1 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Link, useParams } from "react-router-dom";
 import axiosInstance from "../api/axiosInstance";
@@ -71 +71 @@
         const [reviewComment, setReviewComment] = useState("");
         const [hoverRating, setHoverRating] = useState(0);
+        const [showPlaylistDropdown, setShowPlaylistDropdown] = useState(false);
+        const playlistDropdownRef = useRef<HTMLDivElement>(null);
         console.log(user);
         useEffect(() => {
@@ -78 +80 @@
                                 const response = await axiosInstance.get(`/songs/${id}/details`);
                                 setSong(response.data);
-                                // Don't autoplay - user must click play button
                         } catch (err) {
                                 console.error("Error fetching song details:", err);
@@ -88 +89 @@
                 if (id) fetchSong();
         }, [id]);
+
+        // handle click outside for playlist dropdown
+        useEffect(() => {
+                const handleClickOutside = (event: MouseEvent) => {
+                        if (
+                                playlistDropdownRef.current &&
+                                !playlistDropdownRef.current.contains(event.target as Node)
+                        ) {
+                                setShowPlaylistDropdown(false);
+                        }
+                };
+
+                document.addEventListener("mousedown", handleClickOutside);
+                return () => {
+                        document.removeEventListener("mousedown", handleClickOutside);
+                };
+        }, []);
 
         const handleSubmitReview = async () => {
@@ -135 +153 @@
                         console.error("Error toggling like:", err);
                 }
+        };
+
+        const handleAddToPlaylist = (playlistName: string) => {
+                console.log(`Adding song ${song?.id} to ${playlistName}`);
+                // TODO: actual API call
+                setShowPlaylistDropdown(false);
+        };
+
+        const handleCreateNewPlaylist = () => {
+                console.log(`Creating new playlist for song ${song?.id}`);
+                // TODO: actual playlist creation
+                setShowPlaylistDropdown(false);
         };
 
@@ -294 +324 @@
 
                                                         {user && (
-                                                                <button
-                                                                        onClick={toggleLike}
-                                                                        className={`flex items-center gap-2 px-5 py-2.5 rounded-full text-sm font-semibold transition-colors cursor-pointer ${
-                                                                                song.isLikedByCurrentUser
-                                                                                        ? "bg-[#1db954] text-black"
-                                                                                        : "bg-white/10 text-white hover:bg-white/20"
-                                                                        }`}
-                                                                >
-                                                                        {song.isLikedByCurrentUser ? (
-                                                                                <svg
-                                                                                        className="w-5 h-5"
-                                                                                        fill="currentColor"
-                                                                                        viewBox="0 0 24 24"
+                                                                <>
+                                                                        <button
+                                                                                onClick={toggleLike}
+                                                                                className={`flex items-center gap-2 px-5 py-3 rounded-full text-sm font-semibold transition-colors cursor-pointer ${
+                                                                                        song.isLikedByCurrentUser
+                                                                                                ? "bg-[#1db954] text-black"
+                                                                                                : "bg-white/10 text-white hover:bg-white/20"
+                                                                                }`}
+                                                                        >
+                                                                                {song.isLikedByCurrentUser ? (
+                                                                                        <svg
+                                                                                                className="w-5 h-5"
+                                                                                                fill="currentColor"
+                                                                                                viewBox="0 0 24 24"
+                                                                                        >
+                                                                                                <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
+                                                                                        </svg>
+                                                                                ) : (
+                                                                                        <svg
+                                                                                                className="w-5 h-5"
+                                                                                                fill="none"
+                                                                                                stroke="currentColor"
+                                                                                                viewBox="0 0 24 24"
+                                                                                        >
+                                                                                                <path
+                                                                                                        strokeLinecap="round"
+                                                                                                        strokeLinejoin="round"
+                                                                                                        strokeWidth={2}
+                                                                                                        d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+                                                                                                />
+                                                                                        </svg>
+                                                                                )}
+                                                                                {song.isLikedByCurrentUser ? "Liked" : "Like"}
+                                                                        </button>
+
+                                                                        {/* Add to Playlist button */}
+                                                                        <div className="relative" ref={playlistDropdownRef}>
+                                                                                <button
+                                                                                        onClick={() =>
+                                                                                                setShowPlaylistDropdown(!showPlaylistDropdown)
+                                                                                        }
+                                                                                        className="flex items-center gap-2 px-5 py-3 rounded-full text-sm font-semibold bg-white/10 text-white hover:bg-white/20 transition-colors cursor-pointer"
                                                                                 >
-                                                                                        <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
-                                                                                </svg>
-                                                                        ) : (
-                                                                                <svg
-                                                                                        className="w-5 h-5"
-                                                                                        fill="none"
-                                                                                        stroke="currentColor"
-                                                                                        viewBox="0 0 24 24"
-                                                                                >
-                                                                                        <path
-                                                                                                strokeLinecap="round"
-                                                                                                strokeLinejoin="round"
-                                                                                                strokeWidth={2}
-                                                                                                d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
-                                                                                        />
-                                                                                </svg>
-                                                                        )}
-                                                                        {song.isLikedByCurrentUser ? "Liked" : "Like"}
-                                                                </button>
+                                                                                        <svg
+                                                                                                className="w-5 h-5"
+                                                                                                fill="none"
+                                                                                                stroke="currentColor"
+                                                                                                viewBox="0 0 24 24"
+                                                                                        >
+                                                                                                <path
+                                                                                                        strokeLinecap="round"
+                                                                                                        strokeLinejoin="round"
+                                                                                                        strokeWidth={2}
+                                                                                                        d="M12 4v16m8-8H4"
+                                                                                                />
+                                                                                        </svg>
+                                                                                        Add to Playlist
+                                                                                </button>
+
+                                                                                {/* Playlist dropdown */}
+                                                                                {showPlaylistDropdown && (
+                                                                                        <div className="absolute left-0 top-full mt-2 w-56 bg-[#282828] rounded-lg shadow-2xl py-1 z-50 border border-white/10">
+                                                                                                <div className="px-3 py-2 text-xs text-gray-400 border-b border-white/10">
+                                                                                                        Add to playlist
+                                                                                                </div>
+                                                                                                <button
+                                                                                                        onClick={() => handleAddToPlaylist("Hello")}
+                                                                                                        className="w-full text-left px-4 py-2.5 text-sm text-white hover:bg-white/10 transition-colors"
+                                                                                                >
+                                                                                                        Hello
+                                                                                                </button>
+                                                                                                <button
+                                                                                                        onClick={() => handleAddToPlaylist("Dimi")}
+                                                                                                        className="w-full text-left px-4 py-2.5 text-sm text-white hover:bg-white/10 transition-colors"
+                                                                                                >
+                                                                                                        Dimi
+                                                                                                </button>
+                                                                                                <button
+                                                                                                        onClick={() => handleAddToPlaylist("lmao")}
+                                                                                                        className="w-full text-left px-4 py-2.5 text-sm text-white hover:bg-white/10 transition-colors"
+                                                                                                >
+                                                                                                        Kako hello world ama ti si mojot world
+                                                                                                </button>
+                                                                                                <button
+                                                                                                        onClick={handleCreateNewPlaylist}
+                                                                                                        className="w-full text-left px-4 py-2.5 text-sm text-[#1db954] hover:bg-white/10 transition-colors border-t border-white/10 flex items-center gap-2"
+                                                                                                >
+                                                                                                        <svg
+                                                                                                                className="w-4 h-4"
+                                                                                                                fill="none"
+                                                                                                                stroke="currentColor"
+                                                                                                                viewBox="0 0 24 24"
+                                                                                                        >
+                                                                                                                <path
+                                                                                                                        strokeLinecap="round"
+                                                                                                                        strokeLinejoin="round"
+                                                                                                                        strokeWidth={2}
+                                                                                                                        d="M12 4v16m8-8H4"
+                                                                                                                />
+                                                                                                        </svg>
+                                                                                                        Create new playlist
+                                                                                                </button>
+                                                                                        </div>
+                                                                                )}
+                                                                        </div>
+                                                                </>
                                                         )}
                                                 </div>