Changeset b071fb4 for frontend

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

Location:

frontend/src

Files:

• components/Sidebar.tsx (modified) (2 diffs)
• pages/LandingPage.tsx (modified) (5 diffs)
• utils/types.ts (modified) (1 diff)

frontend/src/components/Sidebar.tsx

@@ -1 @@
-interface SidebarProps {
-        isOpen: boolean;
-        onClose: () => void;
-}
+import { useEffect, useState } from "react";
+import axiosInstance from "../api/axiosInstance";
+import type { BasicPlaylist, BasicSong, SidebarProps } from "../utils/types";
 
 const Sidebar = ({ isOpen, onClose }: SidebarProps) => {
-        // mock data for recently listened songs
-        const recentlyListened = [
-                { id: 1, title: "Song One", artist: "Artist A", cover: "/favicon.png" },
-                { id: 2, title: "Song Two", artist: "Artist B", cover: "/favicon.png" },
-                { id: 3, title: "Song Three", artist: "Artist C", cover: "/favicon.png" },
-                { id: 4, title: "Song Four", artist: "Artist D", cover: "/favicon.png" },
-                { id: 5, title: "Song Five", artist: "Artist E", cover: "/favicon.png" },
-        ];
+        const [recentlyListened, setRecentlyListened] = useState<BasicSong[]>([]);
+        const [playlists, setPlaylists] = useState<BasicPlaylist[]>([]);
 
-        // mock data for my playlists
-        const playlists = [
-                { id: 1, name: "My Favorites", songCount: 25 },
-                { id: 2, name: "Workout Mix", songCount: 18 },
-                { id: 3, name: "Chill Vibes", songCount: 32 },
-                { id: 4, name: "Party Hits", songCount: 45 },
-        ];
-
+        useEffect(() => {
+                const fetchData = async () => {
+                        try {
+                                const data = await axiosInstance.get<BasicSong[]>("/songs/recent");
+                                setRecentlyListened(data.data);
+                        } catch (error) {
+                                console.error("Error fetching recently listened songs:", error);
+                                // todo: show toast
+                        }
+                        try {
+                                const data =
+                                        await axiosInstance.get<BasicPlaylist[]>("/playlists/user");
+                                setPlaylists(data.data);
+                        } catch (error) {
+                                console.error("Error fetching playlists:", error);
+                                // todo: show toast
+                        }
+                };
+                fetchData();
+        }, []);
         return (
                 <div
@@ -65 +70 @@
                                                         >
                                                                 <img
-                                                                        src={song.cover}
+                                                                        src={song.cover || "/favicon.png"}
                                                                         alt={song.title}
                                                                         className="w-10 h-10 rounded object-cover"

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>

frontend/src/utils/types.ts

@@ -57 +57 @@
 
 export type SearchCategory = "songs" | "albums" | "artists" | "users";
+
+export interface SidebarProps {
+        isOpen: boolean;
+        onClose: () => void;
+}
+
+export interface BasicSong {
+        id: number;
+        title: string;
+        artist: string;
+        cover?: string;
+}
+
+export interface BasicPlaylist {
+        id: number;
+        name: string;
+        songCount: number;
+}