Index: frontend/src/components/userProfile/ArtistView.tsx =================================================================== --- frontend/src/components/userProfile/ArtistView.tsx (revision 2730163380202029196d71a92f0cbde3dfdd5b0a) +++ frontend/src/components/userProfile/ArtistView.tsx (revision d2af1a6462831374bb635fedb32ad46c8129abf2) @@ -1,5 +1,7 @@ import { useNavigate } from "react-router-dom"; -import { Music, Disc3 } from "lucide-react"; +import { useState } from "react"; +import { Music, Disc3, Play, Plus } from "lucide-react"; import type { ArtistContribution } from "../../utils/types"; +import axiosInstance from "../../api/axiosInstance"; interface ArtistViewProps { @@ -9,42 +11,103 @@ const ArtistView = ({ contributions }: ArtistViewProps) => { const navigate = useNavigate(); - - const albums = contributions.filter((c) => c.entityType === "ALBUM"); - const songs = contributions.filter((c) => c.entityType === "SONG"); + const [items, setItems] = useState(contributions); + const [toast, setToast] = useState<{ message: string; show: boolean }>({ + message: "", + show: false, + }); + + const albums = items.filter((c) => c.entityType === "ALBUM"); + const songs = items.filter((c) => c.entityType === "SONG"); const getRoleColor = (role: string) => { const colors: { [key: string]: string } = { - COMPOSER: "bg-purple-500", - PERFORMER: "bg-blue-500", - PRODUCER: "bg-green-500", - MAIN_VOCAL: "bg-pink-500", + COMPOSER: "bg-purple-100 text-purple-700", + PERFORMER: "bg-blue-100 text-blue-700", + PRODUCER: "bg-green-100 text-green-700", + MAIN_VOCAL: "bg-pink-100 text-pink-700", }; - return colors[role] || "bg-gray-500"; + return colors[role] || "bg-gray-100 text-gray-700"; + }; + + const showToast = (message: string) => { + setToast({ message, show: true }); + setTimeout(() => { + setToast({ message: "", show: false }); + }, 2000); + }; + + 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, + ), + ); + + showToast( + data.isLiked ? `Liked "${title}"` : `Removed ${title} from likes`, + ); + } catch (err: any) { + showToast(err.response?.data?.error); + } }; return (
+ {toast.show && ( +
+
+ {toast.message} +
+
+ )} + {albums.length > 0 && (
- -

Albums

+ +

Albums

- {albums.map((album, index) => ( + {albums.map((album) => (
- navigate(`/collection/album/${album.musicalEntityId}`) - } + onClick={() => navigate(`/collection/album/${album.id}`)} > -
+
- -
-
+ +
+ + + +
{album.role.replace("_", " ")} @@ -52,5 +115,5 @@
-

+

{album.title}

@@ -64,32 +127,68 @@
- -

Songs

+ +

Songs

- {songs.map((song, index) => ( + {songs.map((song) => (
- navigate(`/musical-entity/${song.musicalEntityId}`) - } + key={song.id} + className="group relative flex items-center gap-4 p-3 rounded-lg hover:bg-gray-50 transition-all cursor-pointer" + onClick={() => navigate(`/musical-entity/${song.id}`)} > -
- -
+
+
+ +
+ +
+
-

+

{song.title}

- {song.genre} -
-
+ {song.genre} +
+
+ {song.role.replace("_", " ")} + +
+ + + +
))} @@ -100,6 +199,6 @@ {contributions.length === 0 && (
- -

No contributions yet

+ +

No contributions yet

Start creating music to see it here

Index: frontend/src/components/userProfile/ListenerView.tsx =================================================================== --- frontend/src/components/userProfile/ListenerView.tsx (revision 2730163380202029196d71a92f0cbde3dfdd5b0a) +++ frontend/src/components/userProfile/ListenerView.tsx (revision d2af1a6462831374bb635fedb32ad46c8129abf2) @@ -1,6 +1,7 @@ import { useNavigate } from "react-router-dom"; -import { Heart, ListMusic, Music, Album } from "lucide-react"; +import { Heart, ListMusic, Music, Album, Bookmark } from "lucide-react"; import type { Playlist, MusicalEntity } from "../../utils/types"; - +import axiosInstance from "../../api/axiosInstance"; +import { useState } from "react"; interface ListenerViewProps { likedEntities: MusicalEntity[] | []; @@ -10,23 +11,67 @@ const ListenerView = ({ likedEntities, playlists }: ListenerViewProps) => { const navigate = useNavigate(); - - const likedSongs = likedEntities?.filter((e) => e.type === "SONG"); - const likedAlbums = likedEntities?.filter((e) => e.type === "ALBUM"); + const [items, setItems] = useState(likedEntities); + const [toast, setToast] = useState<{ message: string; show: boolean }>({ + message: "", + show: false, + }); + + const showToast = (message: string) => { + setToast({ message, show: true }); + setTimeout(() => { + setToast({ message: "", show: false }); + }, 2000); + }; + + const likedSongs = items.filter((e) => e.type === "SONG"); + const likedAlbums = items.filter((e) => e.type === "ALBUM"); + + const handleSavePlaylist = (e: React.MouseEvent, playlistId: number) => { + e.stopPropagation(); + + console.log("Save playlist:", playlistId); + }; + + 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, + ), + ); + + showToast( + data.isLiked ? `Liked "${title}"` : `Removed "${title}" from likes`, + ); + } catch (err: any) { + showToast(err.response?.data?.error); + } + }; return (
+ {toast.show && ( +
+
+ {toast.message} +
+
+ )} {playlists && playlists.length > 0 && (
-
+

Created Playlists

- - ({playlists.length}) - -
- -
+ ({playlists.length}) +
+ +
{playlists.map((playlist) => (
navigate(`/collection/playlist/${playlist.id}`)} > -
+
{playlist.cover ? ( {playlist.name} ) : ( -
- +
+
)} -
-

+ + {/* Save button overlay */} + +

+

{playlist.name} +

+

+ {playlist.creatorName}

@@ -59,31 +122,55 @@ {likedSongs && likedSongs.length > 0 && (
-
+

Liked Songs

- + ({likedSongs?.length})
-
+
{likedSongs.map((song, index) => (
navigate(`/musical-entity/${song.id}`)} > - + {index + 1} -
- +
+
-

+

{song.title}

-

{song.genre}

-
+

+ {song.releasedBy} +

+
+ + {song.genre} + + +
))} @@ -94,13 +181,13 @@ {likedAlbums && likedAlbums.length > 0 && (
-
- +
+

Liked Albums

- + ({likedAlbums.length})
-
+
{likedAlbums.map((album) => (
navigate(`/collection/album/${album.id}`)} > -
- -
-

+

+ + + +
+

{album.title}

-

{album.genre}

+

+ {album.releasedBy} +

))} @@ -125,9 +235,8 @@ likedEntities.length === 0 && (!playlists || playlists.length === 0) && ( -
-

- Nothing here yet -

-

+

+ +

Nothing here yet

+

Start exploring music to build your collection

Index: frontend/src/pages/UserDetail.tsx =================================================================== --- frontend/src/pages/UserDetail.tsx (revision 2730163380202029196d71a92f0cbde3dfdd5b0a) +++ frontend/src/pages/UserDetail.tsx (revision d2af1a6462831374bb635fedb32ad46c8129abf2) @@ -13,4 +13,10 @@ } from "../utils/types"; +interface FollowStatus { + isFollowing: boolean; + followerCount: number; + followingCount: number; +} + interface Artist extends BaseNonAdminUser { userType: "ARTIST"; @@ -43,12 +49,49 @@ setIsFollowing(true); try { - const response = await axiosInstance.post( + const response = await axiosInstance.post( `/users/${userId}/follow`, ); - setUser(response.data); + setUser((prev) => { + if (!prev) return null; + return { + ...prev, + isFollowedByCurrentUser: response.data.isFollowing, + followers: response.data.followerCount, + following: response.data.followingCount, + }; + }); } catch (err: any) { setError(handleError(err)); } finally { setIsFollowing(false); + } + }; + + const handleFollowInModal = async (targetId: number) => { + try { + const response = await axiosInstance.post( + `/users/${targetId}/follow`, + ); + + setModalUsers((prevUsers) => + prevUsers.map((u) => + u.id === targetId + ? { ...u, isFollowedByCurrentUser: response.data.isFollowing } + : u, + ), + ); + + // if (user && user.id === targetId) { + // setUser((prev) => { + // if (!prev) return null; + // return { + // ...prev, + // isFollowedByCurrentUser: response.data.isFollowing, + // followers: response.data.followerCount, + // }; + // }); + // } + } catch (err: any) { + setError(handleError(err)); } }; @@ -81,29 +124,4 @@ }; - const handleFollowInModal = async (targetId: number) => { - try { - await axiosInstance.post(`/users/${targetId}/follow`); - setModalUsers((prevUsers) => - prevUsers.map((u) => { - if (u.id === targetId) { - const isNowFollowing = !u.isFollowedByCurrentUser; - return { - ...u, - isFollowedByCurrentUser: isNowFollowing, - }; - } - return u; - }), - ); - - // if (user && user.id === targetId) { - // const response = await axiosInstance.get(`/users/${targetId}`); - // setUser(response.data); - // } - } catch (err: any) { - setError(handleError(err)); - } - }; - useEffect(() => { const fetchUser = async () => { @@ -111,4 +129,5 @@ try { const response = await axiosInstance.get(`/users/${userId}`); + console.log(response.data); setUser(response.data); } catch (err: any) { Index: frontend/src/utils/types.ts =================================================================== --- frontend/src/utils/types.ts (revision 2730163380202029196d71a92f0cbde3dfdd5b0a) +++ frontend/src/utils/types.ts (revision d2af1a6462831374bb635fedb32ad46c8129abf2) @@ -8,5 +8,5 @@ export interface ArtistContribution { - musicalEntityId: number; + id: number; title: string; genre: string; @@ -40,4 +40,5 @@ creatorName: string; songsInPlaylist: Song[]; + isSavedByCurrentUser: boolean; }