Changeset b071fb4 for frontend/src/pages/LandingPage.tsx

Timestamp:

02/06/26 20:05:09 (5 months ago)

Author:

Filip Gavrilovski <filipgavrilovski28@…>

Branches:

main

Children:

591919d

Parents:

2ce7c1e

Message:

replace mock data in sidebar with real user data

File:

• frontend/src/pages/LandingPage.tsx (modified) (5 diffs)

frontend/src/pages/LandingPage.tsx

@@ -1 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import axiosInstance from "../api/axiosInstance";
 import AlbumResult from "../components/search/AlbumResult";
@@ -29 +29 @@
         const [searchLoading, setSearchLoading] = useState(false);
         const [hasSearched, setHasSearched] = useState(false);
+
+        // playlist dropdown state
+        const [openPlaylistDropdown, setOpenPlaylistDropdown] = useState<
+                number | null
+        >(null);
+        const playlistDropdownRefs = useRef<{ [key: number]: HTMLDivElement | null }>(
+                {},
+        );
 
         useEffect(() => {
@@ -43 +51 @@
                 fetchSongs();
         }, []);
+
+        // Handle click outside for playlist dropdown
+        useEffect(() => {
+                const handleClickOutside = (event: MouseEvent) => {
+                        if (openPlaylistDropdown !== null) {
+                                const ref = playlistDropdownRefs.current[openPlaylistDropdown];
+                                if (ref && !ref.contains(event.target as Node)) {
+                                        setOpenPlaylistDropdown(null);
+                                }
+                        }
+                };
+
+                document.addEventListener("mousedown", handleClickOutside);
+                return () => {
+                        document.removeEventListener("mousedown", handleClickOutside);
+                };
+        }, [openPlaylistDropdown]);
+
+        const toggleLike = async (songId: number) => {
+                try {
+                        await axiosInstance.post(`/musical-entity/${songId}/like`);
+                        setSongs((prevSongs) =>
+                                prevSongs.map((song) =>
+                                        song.id === songId
+                                                ? { ...song, isLikedByCurrentUser: !song.isLikedByCurrentUser }
+                                                : song,
+                                ),
+                        );
+                } catch (error) {
+                        console.error("Error toggling like:", error);
+                }
+        };
+
+        const togglePlaylistDropdown = (songId: number) => {
+                setOpenPlaylistDropdown((prev) => (prev === songId ? null : songId));
+        };
+
+        const handleAddToPlaylist = (songId: number, playlistName: string) => {
+                console.log(`Adding song ${songId} to ${playlistName}`);
+                // TODO: Implement actual API call
+                setOpenPlaylistDropdown(null);
+        };
+
+        const handleCreateNewPlaylist = (songId: number) => {
+                console.log(`Creating new playlist for song ${songId}`);
+                // TODO: Implement actual playlist creation
+                setOpenPlaylistDropdown(null);
+        };
 
         const performSearch = async (query: string, category: SearchCategory) => {
@@ -289 +345 @@
                                                                                                         </div>
                                                                                                 </div>
-                                                                                                <div className="p-4 flex flex-col items-center">
+                                                                                                <div className="p-4">
                                                                                                         <h3 className="text-lg font-semibold mb-2 text-white overflow-hidden text-ellipsis whitespace-nowrap">
                                                                                                                 {song.title}
@@ -299 +355 @@
                                                                                                                 {song.releasedBy}
                                                                                                         </p>
+                                                                                                        <div className="flex items-center justify-between mt-4 pt-3 border-t border-white/10">
+                                                                                                                {/* Like button */}
+                                                                                                                <button
+                                                                                                                        onClick={(e) => {
+                                                                                                                                e.stopPropagation();
+                                                                                                                                toggleLike(song.id);
+                                                                                                                        }}
+                                                                                                                        className="text-gray-400 hover:text-[#1db954] transition-colors cursor-pointer"
+                                                                                                                        aria-label={
+                                                                                                                                song.isLikedByCurrentUser
+                                                                                                                                        ? "Unlike song"
+                                                                                                                                        : "Like song"
+                                                                                                                        }
+                                                                                                                >
+                                                                                                                        {song.isLikedByCurrentUser ? (
+                                                                                                                                <svg
+                                                                                                                                        className="w-6 h-6 fill-[#1db954]"
+                                                                                                                                        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-6 h-6"
+                                                                                                                                        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>
+                                                                                                                        )}
+                                                                                                                </button>
+
+                                                                                                                {/* Add to playlist button */}
+                                                                                                                <div
+                                                                                                                        className="relative"
+                                                                                                                        ref={(el) => {
+                                                                                                                                if (el)
+                                                                                                                                        playlistDropdownRefs.current[song.id] = el;
+                                                                                                                        }}
+                                                                                                                >
+                                                                                                                        <button
+                                                                                                                                onClick={(e) => {
+                                                                                                                                        e.stopPropagation();
+                                                                                                                                        togglePlaylistDropdown(song.id);
+                                                                                                                                }}
+                                                                                                                                className="text-gray-400 hover:text-[#1db954] transition-colors cursor-pointer"
+                                                                                                                                aria-label="Add to playlist"
+                                                                                                                        >
+                                                                                                                                <svg
+                                                                                                                                        className="w-6 h-6"
+                                                                                                                                        fill="none"
+                                                                                                                                        stroke="currentColor"
+                                                                                                                                        viewBox="0 0 24 24"
+                                                                                                                                >
+                                                                                                                                        <path
+                                                                                                                                                strokeLinecap="round"
+                                                                                                                                                strokeLinejoin="round"
+                                                                                                                                                strokeWidth={2}
+                                                                                                                                                d="M12 4v16m8-8H4"
+                                                                                                                                        />
+                                                                                                                                </svg>
+                                                                                                                        </button>
+
+                                                                                                                        {/* Playlist dropdown */}
+                                                                                                                        {openPlaylistDropdown === song.id && (
+                                                                                                                                <div className="absolute right-0 bottom-full mb-2 w-48 bg-gray-700 rounded-lg shadow-lg py-1 z-50">
+                                                                                                                                        <div className="px-3 py-2 text-xs text-gray-400 border-b border-white/10">
+                                                                                                                                                Add to playlist
+                                                                                                                                        </div>
+                                                                                                                                        <button
+                                                                                                                                                onClick={(e) => {
+                                                                                                                                                        e.stopPropagation();
+                                                                                                                                                        handleAddToPlaylist(
+                                                                                                                                                                song.id,
+                                                                                                                                                                "Playlist 1",
+                                                                                                                                                        );
+                                                                                                                                                }}
+                                                                                                                                                className="w-full text-left px-4 py-2 text-sm text-white hover:bg-gray-600 transition-colors"
+                                                                                                                                        >
+                                                                                                                                                Playlist 1
+                                                                                                                                        </button>
+                                                                                                                                        <button
+                                                                                                                                                onClick={(e) => {
+                                                                                                                                                        e.stopPropagation();
+                                                                                                                                                        handleAddToPlaylist(
+                                                                                                                                                                song.id,
+                                                                                                                                                                "Playlist 2",
+                                                                                                                                                        );
+                                                                                                                                                }}
+                                                                                                                                                className="w-full text-left px-4 py-2 text-sm text-white hover:bg-gray-600 transition-colors"
+                                                                                                                                        >
+                                                                                                                                                Playlist 2
+                                                                                                                                        </button>
+                                                                                                                                        <button
+                                                                                                                                                onClick={(e) => {
+                                                                                                                                                        e.stopPropagation();
+                                                                                                                                                        handleCreateNewPlaylist(song.id);
+                                                                                                                                                }}
+                                                                                                                                                className="w-full text-left px-4 py-2 text-sm text-[#1db954] hover:bg-gray-600 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>
                                                                                                 </div>
                                                                                         </div>