Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/MusicalEntityController.java =================================================================== --- finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/MusicalEntityController.java (revision f5bc95e4a628b62884f4631d8a118a9790052953) +++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/MusicalEntityController.java (revision 85512ff50bc46445db00d8c3ecea57616baddb36) @@ -1,5 +1,5 @@ package com.ukim.finki.develop.finkwave.controller; -import com.ukim.finki.develop.finkwave.model.dto.LikeStatusDto; +import com.ukim.finki.develop.finkwave.model.dto.statusDto.LikeStatusDto; import com.ukim.finki.develop.finkwave.model.dto.PublishAlbumRequestDto; import com.ukim.finki.develop.finkwave.model.dto.PublishSongRequestDto; Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/NonAdminUserController.java =================================================================== --- finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/NonAdminUserController.java (revision f5bc95e4a628b62884f4631d8a118a9790052953) +++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/NonAdminUserController.java (revision 85512ff50bc46445db00d8c3ecea57616baddb36) @@ -1,5 +1,5 @@ package com.ukim.finki.develop.finkwave.controller; -import com.ukim.finki.develop.finkwave.model.dto.FollowStatusDto; +import com.ukim.finki.develop.finkwave.model.dto.statusDto.FollowStatusDto; import com.ukim.finki.develop.finkwave.model.dto.NonAdminUserDto; import com.ukim.finki.develop.finkwave.service.FollowService; Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/PlaylistController.java =================================================================== --- finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/PlaylistController.java (revision f5bc95e4a628b62884f4631d8a118a9790052953) +++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/PlaylistController.java (revision 85512ff50bc46445db00d8c3ecea57616baddb36) @@ -3,12 +3,10 @@ import com.ukim.finki.develop.finkwave.model.dto.BasicPlaylistDto; import com.ukim.finki.develop.finkwave.model.dto.PlaylistDto; +import com.ukim.finki.develop.finkwave.model.dto.statusDto.SavePlaylistStatusDto; import com.ukim.finki.develop.finkwave.service.PlaylistService; import lombok.AllArgsConstructor; import org.springframework.http.HttpEntity; import org.springframework.http.ResponseEntity; -import org.springframework.web.bind.annotation.GetMapping; -import org.springframework.web.bind.annotation.PathVariable; -import org.springframework.web.bind.annotation.RequestMapping; -import org.springframework.web.bind.annotation.RestController; +import org.springframework.web.bind.annotation.*; import java.util.List; @@ -30,3 +28,8 @@ } + @PostMapping("/{id}/save") + public HttpEntitysavePlaylist(@PathVariable Long id) throws Exception { + return ResponseEntity.ok(playlistService.savePlaylist(id)); + } + } Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/SavedPlaylist.java =================================================================== --- finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/SavedPlaylist.java (revision f5bc95e4a628b62884f4631d8a118a9790052953) +++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/SavedPlaylist.java (revision 85512ff50bc46445db00d8c3ecea57616baddb36) @@ -3,4 +3,5 @@ import jakarta.persistence.*; import lombok.Getter; +import lombok.NoArgsConstructor; import lombok.Setter; import org.hibernate.annotations.OnDelete; @@ -10,4 +11,5 @@ @Setter @Entity +@NoArgsConstructor @Table(name = "saved_playlists", schema = "project") public class SavedPlaylist { @@ -27,3 +29,8 @@ private Playlist playlist; + public SavedPlaylist( Listener listener, Playlist playlist) { + this.id=new SavedPlaylistId(listener.getId(),playlist.getId()); + this.listener = listener; + this.playlist = playlist; + } } Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/SavedPlaylistId.java =================================================================== --- finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/SavedPlaylistId.java (revision f5bc95e4a628b62884f4631d8a118a9790052953) +++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/SavedPlaylistId.java (revision 85512ff50bc46445db00d8c3ecea57616baddb36) @@ -4,4 +4,5 @@ import jakarta.persistence.Embeddable; import lombok.Getter; +import lombok.NoArgsConstructor; import lombok.Setter; import org.hibernate.Hibernate; @@ -13,4 +14,5 @@ @Setter @Embeddable +@NoArgsConstructor public class SavedPlaylistId implements Serializable { private static final long serialVersionUID = 678748242066896235L; @@ -20,4 +22,9 @@ @Column(name = "playlist_id", nullable = false) private Long playlistId; + + public SavedPlaylistId(Long listenerId, Long playlistId) { + this.listenerId = listenerId; + this.playlistId = playlistId; + } @Override @@ -30,4 +37,6 @@ } + + @Override public int hashCode() { Index: nkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/FollowStatusDto.java =================================================================== --- finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/FollowStatusDto.java (revision f5bc95e4a628b62884f4631d8a118a9790052953) +++ (revision ) @@ -1,4 +1,0 @@ -package com.ukim.finki.develop.finkwave.model.dto; - -public record FollowStatusDto(boolean isFollowing, Long followerCount, Long followingCount) -{ } Index: nkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/LikeStatusDto.java =================================================================== --- finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/LikeStatusDto.java (revision f5bc95e4a628b62884f4631d8a118a9790052953) +++ (revision ) @@ -1,4 +1,0 @@ -package com.ukim.finki.develop.finkwave.model.dto; - -public record LikeStatusDto(Long entityId,Boolean isLiked, String type) { -} Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/PlaylistDto.java =================================================================== --- finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/PlaylistDto.java (revision f5bc95e4a628b62884f4631d8a118a9790052953) +++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/PlaylistDto.java (revision 85512ff50bc46445db00d8c3ecea57616baddb36) @@ -15,4 +15,5 @@ private String cover; private String creatorName; + private String creatorUsername; private ListsongsInPlaylist; private Boolean isSavedByCurrentUser; Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/statusDto/FollowStatusDto.java =================================================================== --- finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/statusDto/FollowStatusDto.java (revision 85512ff50bc46445db00d8c3ecea57616baddb36) +++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/statusDto/FollowStatusDto.java (revision 85512ff50bc46445db00d8c3ecea57616baddb36) @@ -0,0 +1,4 @@ +package com.ukim.finki.develop.finkwave.model.dto.statusDto; + +public record FollowStatusDto(boolean isFollowing, Long followerCount, Long followingCount) +{ } Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/statusDto/LikeStatusDto.java =================================================================== --- finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/statusDto/LikeStatusDto.java (revision 85512ff50bc46445db00d8c3ecea57616baddb36) +++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/statusDto/LikeStatusDto.java (revision 85512ff50bc46445db00d8c3ecea57616baddb36) @@ -0,0 +1,4 @@ +package com.ukim.finki.develop.finkwave.model.dto.statusDto; + +public record LikeStatusDto(Long entityId,Boolean isLiked, String type) { +} Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/statusDto/SavePlaylistStatusDto.java =================================================================== --- finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/statusDto/SavePlaylistStatusDto.java (revision 85512ff50bc46445db00d8c3ecea57616baddb36) +++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/statusDto/SavePlaylistStatusDto.java (revision 85512ff50bc46445db00d8c3ecea57616baddb36) @@ -0,0 +1,4 @@ +package com.ukim.finki.develop.finkwave.model.dto.statusDto; + +public record SavePlaylistStatusDto(Long id, Boolean isSavedByCurrentUser) { +} Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/FollowService.java =================================================================== --- finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/FollowService.java (revision f5bc95e4a628b62884f4631d8a118a9790052953) +++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/FollowService.java (revision 85512ff50bc46445db00d8c3ecea57616baddb36) @@ -7,5 +7,5 @@ import com.ukim.finki.develop.finkwave.model.FollowId; import com.ukim.finki.develop.finkwave.model.NonAdminUser; -import com.ukim.finki.develop.finkwave.model.dto.FollowStatusDto; +import com.ukim.finki.develop.finkwave.model.dto.statusDto.FollowStatusDto; import com.ukim.finki.develop.finkwave.model.dto.NonAdminUserDto; import com.ukim.finki.develop.finkwave.repository.ArtistRepository; @@ -16,5 +16,4 @@ import org.springframework.stereotype.Service; -import java.util.ArrayList; import java.util.List; import java.util.Optional; Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/LikeService.java =================================================================== --- finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/LikeService.java (revision f5bc95e4a628b62884f4631d8a118a9790052953) +++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/LikeService.java (revision 85512ff50bc46445db00d8c3ecea57616baddb36) @@ -7,5 +7,5 @@ import com.ukim.finki.develop.finkwave.model.Listener; import com.ukim.finki.develop.finkwave.model.MusicalEntity; -import com.ukim.finki.develop.finkwave.model.dto.LikeStatusDto; +import com.ukim.finki.develop.finkwave.model.dto.statusDto.LikeStatusDto; import com.ukim.finki.develop.finkwave.model.dto.MusicalEntityDto; import com.ukim.finki.develop.finkwave.repository.*; Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/NonAdminUserService.java =================================================================== --- finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/NonAdminUserService.java (revision f5bc95e4a628b62884f4631d8a118a9790052953) +++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/NonAdminUserService.java (revision 85512ff50bc46445db00d8c3ecea57616baddb36) @@ -4,4 +4,5 @@ import com.ukim.finki.develop.finkwave.model.*; import com.ukim.finki.develop.finkwave.model.dto.*; +import com.ukim.finki.develop.finkwave.model.dto.statusDto.FollowStatusDto; import com.ukim.finki.develop.finkwave.repository.*; import com.ukim.finki.develop.finkwave.service.mappers.NonAdminUserMapper; @@ -123,5 +124,5 @@ - private PlaylistDto mapToPlaylistDto(Playlist p, Set savedBy) { + private PlaylistDto mapToPlaylistDto(Playlist p, Set visitorSavedPlaylistIds) { return new PlaylistDto( p.getId(), @@ -129,6 +130,7 @@ p.getCover(), p.getCreatedBy().getNonAdminUser().getUser().getFullName(), + p.getCreatedBy().getNonAdminUser().getUser().getUsername(), null, - savedBy.contains(p.getId()) + visitorSavedPlaylistIds.contains(p.getId()) ); } Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/PlaylistService.java =================================================================== --- finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/PlaylistService.java (revision f5bc95e4a628b62884f4631d8a118a9790052953) +++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/PlaylistService.java (revision 85512ff50bc46445db00d8c3ecea57616baddb36) @@ -2,16 +2,25 @@ import com.ukim.finki.develop.finkwave.exceptions.PlaylistNotFoundException; +import com.ukim.finki.develop.finkwave.exceptions.UserNotFoundException; +import com.ukim.finki.develop.finkwave.model.Listener; import com.ukim.finki.develop.finkwave.model.Playlist; +import com.ukim.finki.develop.finkwave.model.SavedPlaylist; +import com.ukim.finki.develop.finkwave.model.SavedPlaylistId; import com.ukim.finki.develop.finkwave.model.dto.BasicPlaylistDto; import com.ukim.finki.develop.finkwave.model.dto.PlaylistDto; import com.ukim.finki.develop.finkwave.model.dto.SongWithLinkDto; +import com.ukim.finki.develop.finkwave.model.dto.statusDto.SavePlaylistStatusDto; +import com.ukim.finki.develop.finkwave.repository.ListenerRepository; import com.ukim.finki.develop.finkwave.repository.PlaylistRepository; import com.ukim.finki.develop.finkwave.repository.SavedPlaylistRepository; import com.ukim.finki.develop.finkwave.repository.SongRepository; import lombok.AllArgsConstructor; +import org.springframework.http.HttpStatus; import org.springframework.stereotype.Service; import org.springframework.transaction.annotation.Transactional; +import org.springframework.web.server.ResponseStatusException; import java.util.List; +import java.util.Optional; import java.util.Set; import java.util.stream.Collectors; @@ -19,5 +28,5 @@ @Service @AllArgsConstructor -@Transactional(readOnly = true) + public class PlaylistService { private final PlaylistRepository playlistRepository; @@ -25,4 +34,5 @@ private final AuthService authService; private final SavedPlaylistRepository savedPlaylistRepository; + private final ListenerRepository listenerRepository; public ListfindByCreatorId(Long id){ @@ -45,4 +55,5 @@ playlist.getCover(), playlist.getCreatedBy().getNonAdminUser().getUser().getFullName(), + playlist.getCreatedBy().getNonAdminUser().getUser().getUsername(), songsInPlaylist, savedIds.contains(playlist.getId()) @@ -52,10 +63,40 @@ public List getBasicPlaylists(){ - Long userId = authService.getCurrentUserID(); + Long userId = authService.getCurrentUserIDOptional().orElse(null); return playlistRepository.getPlaylistsByIdIs(userId); + } + + @Transactional + public SavePlaylistStatusDto savePlaylist(Long playlistId) throws Exception { + Long currentUserId=authService.getCurrentUserID(); + SavedPlaylistId savedPlaylistId=new SavedPlaylistId(currentUserId,playlistId); + Playlist playlist=playlistRepository.findById(playlistId).orElseThrow( + ()->new PlaylistNotFoundException(playlistId) + ); + if (playlist.getCreatedBy().getId().equals(currentUserId)) { + throw new ResponseStatusException(HttpStatus.BAD_REQUEST,"Cannot save playlist created by the current user!"); + } + + + + boolean isSaved; + + if (savedPlaylistRepository.existsById(savedPlaylistId)){ + savedPlaylistRepository.deleteById(savedPlaylistId); + isSaved=false; + } + else{ + Listener listener=listenerRepository.findById(currentUserId).orElseThrow( + ()->new UserNotFoundException("Listener not found") + ); + + savedPlaylistRepository.save(new SavedPlaylist(listener,playlist)); + isSaved=true; + } + return new SavePlaylistStatusDto(playlistId,isSaved); + } - } Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/mappers/NonAdminUserMapper.java =================================================================== --- finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/mappers/NonAdminUserMapper.java (revision f5bc95e4a628b62884f4631d8a118a9790052953) +++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/mappers/NonAdminUserMapper.java (revision 85512ff50bc46445db00d8c3ecea57616baddb36) @@ -7,4 +7,5 @@ import com.ukim.finki.develop.finkwave.model.dto.*; import com.ukim.finki.develop.finkwave.model.NonAdminUser; +import com.ukim.finki.develop.finkwave.model.dto.statusDto.FollowStatusDto; import org.springframework.stereotype.Component; 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 +

+
+ )} +
+ ); }; Index: frontend/src/context/playlistContext.tsx =================================================================== --- frontend/src/context/playlistContext.tsx (revision 85512ff50bc46445db00d8c3ecea57616baddb36) +++ frontend/src/context/playlistContext.tsx (revision 85512ff50bc46445db00d8c3ecea57616baddb36) @@ -0,0 +1,76 @@ +import { + createContext, + useContext, + useEffect, + useState, + type Dispatch, + type ReactNode, + type SetStateAction, +} from "react"; +import type { BasicPlaylist } from "../utils/types"; +import axiosInstance from "../api/axiosInstance"; +import { toast } from "react-toastify"; +import { getErrorMessage } from "../utils/error"; +import { useAuth } from "./authContext"; +interface PlaylistContextType { + createdPlaylists: BasicPlaylist[] | undefined; + setCreatedPlaylists: Dispatch>; + isLoading: boolean; + refreshPlaylists: () => Promise; +} + +interface PlaylistProviderProps { + children: ReactNode; +} + +const PlaylistContext = createContext({ + createdPlaylists: undefined, + setCreatedPlaylists: () => {}, + isLoading: false, + refreshPlaylists: async () => {}, +}); + +const PlaylistProvider = ({ children }: PlaylistProviderProps) => { + const { user } = useAuth(); + const [createdPlaylists, setCreatedPlaylists] = useState< + BasicPlaylist[] | undefined + >(undefined); + const [isLoading, setIsLoading] = useState(false); + + const fetchCreatedPlaylists = async () => { + setIsLoading(true); + try { + const data = await axiosInstance.get("/playlists/user"); + setCreatedPlaylists(data.data); + } catch (error: any) { + toast.error(getErrorMessage(error)); + } finally { + setIsLoading(false); + } + }; + + useEffect(() => { + if (user) { + fetchCreatedPlaylists(); + } else { + setCreatedPlaylists(undefined); + } + }, [user]); + + return ( + + {children} + + ); +}; + +export const useCreatedPlaylists = () => useContext(PlaylistContext); + +export default PlaylistProvider; Index: frontend/src/main.tsx =================================================================== --- frontend/src/main.tsx (revision f5bc95e4a628b62884f4631d8a118a9790052953) +++ frontend/src/main.tsx (revision 85512ff50bc46445db00d8c3ecea57616baddb36) @@ -5,12 +5,15 @@ import { PlayerProvider } from "./context/playerContext.tsx"; import "./index.css"; +import PlaylistProvider from "./context/playlistContext.tsx"; createRoot(document.getElementById("root")!).render( - - - - - - - , + + + + + + + + + , ); Index: frontend/src/pages/MusicalCollection.tsx =================================================================== --- frontend/src/pages/MusicalCollection.tsx (revision f5bc95e4a628b62884f4631d8a118a9790052953) +++ frontend/src/pages/MusicalCollection.tsx (revision 85512ff50bc46445db00d8c3ecea57616baddb36) @@ -3,249 +3,249 @@ import axiosInstance, { baseURL } from "../api/axiosInstance"; import SongItem from "../components/SongItem"; -import { handleError } from "../utils/error"; +import { getErrorMessage } from "../utils/error"; import type { Album, Playlist, Song } from "../utils/types"; interface CollectionView { - id: number; - title: string; - cover?: string | null; - genre?: string; - type: string; - releasedBy: string; - isLikedByCurrentUser?: boolean; - songs: Song[]; + id: number; + title: string; + cover?: string | null; + genre?: string; + type: string; + releasedBy: string; + isLikedByCurrentUser?: boolean; + songs: Song[]; } const MusicalCollection = () => { - const { type, id } = useParams(); - const [collection, setCollection] = useState(null); - const [isLoading, setIsLoading] = useState(true); - const [error, setError] = useState(null); - - const normalizeCollection = ( - data: Album | Playlist, - type: string, - ): CollectionView => { - if (type === "album") { - const album = data as Album; - return { - id: album.id, - title: album.title, - cover: album.cover, - genre: album.genre, - type: album.type, - releasedBy: album.releasedBy, - isLikedByCurrentUser: album.isLikedByCurrentUser, - songs: album.songs, - }; - } else { - const playlist = data as Playlist; - return { - id: playlist.id, - title: playlist.name, - cover: playlist.cover, - genre: undefined, - type: "PLAYLIST", - releasedBy: playlist.creatorName, - isLikedByCurrentUser: undefined, - songs: playlist.songsInPlaylist, - }; - } - }; - - const toggleLike = async (songId: number) => { - try { - await axiosInstance.post(`/musical-entity/${songId}/like`); - setCollection((prev) => { - if (!prev) return null; - return { - ...prev, - songs: prev.songs.map((s) => - s.id === songId - ? { ...s, isLikedByCurrentUser: !s.isLikedByCurrentUser } - : s, - ), - }; - }); - } catch (err) { - console.error("Error toggling like:", err); - } - }; - - const toggleCollectionLike = async () => { - if (!collection) return; - try { - await axiosInstance.post(`/musical-entity/${collection.id}/like`); - setCollection((prev) => { - if (!prev) return null; - return { ...prev, isLikedByCurrentUser: !prev.isLikedByCurrentUser }; - }); - } catch (err) { - console.error("Error toggling collection like:", err); - } - }; - - useEffect(() => { - const fetchData = async () => { - setIsLoading(true); - setError(null); - try { - const endpoint = - type === "album" ? `/albums/${id}` : `/playlists/${id}`; - const response = await axiosInstance.get(endpoint); - - const normalized = normalizeCollection(response.data, type!); - setCollection(normalized); - } catch (err: any) { - setError(handleError(err)); - } finally { - setIsLoading(false); - } - }; - fetchData(); - }, [id, type]); - - if (isLoading) { - return ( -
-
-
-

Loading collection…

-
-
- ); - } - - if (error) { - return ( -
-
-

{error}

- - ← Back to Home - -
-
- ); - } - - if (!collection) return null; - - return ( -
-
- {/* Back link */} - - - - - Back to Home - - - {/* Hero section */} -
- {/* Cover art */} -
-
- {collection.title} { - (e.target as HTMLImageElement).src = "/favicon.png"; - }} - /> -
-
- - {/* Collection info */} -
- - {collection.genre ? `${collection.genre} • ` : ""} - {collection.type === "PLAYLIST" ? "Playlist" : "Album"} - -

- {collection.title} -

- -

- {collection.releasedBy} -

- - {collection.songs && ( -

- {collection.songs.length} song - {collection.songs.length !== 1 ? "s" : ""} -

- )} - - {/* Action buttons */} -
- {type === "album" && ( - - )} -
-
-
- - {/* Songs list */} -
-

Songs

- - {collection.songs && collection.songs.length > 0 ? ( -
- {collection.songs.map((song, index) => ( - toggleLike(song.id)} - /> - ))} -
- ) : ( -
-

No songs available

-
- )} -
-
-
- ); + const { type, id } = useParams(); + const [collection, setCollection] = useState(null); + const [isLoading, setIsLoading] = useState(true); + const [error, setError] = useState(null); + + const normalizeCollection = ( + data: Album | Playlist, + type: string, + ): CollectionView => { + if (type === "album") { + const album = data as Album; + return { + id: album.id, + title: album.title, + cover: album.cover, + genre: album.genre, + type: album.type, + releasedBy: album.releasedBy, + isLikedByCurrentUser: album.isLikedByCurrentUser, + songs: album.songs, + }; + } else { + const playlist = data as Playlist; + return { + id: playlist.id, + title: playlist.name, + cover: playlist.cover, + genre: undefined, + type: "PLAYLIST", + releasedBy: playlist.creatorName, + isLikedByCurrentUser: undefined, + songs: playlist.songsInPlaylist, + }; + } + }; + + const toggleLike = async (songId: number) => { + try { + await axiosInstance.post(`/musical-entity/${songId}/like`); + setCollection((prev) => { + if (!prev) return null; + return { + ...prev, + songs: prev.songs.map((s) => + s.id === songId + ? { ...s, isLikedByCurrentUser: !s.isLikedByCurrentUser } + : s, + ), + }; + }); + } catch (err) { + console.error("Error toggling like:", err); + } + }; + + const toggleCollectionLike = async () => { + if (!collection) return; + try { + await axiosInstance.post(`/musical-entity/${collection.id}/like`); + setCollection((prev) => { + if (!prev) return null; + return { ...prev, isLikedByCurrentUser: !prev.isLikedByCurrentUser }; + }); + } catch (err) { + console.error("Error toggling collection like:", err); + } + }; + + useEffect(() => { + const fetchData = async () => { + setIsLoading(true); + setError(null); + try { + const endpoint = + type === "album" ? `/albums/${id}` : `/playlists/${id}`; + const response = await axiosInstance.get(endpoint); + + const normalized = normalizeCollection(response.data, type!); + setCollection(normalized); + } catch (err: any) { + setError(getErrorMessage(err)); + } finally { + setIsLoading(false); + } + }; + fetchData(); + }, [id, type]); + + if (isLoading) { + return ( +
+
+
+

Loading collection…

+
+
+ ); + } + + if (error) { + return ( +
+
+

{error}

+ + ← Back to Home + +
+
+ ); + } + + if (!collection) return null; + + return ( +
+
+ {/* Back link */} + + + + + Back to Home + + + {/* Hero section */} +
+ {/* Cover art */} +
+
+ {collection.title} { + (e.target as HTMLImageElement).src = "/favicon.png"; + }} + /> +
+
+ + {/* Collection info */} +
+ + {collection.genre ? `${collection.genre} • ` : ""} + {collection.type === "PLAYLIST" ? "Playlist" : "Album"} + +

