Index: frontend/src/App.tsx =================================================================== --- frontend/src/App.tsx (revision 98992cf92cf1399ea586c26d6dd45842df661773) +++ frontend/src/App.tsx (revision 2b08bed6a1ac91c0de26078bed3ee44d43611bd4) @@ -8,59 +8,64 @@ import Register from "./pages/Register"; import UserDetailView from "./pages/UserDetailView"; +import MusicalCollection from "./pages/MusicalCollection"; const Layout = () => { - return ( -
-
- ); + return ( +
+
+ ); }; const router = createBrowserRouter([ - { - path: "", - element: , - children: [ - { - path: "/", - element: , - }, - { - path: "/login", - element: , - }, - { - path: "/users", - element: , - }, - { - path: "/users/:userId", - element: , - }, - { - path: "/register", - element: , - }, - ], - }, + { + path: "", + element: , + children: [ + { + path: "/", + element: , + }, + { + path: "/login", + element: , + }, + { + path: "/users", + element: , + }, + { + path: "/users/:userId", + element: , + }, + { + path: "/register", + element: , + }, + { + path: "/collection/:type/:id", + element: , + }, + ], + }, ]); function App() { - return ; + return ; } Index: frontend/src/components/userProfile/ArtistView.tsx =================================================================== --- frontend/src/components/userProfile/ArtistView.tsx (revision 98992cf92cf1399ea586c26d6dd45842df661773) +++ frontend/src/components/userProfile/ArtistView.tsx (revision 2b08bed6a1ac91c0de26078bed3ee44d43611bd4) @@ -37,5 +37,5 @@ className="group cursor-pointer" onClick={() => - navigate(`/musical-entity/${album.musicalEntityId}`) + navigate(`/collection/album/${album.musicalEntityId}`) } > Index: frontend/src/components/userProfile/ListenerView.tsx =================================================================== --- frontend/src/components/userProfile/ListenerView.tsx (revision 98992cf92cf1399ea586c26d6dd45842df661773) +++ frontend/src/components/userProfile/ListenerView.tsx (revision 2b08bed6a1ac91c0de26078bed3ee44d43611bd4) @@ -31,5 +31,5 @@ key={playlist.id} className="group cursor-pointer" - onClick={() => navigate(`/playlist/${playlist.id}`)} + onClick={() => navigate(`/playlists/${playlist.id}`)} >
Index: frontend/src/components/userProfile/UserListModal.tsx =================================================================== --- frontend/src/components/userProfile/UserListModal.tsx (revision 2b08bed6a1ac91c0de26078bed3ee44d43611bd4) +++ frontend/src/components/userProfile/UserListModal.tsx (revision 2b08bed6a1ac91c0de26078bed3ee44d43611bd4) @@ -0,0 +1,85 @@ +import { useNavigate } from "react-router-dom"; +import type { BaseNonAdminUser } from "../../utils/types"; + +interface ModalProps { + title: string; + users: BaseNonAdminUser[]; + onClose: () => void; + onFollowToggle: (targetId: number) => Promise; +} + +const UserListModal = ({ + title, + users, + onClose, + onFollowToggle, +}: ModalProps) => { + const navigate = useNavigate(); + const baseURL = import.meta.env.VITE_API_BASE_URL; + + return ( +
+
+
+

{title}

+ +
+ +
+ {users.length === 0 ? ( +

No users found.

+ ) : ( + users.map((u) => ( +
+
{ + onClose(); + navigate(`/users/${u.id}`); + }} + > +
+ {u.profilePhoto ? ( + + ) : ( + + {u.fullName.charAt(0)} + + )} +
+

{u.fullName}

+
+ + +
+ )) + )} +
+
+
+
+ ); +}; + +export default UserListModal; Index: frontend/src/pages/MusicalCollection.tsx =================================================================== --- frontend/src/pages/MusicalCollection.tsx (revision 2b08bed6a1ac91c0de26078bed3ee44d43611bd4) +++ frontend/src/pages/MusicalCollection.tsx (revision 2b08bed6a1ac91c0de26078bed3ee44d43611bd4) @@ -0,0 +1,176 @@ +import { useEffect, useState } from "react"; +import { useNavigate, useParams } from "react-router-dom"; +import axiosInstance from "../api/axiosInstance"; + +interface Song { + id: number; + title: string; + genre: string; + type: "SONG"; + releasedBy: string; + isLikedByCurrentUser?: boolean; +} + +interface MusicalEntity { + id: number; + title: string; + genre: string; + type: string; + releasedBy: string; + isLikedByCurrentUser?: boolean; + songs?: Song[]; +} + +const MusicalCollection = () => { + const { type, id } = useParams(); + const navigate = useNavigate(); + const [collection, setCollection] = useState(null); + const [isLoading, setIsLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + const fetchData = async () => { + setIsLoading(true); + setError(null); + try { + const endpoint = + type === "album" ? `/albums/${id}` : `/playlists/${id}`; + const response = await axiosInstance.get(endpoint); + console.log(response.data); + setCollection(response.data); + } catch (err: any) { + setError(err.response?.data?.error || "Failed to load collection"); + } finally { + setIsLoading(false); + } + }; + fetchData(); + }, [id, type]); + + if (isLoading) { + return
Loading...
; + } + + if (error) { + return ( +
+

Error

+

{error}

+
+ ); + } + + if (!collection) return null; + + return ( +
+ + +
+
+
+
+ {collection.title.charAt(0).toUpperCase()} +
+
+ +
+ + {collection.type} + +

{collection.title}

+ +
+ {collection.releasedBy} + • + {collection.genre} + {collection.songs && ( + <> + • + + {collection.songs.length} song + {collection.songs.length !== 1 ? "s" : ""} + + + )} +
+ + +
+
+ +
+

Songs

+ + {collection.songs && collection.songs.length > 0 ? ( +
+ {collection.songs.map((song, index) => ( +
+ + {index + 1} + + +
+

+ {song.title} +

+

+ {song.releasedBy} +

+
+ + + {song.genre} + + + +
+ ))} +
+ ) : ( +

No songs available

+ )} +
+
+
+ ); +}; + +export default MusicalCollection; Index: frontend/src/pages/UserDetailView.tsx =================================================================== --- frontend/src/pages/UserDetailView.tsx (revision 98992cf92cf1399ea586c26d6dd45842df661773) +++ frontend/src/pages/UserDetailView.tsx (revision 2b08bed6a1ac91c0de26078bed3ee44d43611bd4) @@ -4,24 +4,17 @@ import ArtistView from "../components/userProfile/ArtistView"; import ListenerView from "../components/userProfile/ListenerView"; +import UserListModal from "../components/userProfile/UserListModal"; import type { MusicalEntity, Playlist, ArtistContribution, + BaseNonAdminUser, } from "../utils/types"; -interface BaseUser { - id: number; - fullName: string; - userType: string; - followers: number; - following: number; - isFollowedByCurrentUser: boolean; -} - -interface Artist extends BaseUser { +interface Artist extends BaseNonAdminUser { userType: "ARTIST"; contributions: ArtistContribution[]; } -interface Listener extends BaseUser { +interface Listener extends BaseNonAdminUser { userType: "LISTENER"; likedEntities: MusicalEntity[]; @@ -33,8 +26,13 @@ const UserDetail = () => { // user refers to the selected user NOT to the user from context + const baseURL = import.meta.env.VITE_API_BASE_URL; const { userId } = useParams(); const navigate = useNavigate(); const [user, setUser] = useState(null); const [error, setError] = useState(null); + const [showModal, setShowModal] = useState(false); + const [modalTitle, setModalTitle] = useState(""); + const [modalUsers, setModalUsers] = useState([]); + const [isLoadingModal, setIsLoadingModal] = useState(false); const [isFollowing, setIsFollowing] = useState(false); @@ -47,8 +45,61 @@ `/users/follow/${userId}`, ); + setUser(response.data); } catch (err: any) { console.error(err.response?.data?.error); } finally { setIsFollowing(false); + } + }; + + const displayFollowers = async () => { + setIsLoadingModal(true); + try { + const response = await axiosInstance.get(`/users/followers/${userId}`); + setModalUsers(response.data); + setModalTitle("Followers"); + setShowModal(true); + } catch (err) { + console.error("Failed to fetch followers"); + } finally { + setIsLoadingModal(false); + } + }; + const displayFollowing = async () => { + setIsLoadingModal(true); + try { + const response = await axiosInstance.get(`/users/following/${userId}`); + setModalUsers(response.data); + setModalTitle("Following"); + setShowModal(true); + } catch (err) { + console.error("Failed to fetch following users"); + } finally { + setIsLoadingModal(false); + } + }; + + const handleFollowInModal = async (targetId: number) => { + try { + await axiosInstance.post(`/users/follow/${targetId}`); + 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) { + console.error("Failed to toggle follow in modal", err); } }; @@ -60,5 +111,4 @@ const response = await axiosInstance.get(`/users/${userId}`); console.log(response.data); - setUser(response.data); } catch (err: any) { @@ -84,4 +134,11 @@ return (
+ {isLoadingModal && ( +
+
+
+
+
+ )}