Index: frontend/src/components/Sidebar.tsx =================================================================== --- frontend/src/components/Sidebar.tsx (revision f5bc95e4a628b62884f4631d8a118a9790052953) +++ frontend/src/components/Sidebar.tsx (revision 85512ff50bc46445db00d8c3ecea57616baddb36) @@ -1,219 +1,289 @@ import { useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; +import { toast } from "react-toastify"; import axiosInstance, { baseURL } from "../api/axiosInstance"; import { useAuth } from "../context/authContext"; import { usePlayer } from "../context/playerContext"; -import type { BasicPlaylist, BasicSong, SidebarProps } from "../utils/types"; +import type { BasicSong, SidebarProps } from "../utils/types"; import { toEmbedUrl } from "../utils/utils"; +import { useCreatedPlaylists } from "../context/playlistContext"; +import CreatePlaylistModal from "./playlist/CreatePlaylistModal"; +import { getErrorMessage } from "../utils/error"; const Sidebar = ({ isOpen, onClose }: SidebarProps) => { - const { user } = useAuth(); - const navigate = useNavigate(); - const { play, currentSong } = usePlayer(); - const [recentlyListened, setRecentlyListened] = useState([]); - const [playlists, setPlaylists] = useState([]); - - useEffect(() => { - const fetchData = async () => { - try { - const data = await axiosInstance.get("/songs/recent"); - setRecentlyListened(data.data); - } catch (error) { - console.error("Error fetching recently listened songs:", error); - // todo: show toast - } - try { - const data = - await axiosInstance.get("/playlists/user"); - setPlaylists(data.data); - } catch (error) { - console.error("Error fetching playlists:", error); - // todo: show toast - } - }; - if (user) { - fetchData(); - } else { - setRecentlyListened([]); - setPlaylists([]); - } - }, [user]); - return ( -
-
- {/* Sidebar Header */} -
-

Library

- -
- - {/* Recently Listened */} -
-

- Recently Played -

-
- {recentlyListened.map((song) => ( -
- {song.title} { - (e.target as HTMLImageElement).src = "/favicon.png"; - }} - /> -
-

navigate(`/songs/${song.id}`)} - className="text-sm font-medium text-white truncate hover:underline cursor-pointer" - > - {song.title} -

-
- { - e.stopPropagation(); - if (song.artistUsername) { - navigate(`/users/${song.artistUsername}`); - } - }} - className={`truncate ${ - song.artistUsername - ? "hover:underline cursor-pointer hover:text-white" - : "" - }`} - > - {song.artist} - - {song.album && ( - <> - • - { - e.stopPropagation(); - if (song.albumId) { - navigate(`/collection/album/${song.albumId}`); - } - }} - className={`truncate ${ - song.albumId - ? "hover:underline cursor-pointer hover:text-white" - : "" - }`} - > - {song.album} - - - )} -
-
- {song.link && ( - - )} -
- ))} -
-
- - {/* Playlists */} -
-

- Your Playlists -

-
- {playlists.map((playlist) => ( -
-
-
- - - -
-
-

- {playlist.name} -

-

- {playlist.songCount} songs -

-
-
-
- ))} -
-
-
-
- ); + const { user } = useAuth(); + const { + createdPlaylists, + isLoading: playlistsLoading, + refreshPlaylists, + } = useCreatedPlaylists(); + const navigate = useNavigate(); + const { play, currentSong } = usePlayer(); + const [recentlyListened, setRecentlyListened] = useState([]); + const [songsLoading, setSongsLoading] = useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); + + useEffect(() => { + const fetchData = async () => { + setSongsLoading(true); + try { + const data = await axiosInstance.get("/songs/recent"); + setRecentlyListened(data.data); + } catch (error) { + toast.error(getErrorMessage(error)); + } finally { + setSongsLoading(false); + } + }; + if (user) { + fetchData(); + } else { + setRecentlyListened([]); + setSongsLoading(false); + } + }, [user]); + + const handleCreatePlaylist = async (playlistName: string) => { + try { + await axiosInstance.post("/playlists", { name: playlistName }); + toast.success("Playlist created successfully!"); + await refreshPlaylists(); + } catch (error) { + toast.error(getErrorMessage(error)); + } + }; + + const isLoading = songsLoading || playlistsLoading; + + return ( + <> +
+
+ {/* Sidebar Header */} +
+

Library

+ +
+ + {/* Loading State */} + {isLoading ? ( +
+
+
+ ) : ( + <> + {/* Recently Listened */} +
+

+ Recently Played +

+
+ {recentlyListened.map((song) => ( +
+ {song.title} { + (e.target as HTMLImageElement).src = "/favicon.png"; + }} + /> +
+

navigate(`/songs/${song.id}`)} + className="text-sm font-medium text-white truncate hover:underline cursor-pointer" + > + {song.title} +

+
+ { + e.stopPropagation(); + if (song.artistUsername) { + navigate(`/users/${song.artistUsername}`); + } + }} + className={`truncate ${ + song.artistUsername + ? "hover:underline cursor-pointer hover:text-white" + : "" + }`} + > + {song.artist} + + {song.album && ( + <> + • + { + e.stopPropagation(); + if (song.albumId) { + navigate( + `/collection/album/${song.albumId}`, + ); + } + }} + className={`truncate ${ + song.albumId + ? "hover:underline cursor-pointer hover:text-white" + : "" + }`} + > + {song.album} + + + )} +
+
+ {song.link && ( + + )} +
+ ))} +
+
+ + {/* Playlists */} +
+