+ {collection.title} +

+ +

+ {collection.releasedBy} +

+ + {collection.songs && ( +

+ {collection.songs.length} song + {collection.songs.length !== 1 ? "s" : ""} +

+ )} + + {/* Action buttons */} +
+ {type === "album" && ( + + )} +
+
+
+ + {/* Songs list */} +
+

Songs

+ + {collection.songs && collection.songs.length > 0 ? ( +
+ {collection.songs.map((song, index) => ( + toggleLike(song.id)} + /> + ))} +
+ ) : ( +
+

No songs available

+
+ )} +
+
+
+ ); }; Index: frontend/src/pages/UserDetail.tsx =================================================================== --- frontend/src/pages/UserDetail.tsx (revision f5bc95e4a628b62884f4631d8a118a9790052953) +++ frontend/src/pages/UserDetail.tsx (revision 85512ff50bc46445db00d8c3ecea57616baddb36) @@ -7,27 +7,28 @@ import UserListModal from "../components/userProfile/UserListModal"; import { useAuth } from "../context/authContext"; -import { handleError } from "../utils/error"; +import { getErrorMessage } from "../utils/error"; import type { - ArtistContribution, - BaseNonAdminUser, - MusicalEntity, - Playlist, + ArtistContribution, + BaseNonAdminUser, + MusicalEntity, + Playlist, } from "../utils/types"; +import { useCreatedPlaylists } from "../context/playlistContext"; interface FollowStatus { - isFollowing: boolean; - followerCount: number; - followingCount: number; + isFollowing: boolean; + followerCount: number; + followingCount: number; } interface Artist extends BaseNonAdminUser { - userType: "ARTIST"; - contributions: ArtistContribution[]; + userType: "ARTIST"; + contributions: ArtistContribution[]; } interface Listener extends BaseNonAdminUser { - userType: "LISTENER"; - likedEntities: MusicalEntity[]; - createdPlaylists: Playlist[]; - savedPlaylists: Playlist[]; + userType: "LISTENER"; + likedEntities: MusicalEntity[]; + createdPlaylists: Playlist[]; + savedPlaylists: Playlist[]; } @@ -35,301 +36,305 @@ const UserDetail = () => { - const { username: usernameParam } = useParams(); - const { user: currentUser } = useAuth(); - 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); - - const username = usernameParam || currentUser?.username; - const isOwnProfile = currentUser?.username === username; - - if (!usernameParam && !currentUser) { - return ( -
-
-

- You must be logged in to view your profile. -

- -
-
- ); - } - - const handleFollow = async () => { - if (!user) return; - - setIsFollowing(true); - try { - const response = await axiosInstance.post( - `/users/na/${username}/follow`, - ); - 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 (targetUsername: string) => { - try { - const response = await axiosInstance.post( - `/users/na/${targetUsername}/follow`, - ); - - setModalUsers((prevUsers) => - prevUsers.map((u) => - u.username === targetUsername - ? { ...u, isFollowedByCurrentUser: response.data.isFollowing } - : u, - ), - ); - } catch (err: any) { - setError(handleError(err)); - } - }; - - const displayFollowers = async () => { - setIsLoadingModal(true); - try { - const response = await axiosInstance.get( - `/users/na/${username}/followers`, - ); - setModalUsers(response.data); - setModalTitle("Followers"); - setShowModal(true); - } catch (err) { - setError(handleError(err)); - } finally { - setIsLoadingModal(false); - } - }; - const displayFollowing = async () => { - setIsLoadingModal(true); - try { - const response = await axiosInstance.get( - `/users/na/${username}/following`, - ); - setModalUsers(response.data); - setModalTitle("Following"); - setShowModal(true); - } catch (err: any) { - setError(handleError(err)); - } finally { - setIsLoadingModal(false); - } - }; - - useEffect(() => { - const fetchUser = async () => { - setError(null); - try { - const response = await axiosInstance.get(`/users/na/${username}`); - setUser(response.data); - } catch (err: any) { - setError(handleError(err)); - } - }; - fetchUser(); - }, [username]); - - if (error) { - return ( -
-
-

{error}

- - ← Back to Home - -
-
- ); - } - - if (!user) { - return ; - } - - return ( -
- {isLoadingModal && ( -
-
-
- )} - -
- {/* Back link */} - - - - - Back to Home - - - {/* Hero section */} -
- {/* Profile photo */} -
-
- {user.profilePhoto ? ( - {user.fullName} - ) : ( -
- {user.fullName.charAt(0).toUpperCase()} -
- )} -
-
- - {/* User info */} -
- - {user.userType === "ARTIST" ? "Artist" : "Listener"} • Profile - -

- {user.fullName} -

-

@{user.username}

- - {/* Stats */} -
-
- - {user.followers} - - Followers -
-
- - {user.following} - - Following -
-
- - {/* Follow button - hidden on own profile */} - {!isOwnProfile && ( -
- -
- )} -
-
- - {/* Content */} - {user.userType === "ARTIST" ? ( - - ) : ( - - )} - - {showModal && ( - setShowModal(false)} - onFollowToggle={handleFollowInModal} - /> - )} -
-
- ); + const { username: usernameParam } = useParams(); + const { user: currentUser } = useAuth(); + const { createdPlaylists: currentUserCreatedPlaylists } = + useCreatedPlaylists(); + 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); + + const username = usernameParam || currentUser?.username; + const isOwnProfile = currentUser?.username === username; + + if (!usernameParam && !currentUser) { + return ( +
+
+

+ You must be logged in to view your profile. +

+ +
+
+ ); + } + + const handleFollow = async () => { + if (!user) return; + + setIsFollowing(true); + try { + const response = await axiosInstance.post( + `/users/na/${username}/follow`, + ); + setUser((prev) => { + if (!prev) return null; + return { + ...prev, + isFollowedByCurrentUser: response.data.isFollowing, + followers: response.data.followerCount, + following: response.data.followingCount, + }; + }); + } catch (err: any) { + setError(getErrorMessage(err)); + } finally { + setIsFollowing(false); + } + }; + + const handleFollowInModal = async (targetUsername: string) => { + try { + const response = await axiosInstance.post( + `/users/na/${targetUsername}/follow`, + ); + + setModalUsers((prevUsers) => + prevUsers.map((u) => + u.username === targetUsername + ? { ...u, isFollowedByCurrentUser: response.data.isFollowing } + : u, + ), + ); + } catch (err: any) { + setError(getErrorMessage(err)); + } + }; + + const displayFollowers = async () => { + setIsLoadingModal(true); + try { + const response = await axiosInstance.get( + `/users/na/${username}/followers`, + ); + setModalUsers(response.data); + setModalTitle("Followers"); + setShowModal(true); + } catch (err) { + setError(getErrorMessage(err)); + } finally { + setIsLoadingModal(false); + } + }; + const displayFollowing = async () => { + setIsLoadingModal(true); + try { + const response = await axiosInstance.get( + `/users/na/${username}/following`, + ); + setModalUsers(response.data); + setModalTitle("Following"); + setShowModal(true); + } catch (err: any) { + setError(getErrorMessage(err)); + } finally { + setIsLoadingModal(false); + } + }; + + useEffect(() => { + const fetchUser = async () => { + setError(null); + setUser(null); + try { + const response = await axiosInstance.get(`/users/na/${username}`); + + setUser(response.data); + } catch (err: any) { + setError(getErrorMessage(err)); + } + }; + fetchUser(); + }, [username]); + + if (error) { + return ( +
+
+

{error}

+ + ← Back to Home + +
+
+ ); + } + + if (!user) { + return ; + } + + return ( +
+ {isLoadingModal && ( +
+
+
+ )} + +
+ {/* Back link */} + + + + + Back to Home + + + {/* Hero section */} +
+ {/* Profile photo */} +
+
+ {user.profilePhoto ? ( + {user.fullName} + ) : ( +
+ {user.fullName.charAt(0).toUpperCase()} +
+ )} +
+
+ + {/* User info */} +
+ + {user.userType === "ARTIST" ? "Artist" : "Listener"} • Profile + +

+ {user.fullName} +

+

@{user.username}

+ + {/* Stats */} +
+
+ + {user.followers} + + Followers +
+
+ + {user.following} + + Following +
+
+ + {/* Follow button - hidden on own profile */} + {!isOwnProfile && ( +
+ +
+ )} +
+
+ + {/* Content */} + {user.userType === "ARTIST" ? ( + + ) : ( + + )} + + {showModal && ( + setShowModal(false)} + onFollowToggle={handleFollowInModal} + /> + )} +
+
+ ); }; Index: frontend/src/utils/error.ts =================================================================== --- frontend/src/utils/error.ts (revision f5bc95e4a628b62884f4631d8a118a9790052953) +++ frontend/src/utils/error.ts (revision 85512ff50bc46445db00d8c3ecea57616baddb36) @@ -1,3 +1,3 @@ -export const handleError = (err: any) => { +export const getErrorMessage = (err: any) => { const errorMessage = err.response?.data?.error || "Failed to fetch user"; return errorMessage; Index: frontend/src/utils/types.ts =================================================================== --- frontend/src/utils/types.ts (revision f5bc95e4a628b62884f4631d8a118a9790052953) +++ frontend/src/utils/types.ts (revision 85512ff50bc46445db00d8c3ecea57616baddb36) @@ -1,62 +1,63 @@ export interface User { - username: string; - fullName: string; - email?: string; - profilePhoto?: string | null; - isAdmin: boolean; - isArtist: boolean; + username: string; + fullName: string; + email?: string; + profilePhoto?: string | null; + isAdmin: boolean; + isArtist: boolean; } export interface ArtistContribution { - id: number; - title: string; - genre: string; - role: string; - entityType: string; - isLikedByCurrentUser: boolean; - cover?: string | null; - link?: string | null; + id: number; + title: string; + genre: string; + role: string; + entityType: string; + isLikedByCurrentUser: boolean; + cover?: string | null; + link?: string | null; } export interface MusicalEntity { - id: number; - title: string; - genre: string; - type: string; - releasedBy: string; - artistUsername?: string; - cover?: string | null; - isLikedByCurrentUser?: boolean; + id: number; + title: string; + genre: string; + type: string; + releasedBy: string; + artistUsername?: string; + cover?: string | null; + isLikedByCurrentUser?: boolean; } export interface Song extends MusicalEntity { - type: "SONG"; - album?: string; - albumId?: number; - link?: string; + type: "SONG"; + album?: string; + albumId?: number; + link?: string; } export interface Album extends MusicalEntity { - type: "ALBUM"; - songs: Song[]; + type: "ALBUM"; + songs: Song[]; } export interface Playlist { - id: number; - name: string; - cover: string; - creatorName: string; - songsInPlaylist: Song[]; - isSavedByCurrentUser: boolean; + id: number; + name: string; + cover: string; + creatorName: string; + creatorUsername: string; + songsInPlaylist: Song[]; + isSavedByCurrentUser: boolean; } export interface BaseNonAdminUser { - username: string; - fullName: string; - userType: string; - profilePhoto: string; - followers: number; - following: number; - isFollowedByCurrentUser: boolean; + username: string; + fullName: string; + userType: string; + profilePhoto: string; + followers: number; + following: number; + isFollowedByCurrentUser: boolean; } @@ -66,74 +67,80 @@ export interface SidebarProps { - isOpen: boolean; - onClose: () => void; + isOpen: boolean; + onClose: () => void; +} + +export interface CreatePlaylistModalProps { + isOpen: boolean; + onClose: () => void; + onSubmit: (playlistName: string) => void; } export interface SongContribution { - artistName: string; - role: string; + artistName: string; + role: string; } export interface SongReview { - id: { - listenerId: number; - musicalEntityId: number; - }; - author: string; - authorUsername: string; - grade: number; - comment: string; + id: { + listenerId: number; + musicalEntityId: number; + }; + author: string; + authorUsername: string; + grade: number; + comment: string; } export interface SongDetail extends MusicalEntity { - type: "SONG"; - album?: string | null; - link?: string | null; - contributions: SongContribution[]; - reviews: SongReview[]; + type: "SONG"; + album?: string | null; + link?: string | null; + contributions: SongContribution[]; + reviews: SongReview[]; } export interface BasicSong { - id: number; - title: string; - artist: string; - artistUsername?: string; - cover?: string; - link?: string; - album?: string; - albumId?: number; + id: number; + title: string; + artist: string; + artistUsername?: string; + cover?: string; + link?: string; + album?: string; + albumId?: number; } export interface BasicPlaylist { - id: number; - name: string; - songCount: number; + id: number; + name: string; + songCount: number; } export interface CatalogItem { - id: number; - title: string; - genre: string; - cover: string | null; - type: "SONG" | "ALBUM"; - releaseDate: string; + id: number; + title: string; + genre: string; + cover: string | null; + type: "SONG" | "ALBUM"; + releaseDate: string; } export interface Contributor { - id: number; - fullName: string; - role: string; + id: number; + fullName: string; + role: string; } export interface ArtistSearchResult { - id: number; - username: string; - fullName: string; - profilePhoto?: string; + id: number; + username: string; + fullName: string; + profilePhoto?: string; } export interface SongEntry { - title: string; - link: string; - contributors: Contributor[]; + title: string; + link: string; + contributors: Contributor[]; }