Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/GlobalExceptionHandler.java =================================================================== --- finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/GlobalExceptionHandler.java (revision a3ae097ff557650aeeb473a86f99d8430c23d60d) +++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/GlobalExceptionHandler.java (revision a3ae097ff557650aeeb473a86f99d8430c23d60d) @@ -0,0 +1,21 @@ +package com.ukim.finki.develop.finkwave.controller; + +import org.springframework.http.HttpStatus; +import org.springframework.http.ResponseEntity; +import org.springframework.web.bind.annotation.ExceptionHandler; +import org.springframework.web.bind.annotation.RestControllerAdvice; + +import java.util.HashMap; +import java.util.Map; + +@RestControllerAdvice +public class GlobalExceptionHandler { + + @ExceptionHandler(RuntimeException.class) + public ResponseEntity> handleRuntimeException(RuntimeException ex) { + Map errorMap = new HashMap<>(); + errorMap.put("error", ex.getMessage()); + + return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(errorMap); + } +} 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 fd81a1852ddb6ef6fb10e109702ca71525257923) +++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/NonAdminUserController.java (revision a3ae097ff557650aeeb473a86f99d8430c23d60d) @@ -27,3 +27,8 @@ return ResponseEntity.ok(nonAdminUserService.getById(id)); } + + @GetMapping("/search") + public HttpEntity>searchUsers(@RequestParam String name){ + return ResponseEntity.ok(nonAdminUserService.searchUsers(name)); + } } Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/repository/NonAdminUserRepository.java =================================================================== --- finkwave/src/main/java/com/ukim/finki/develop/finkwave/repository/NonAdminUserRepository.java (revision fd81a1852ddb6ef6fb10e109702ca71525257923) +++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/repository/NonAdminUserRepository.java (revision a3ae097ff557650aeeb473a86f99d8430c23d60d) @@ -16,4 +16,9 @@ List findAllWithUser(); + @Query("SELECT u FROM NonAdminUser u " + + "WHERE LOWER(u.user.fullName) LIKE LOWER(CONCAT('%', :name, '%') )"+ + "OR LOWER(u.user.username) LIKE LOWER(CONCAT('%', :name, '%' )) ") + List searchByName(String name); + 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 fd81a1852ddb6ef6fb10e109702ca71525257923) +++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/NonAdminUserService.java (revision a3ae097ff557650aeeb473a86f99d8430c23d60d) @@ -84,4 +84,16 @@ } + + public ListsearchUsers(String name){ + return nonAdminUserRepository.searchByName(name).stream() + .map(user -> { + String type = determineType(user.getId()); + Long followers = followRepository.countByFolloweeId(user.getId()); + Long following = followRepository.countByFollowerId(user.getId()); + return mapper.toDTO(user, type, followers, following); + }) + .collect(Collectors.toList()); + } + private String determineType(Long id) { if (artistRepository.existsById(id)) { Index: frontend/package-lock.json =================================================================== --- frontend/package-lock.json (revision fd81a1852ddb6ef6fb10e109702ca71525257923) +++ frontend/package-lock.json (revision a3ae097ff557650aeeb473a86f99d8430c23d60d) @@ -10,4 +10,5 @@ "dependencies": { "@tailwindcss/vite": "^4.1.18", + "lucide-react": "^0.563.0", "react": "^19.2.0", "react-dom": "^19.2.0", @@ -3114,4 +3115,13 @@ } }, + "node_modules/lucide-react": { + "version": "0.563.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.563.0.tgz", + "integrity": "sha512-8dXPB2GI4dI8jV4MgUDGBeLdGk8ekfqVZ0BdLcrRzocGgG75ltNEmWS+gE7uokKF/0oSUuczNDT+g9hFJ23FkA==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/magic-string": { "version": "0.30.21", Index: frontend/package.json =================================================================== --- frontend/package.json (revision fd81a1852ddb6ef6fb10e109702ca71525257923) +++ frontend/package.json (revision a3ae097ff557650aeeb473a86f99d8430c23d60d) @@ -12,4 +12,5 @@ "dependencies": { "@tailwindcss/vite": "^4.1.18", + "lucide-react": "^0.563.0", "react": "^19.2.0", "react-dom": "^19.2.0", Index: frontend/src/App.tsx =================================================================== --- frontend/src/App.tsx (revision fd81a1852ddb6ef6fb10e109702ca71525257923) +++ frontend/src/App.tsx (revision a3ae097ff557650aeeb473a86f99d8430c23d60d) @@ -2,5 +2,5 @@ import { BrowserRouter, Routes, Route } from "react-router-dom"; import AllUsers from "./components/userProfile/AllUsersHelper"; -import UserDetail from "./components/userProfile/UserDetail"; +import UserDetail from "./components/userProfile/UserDetailView"; function Home() { Index: frontend/src/components/userProfile/AllUsersHelper.tsx =================================================================== --- frontend/src/components/userProfile/AllUsersHelper.tsx (revision fd81a1852ddb6ef6fb10e109702ca71525257923) +++ frontend/src/components/userProfile/AllUsersHelper.tsx (revision a3ae097ff557650aeeb473a86f99d8430c23d60d) @@ -1,3 +1,3 @@ -import { useEffect, useState } from "react"; +import React, { useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; @@ -10,4 +10,6 @@ const AllUsers = () => { const [users, setUsers] = useState([]); + const [searchedUser, setSearchedUser] = useState(""); + const [error, setError] = useState(null); const navigate = useNavigate(); @@ -25,7 +27,40 @@ }; + const handleSearch = async (e: React.FormEvent) => { + e.preventDefault(); + try { + const response = await fetch( + `http://localhost:8080/users/search?name=${searchedUser}`, + ); + if (!response.ok) throw new Error("Search failed"); + + const data = await response.json(); + setUsers(data); + } catch (err: any) { + setError(err.message); + } + }; + + if (users.length == 0) return
Loading...
; + return (

All Users

+
+ setSearchedUser(e.target.value)} + className="border p-2 rounded w-full" + placeholder="Search for a user..." + /> + +
+
{users.map((u) => ( Index: frontend/src/components/userProfile/ArtistView.tsx =================================================================== --- frontend/src/components/userProfile/ArtistView.tsx (revision fd81a1852ddb6ef6fb10e109702ca71525257923) +++ frontend/src/components/userProfile/ArtistView.tsx (revision a3ae097ff557650aeeb473a86f99d8430c23d60d) @@ -1,3 +1,4 @@ import { useNavigate } from "react-router-dom"; +import { Music, Disc3, Mic2 } from "lucide-react"; interface ArtistContributionDTO { @@ -15,37 +16,99 @@ const navigate = useNavigate(); + const albums = contributions.filter((c) => c.entityType === "Album"); + const songs = contributions.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", + }; + return colors[role] || "bg-gray-500"; + }; + return ( -
-

Contributions

-
- {contributions.map((contribution, index) => ( -
- navigate(`/musical-entity/${contribution.musicalEntityId}`) - } - > -
-
-

{contribution.title}

-

- ID: {contribution.musicalEntityId} -

+
+ {/* Albums Section */} + {albums.length > 0 && ( +
+
+ +

Albums

+
+
+ {albums.map((album, index) => ( +
+ navigate(`/musical-entity/${album.musicalEntityId}`) + } + > +
+
+ +
+
+ + {album.role.replace("_", " ")} + +
+
+

+ {album.title} +

-
- - {contribution.role} - - - {contribution.entityType} + ))} +
+
+ )} + + {songs.length > 0 && ( +
+
+ +

Songs

+
+
+ {songs.map((song, index) => ( +
+ navigate(`/musical-entity/${song.musicalEntityId}`) + } + > +
+ +
+
+

+ {song.title} +

+
+ +
+
+ + {song.role.replace("_", " ")}
-
+ ))}
- ))} -
+
+ )} + {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 fd81a1852ddb6ef6fb10e109702ca71525257923) +++ frontend/src/components/userProfile/ListenerView.tsx (revision a3ae097ff557650aeeb473a86f99d8430c23d60d) @@ -1,3 +1,4 @@ import { useNavigate } from "react-router-dom"; +import { Heart, ListMusic, Music, Album } from "lucide-react"; interface MusicalEntityDTO { @@ -23,122 +24,121 @@ const navigate = useNavigate(); + const likedSongs = likedEntities.filter((e) => e.type === "SONG"); + const likedAlbums = likedEntities.filter((e) => e.type === "ALBUM"); + return ( -
- {/* --- PLAYLISTS SECTION --- */} -
-

- My Playlists - - ({playlists?.length}) - -

+
+ {playlists && playlists.length > 0 && ( +
+
+ +

My Playlists

+ + ({playlists.length}) + +
-
- {playlists?.map((playlist) => ( -
navigate(`/playlist/${playlist.id}`)} - > - {/* Playlist Cover Container */} -
- {playlist.cover ? ( - {playlist.name} - ) : ( -
- - - -
- )} - {/* Hover Overlay */} -
-
- - - -
+
+ {playlists.map((playlist) => ( +
navigate(`/playlist/${playlist.id}`)} + > +
+ {playlist.cover ? ( + {playlist.name} + ) : ( +
+ +
+ )} +
+

+ {playlist.name} +

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

Liked Songs

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

+ {song.title} +

+

{song.genre}

+ ))} +
+
+ )} -

- {playlist.name} -

-

- Playlist -

-
- ))} + {likedAlbums.length > 0 && ( +
+
+ +

Liked Albums

+ + ({likedAlbums.length}) + +
- {playlists?.length === 0 && ( -
-

No playlists created yet

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

+ {album.title} +

+

{album.genre}

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

Nothing here yet

+

+ Start exploring music to build your collection +

-
- - {/* --- LIKED MUSIC SECTION --- */} -
-

Liked Music

-
- {likedEntities.map((entity) => ( -
navigate(`/musical-entity/${entity.id}`)} - > -
-
- - {entity.title} - -

{entity.genre}

-
- - {entity.type} - -
-
- ))} -
- {likedEntities.length === 0 && ( -

- No liked music yet -

- )} -
+ )}
); Index: ontend/src/components/userProfile/UserDetail.tsx =================================================================== --- frontend/src/components/userProfile/UserDetail.tsx (revision fd81a1852ddb6ef6fb10e109702ca71525257923) +++ (revision ) @@ -1,123 +1,0 @@ -import { useEffect, useState } from "react"; -import { useParams, useNavigate } from "react-router-dom"; -import ArtistView from "./ArtistView"; -import ListenerView from "./ListenerView"; - -interface MusicalEntityDTO { - id: number; - title: string; - genre: string; - type: string; -} - -interface ArtistContributionDTO { - musicalEntityId: number; - title: string; - role: string; - entityType: string; -} - -interface Playlist { - id: number; - name: string; - cover: string; - creatorName: string; -} - -interface User { - id: number; - username: string; - fullName: string; - userType: string; - followers: number; - following: number; - - musicalEntities?: { - contributions: ArtistContributionDTO[]; - }; - - likes?: { - likedEntities: MusicalEntityDTO[]; - }; - - createdPlaylists?: Playlist[]; -} - -const UserDetail = () => { - const { userId } = useParams(); - const navigate = useNavigate(); - const [user, setUser] = useState(null); - - useEffect(() => { - const fetchUser = async () => { - console.log(userId); - const response = await fetch(`http://localhost:8080/users/${userId}`); - const data = await response.json(); - console.log("Fetched user data:", data); - setUser(data); - }; - fetchUser(); - }, [userId]); - - if (!user) return
Loading...
; - - return ( -
- - -
- {/* Profile Header */} -
- {/* Profile Photo */} -
-
- {user.fullName.charAt(0).toUpperCase()} -
-
- - {/* User Info */} -
-

{user.fullName}

- - {user.userType} - - - {/* Followers/Following Stats */} -
-
- {user.followers} - Followers -
-
- {user.following} - Following -
-
- - -
-
- - {user.userType === "ARTIST" && user.musicalEntities?.contributions && ( - - )} - - {user.userType === "LISTENER" && user.likes?.likedEntities && ( - - )} -
-
- ); -}; - -export default UserDetail; Index: frontend/src/components/userProfile/UserDetailView.tsx =================================================================== --- frontend/src/components/userProfile/UserDetailView.tsx (revision a3ae097ff557650aeeb473a86f99d8430c23d60d) +++ frontend/src/components/userProfile/UserDetailView.tsx (revision a3ae097ff557650aeeb473a86f99d8430c23d60d) @@ -0,0 +1,138 @@ +import { useEffect, useState } from "react"; +import { useParams, useNavigate } from "react-router-dom"; +import ArtistView from "./ArtistView"; +import ListenerView from "./ListenerView"; + +interface MusicalEntityDTO { + id: number; + title: string; + genre: string; + type: string; +} + +interface ArtistContributionDTO { + musicalEntityId: number; + title: string; + role: string; + entityType: string; +} + +interface Playlist { + id: number; + name: string; + cover: string; + creatorName: string; +} + +interface User { + id: number; + username: string; + fullName: string; + userType: string; + followers: number; + following: number; + + musicalEntities?: { + contributions: ArtistContributionDTO[]; + }; + + likes?: { + likedEntities: MusicalEntityDTO[]; + }; + + createdPlaylists?: Playlist[]; +} + +const UserDetail = () => { + const { userId } = useParams(); + const navigate = useNavigate(); + const [user, setUser] = useState(null); + const [error, setError] = useState(null); + + useEffect(() => { + const fetchUser = async () => { + setError(null); + try { + const response = await fetch(`http://localhost:8080/users/${userId}`); + + if (!response.ok) { + const errorData = await response.json(); + throw new Error(errorData.error || "Failed to fetch user"); + } + + const data = await response.json(); + setUser(data); + } catch (err: any) { + setError(err.message); + } + }; + fetchUser(); + }, [userId]); + + if (error) { + return ( +
+

Error

+

{error}

+
+ ); + } + + if (!user) return
Loading...
; + + return ( +
+ + +
+
+
+
+ {user.fullName.charAt(0).toUpperCase()} +
+
+ +
+

{user.fullName}

+ + {user.userType} + + +
+
+ {user.followers} + Followers +
+
+ {user.following} + Following +
+
+ + +
+
+ + {user.userType === "ARTIST" && user.musicalEntities?.contributions && ( + + )} + + {user.userType === "LISTENER" && user.likes?.likedEntities && ( + + )} +
+
+ ); +}; + +export default UserDetail;