+ Your Playlists +

+
+ {createdPlaylists?.map((playlist) => ( +
{ + navigate(`/collection/playlist/${playlist.id}`); + }} + className="flex items-center justify-between p-3 rounded-lg hover:bg-white/5 cursor-pointer transition-colors" + > +
+
+ + + +
+
+

+ {playlist.name} +

+

+ {playlist.songCount} songs +

+
+
+
+ ))} + + {/* Create Playlist Button */} + +
+
+ + )} +
+
+ + setIsModalOpen(false)} + onSubmit={handleCreatePlaylist} + /> + + ); }; Index: frontend/src/components/playlist/CreatePlaylistModal.tsx =================================================================== --- frontend/src/components/playlist/CreatePlaylistModal.tsx (revision 85512ff50bc46445db00d8c3ecea57616baddb36) +++ frontend/src/components/playlist/CreatePlaylistModal.tsx (revision 85512ff50bc46445db00d8c3ecea57616baddb36) @@ -0,0 +1,119 @@ +import { useState, useEffect } from "react"; +import type { CreatePlaylistModalProps } from "../../utils/types"; + +const CreatePlaylistModal = ({ + isOpen, + onClose, + onSubmit, +}: CreatePlaylistModalProps) => { + const [playlistName, setPlaylistName] = useState(""); + const [isClosing, setIsClosing] = useState(false); + const [isOpening, setIsOpening] = useState(false); + + useEffect(() => { + if (isOpen) { + setIsClosing(false); + setPlaylistName(""); + setIsOpening(true); + setTimeout(() => setIsOpening(false), 10); + } + }, [isOpen]); + + const handleClose = () => { + setIsClosing(true); + setTimeout(() => { + onClose(); + setIsClosing(false); + }, 200); + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + if (playlistName.trim()) { + onSubmit(playlistName.trim()); + handleClose(); + } + }; + + if (!isOpen && !isClosing) return null; + + return ( +
+
e.stopPropagation()} + > +
+

Create Playlist

+ +
+ +
+
+ + setPlaylistName(e.target.value)} + /> +
+ +
+ + +
+
+
+
+ ); +}; + +export default CreatePlaylistModal; Index: frontend/src/components/userProfile/ListenerView.tsx =================================================================== --- frontend/src/components/userProfile/ListenerView.tsx (revision f5bc95e4a628b62884f4631d8a118a9790052953) +++ frontend/src/components/userProfile/ListenerView.tsx (revision 85512ff50bc46445db00d8c3ecea57616baddb36) @@ -1,297 +1,343 @@ import { Album, Bookmark, Heart, ListMusic, Music } from "lucide-react"; import { useState } from "react"; -import { useNavigate } from "react-router-dom"; +import { useNavigate, useParams } from "react-router-dom"; import { toast } from "react-toastify"; import axiosInstance, { baseURL } from "../../api/axiosInstance"; import type { MusicalEntity, Playlist } from "../../utils/types"; import SongItem from "../SongItem"; +import { useAuth } from "../../context/authContext"; interface ListenerViewProps { - likedEntities: MusicalEntity[] | []; - createdPlaylists: Playlist[] | []; - savedPlaylists: Playlist[] | []; + likedEntities: MusicalEntity[] | []; + createdPlaylists: Playlist[] | []; + savedPlaylists: Playlist[] | []; } const ListenerView = ({ - likedEntities, - createdPlaylists, - savedPlaylists, + likedEntities, + createdPlaylists, + savedPlaylists, }: ListenerViewProps) => { - const navigate = useNavigate(); - const [items, setItems] = useState(likedEntities); - const [savedItems, setSavedItems] = useState(savedPlaylists); - - const likedSongs = items.filter((e) => e.type === "SONG"); - const likedAlbums = items.filter((e) => e.type === "ALBUM"); - - const handleSavePlaylist = async ( - e: React.MouseEvent, - playlistId: number, - playlistName: string, - ) => { - e.stopPropagation(); - - try { - const response = await axiosInstance.post(`/playlist/${playlistId}/save`); - const data = response.data; - - setSavedItems((prevItems) => - data.isSaved - ? [...prevItems, prevItems.find((p) => p.id === playlistId)!] - : prevItems.filter((p) => p.id !== playlistId), - ); - - toast.success( - data.isSaved - ? `Saved "${playlistName}" to your library` - : `Removed "${playlistName}" from your library`, - ); - } catch (err: any) { - toast.error(err.response?.data?.error || "Failed to save the playlist"); - } - }; - - const handleLike = async (id: number, title: string) => { - try { - const response = await axiosInstance.post(`/musical-entity/${id}/like`); - const data = response.data; - - setItems((prevItems) => - prevItems.map((item) => - item.id === data.entityId - ? { ...item, isLikedByCurrentUser: data.isLiked } - : item, - ), - ); - - toast.success( - data.isLiked ? `Liked "${title}"` : `Removed "${title}" from likes`, - ); - } catch (err: any) { - toast.error(err.response?.data?.error || "Failed to like the item"); - } - }; - - return ( -
- {createdPlaylists && createdPlaylists.length > 0 && ( -
-
- -

Created Playlists

- - ({createdPlaylists.length}) - -
- -
- {createdPlaylists.map((playlist) => ( -
navigate(`/collection/playlist/${playlist.id}`)} - > -
- {playlist.name} { - (e.target as HTMLImageElement).src = "/favicon.png"; - }} - /> - - -
-

- {playlist.name} -

-

- {playlist.creatorName} -

-
- ))} -
-
- )} - - {savedItems && savedItems.length > 0 && ( -
-
- -

Saved Playlists

- ({savedItems.length}) -
- -
- {savedItems.map((playlist) => ( -
navigate(`/collection/playlist/${playlist.id}`)} - > -
- {playlist.name} { - (e.target as HTMLImageElement).src = "/favicon.png"; - }} - /> - - -
-

- {playlist.name} -

-

- {playlist.creatorName} -

-
- ))} -
-
- )} - - {likedSongs && likedSongs.length > 0 && ( -
-
- -

Liked Songs

- - ({likedSongs?.length}) - -
- -
- {likedSongs.map((song, index) => ( - handleLike(song.id, song.title)} - /> - ))} -
-
- )} - - {likedAlbums && likedAlbums.length > 0 && ( -
-
- -

Liked Albums

- - ({likedAlbums.length}) - -
- -
- {likedAlbums.map((album) => ( -
navigate(`/collection/album/${album.id}`)} - > -
- {album.title} { - (e.target as HTMLImageElement).src = "/favicon.png"; - }} - /> - - -
-

- {album.title} -

-

- {album.releasedBy} -

-
- ))} -
-
- )} - - {likedEntities && - likedEntities.length === 0 && - (!createdPlaylists || createdPlaylists.length === 0) && - (!savedItems || savedItems.length === 0) && ( -
- -

Nothing here yet

-

- Start exploring music to build your collection -

-
- )} -
- ); + const navigate = useNavigate(); + const { username: usernameParam } = useParams(); + const { user: currentUser } = useAuth(); + const [items, setItems] = useState(likedEntities); + const [createdItems, setCreatedItems] = useState(createdPlaylists); + const [savedItems, setSavedItems] = useState(savedPlaylists); + + const likedSongs = items.filter((e) => e.type === "SONG"); + const likedAlbums = items.filter((e) => e.type === "ALBUM"); + const username = usernameParam || currentUser?.username; + const isOwnProfile = currentUser?.username === username; + + const handleSavePlaylist = async ( + e: React.MouseEvent, + playlistId: number, + playlistName: string, + ) => { + e.stopPropagation(); + + try { + const response = await axiosInstance.post( + `/playlists/${playlistId}/save`, + ); + const data = response.data; + + setCreatedItems((prevItems) => + prevItems.map((p) => + p.id === playlistId + ? { ...p, isSavedByCurrentUser: data.isSavedByCurrentUser } + : p, + ), + ); + + setSavedItems((prevItems) => + prevItems.map((p) => + p.id === playlistId + ? { ...p, isSavedByCurrentUser: data.isSavedByCurrentUser } + : p, + ), + ); + + if (isOwnProfile) { + if (data.isSavedByCurrentUser) { + const playlistToAdd = createdItems.find((p) => p.id === playlistId); + if (playlistToAdd && !savedItems.find((p) => p.id === playlistId)) { + setSavedItems((prevItems) => [ + ...prevItems, + { ...playlistToAdd, isSavedByCurrentUser: true }, + ]); + } + } else { + setSavedItems((prevItems) => + prevItems.filter((p) => p.id !== playlistId), + ); + } + } + + toast.success( + data.isSavedByCurrentUser + ? `Saved "${playlistName}" to your library` + : `Removed "${playlistName}" from your library`, + ); + } catch (err: any) { + toast.error(err.response?.data?.error || "Failed to save the playlist"); + } + }; + + const handleLike = async (id: number, title: string) => { + try { + const response = await axiosInstance.post(`/musical-entity/${id}/like`); + const data = response.data; + + setItems((prevItems) => + prevItems.map((item) => + item.id === data.entityId + ? { ...item, isLikedByCurrentUser: data.isLiked } + : item, + ), + ); + + toast.success( + data.isLiked ? `Liked "${title}"` : `Removed "${title}" from likes`, + ); + } catch (err: any) { + toast.error(err.response?.data?.error || "Failed to like the item"); + } + }; + + return ( +
+ {createdItems && createdItems.length > 0 && ( +
+
+ +

Created Playlists

+ + ({createdItems.length}) + +
+ +
+ {createdItems.map((playlist) => ( +
navigate(`/collection/playlist/${playlist.id}`)} + > +
+ {playlist.name} { + (e.target as HTMLImageElement).src = "/favicon.png"; + }} + /> + {!isOwnProfile && + currentUser?.username != playlist.creatorUsername && ( + + )} +
+

+ {playlist.name} +

+

+ {playlist.creatorName} +

+
+ ))} +
+
+ )} + + {savedItems && savedItems.length > 0 && ( +
+
+ +

Saved Playlists

+ ({savedItems.length}) +
+ +
+ {savedItems.map((playlist) => ( +
navigate(`/collection/playlist/${playlist.id}`)} + > +
+ {playlist.name} { + (e.target as HTMLImageElement).src = "/favicon.png"; + }} + /> + + {currentUser?.username != playlist.creatorUsername && ( + + )} +
+

+ {playlist.name} +

+

+ {playlist.creatorName} +

+
+ ))} +
+
+ )} + + {likedSongs && likedSongs.length > 0 && ( +
+
+ +

Liked Songs

+ + ({likedSongs?.length}) + +
+ +
+ {likedSongs.map((song, index) => ( + handleLike(song.id, song.title)} + /> + ))} +
+
+ )} + + {likedAlbums && likedAlbums.length > 0 && ( +
+
+ +

Liked Albums

+ + ({likedAlbums.length}) + +
+ +
+ {likedAlbums.map((album) => ( +
navigate(`/collection/album/${album.id}`)} + > +
+ {album.title} { + (e.target as HTMLImageElement).src = "/favicon.png"; + }} + /> + + +
+

+ {album.title} +

+

+ {album.releasedBy} +

+
+ ))} +
+
+ )} + + {likedEntities && + likedEntities.length === 0 && + (!createdItems || createdItems.length === 0) && + (!savedItems || savedItems.length === 0) && ( +
+ +

Nothing here yet

+

+ Start exploring music to build your collection +

+
+ )} +
+ ); };