Index: frontend/src/App.tsx =================================================================== --- frontend/src/App.tsx (revision 0f71490112c86ba2e2d18bbf12dac1b42e534433) +++ frontend/src/App.tsx (revision 4e5cf92d976588170fa715007a49de90e673172a) @@ -1,9 +1,9 @@ import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom"; -import AllUsers from "./components/userProfile/AllUsersHelper"; -import UserDetail from "./components/userProfile/UserDetailView"; -import LandingPage from "./LandingPage"; -import Login from "./Login"; -import Nav from "./Nav"; -import Register from "./Register"; +import AllUsers from "./pages/AllUsers"; +import LandingPage from "./pages/LandingPage"; +import Login from "./pages/Login"; +import Nav from "./pages/Nav"; +import Register from "./pages/Register"; +import UserDetailView from "./pages/UserDetailView"; const Layout = () => { @@ -37,5 +37,5 @@ { path: "/users/:userId", - element: , + element: , }, { Index: frontend/src/LandingPage.tsx =================================================================== --- frontend/src/LandingPage.tsx (revision 0f71490112c86ba2e2d18bbf12dac1b42e534433) +++ (revision ) @@ -1,5 +1,0 @@ -const LandingPage = () => { - return
landing page
; -}; - -export default LandingPage; Index: frontend/src/Login.tsx =================================================================== --- frontend/src/Login.tsx (revision 0f71490112c86ba2e2d18bbf12dac1b42e534433) +++ (revision ) @@ -1,71 +1,0 @@ -import { useState } from "react"; -import { useNavigate } from "react-router-dom"; -import axiosInstance, { scheduleTokenRefresh } from "./api/axiosInstance"; -import { useAuth } from "./context/authContext"; -import type { User } from "./types"; - -const Login = () => { - const [username, setUsername] = useState(""); - const [password, setPassword] = useState(""); - const [error, setError] = useState(null); - const { setUser } = useAuth(); - const navigate = useNavigate(); - - const handleLogin = async (e: React.FormEvent) => { - e.preventDefault(); - try { - const response = await axiosInstance.post<{ - user: User; - tokenExpiresIn: number; - }>("/auth/login", { username, password }); - scheduleTokenRefresh(response.data.tokenExpiresIn); - setUser(response.data.user); - navigate("/"); - } catch (error) { - setError("Login failed. Please check your credentials."); - } - }; - return ( -
-

Login

-
- {error &&

{error}

} -
- - setUsername(e.target.value)} - /> -
-
- - setPassword(e.target.value)} - /> -
- -
-
- ); -}; - -export default Login; Index: frontend/src/Nav.tsx =================================================================== --- frontend/src/Nav.tsx (revision 0f71490112c86ba2e2d18bbf12dac1b42e534433) +++ (revision ) @@ -1,85 +1,0 @@ -import { Link } from "react-router-dom"; -import axiosInstance, { baseURL } from "./api/axiosInstance"; -import Logo from "./assets/logo-finkwave.png"; -import { useAuth } from "./context/authContext"; - -const Nav = () => { - const { user, setUser, isAuthLoading } = useAuth(); - - const handleLogout = async (e: React.MouseEvent) => { - e.preventDefault(); - try { - await axiosInstance.post("/auth/logout"); - setUser(undefined); - } catch (error) { - console.error("Logout failed:", error); - } - }; - - return ( -
- - Finkwave Logo - - -
- {!isAuthLoading && ( -
- {user ? ( -
-
- {user.profilePhoto ? ( - {`${user.username}'s - ) : ( -
- - {user.username.charAt(0).toUpperCase()} - -
- )} - -
-

{user.username}

-

- {user.role} -

-
-
- -
- ) : ( -
- - Login - - - Register - -
- )} -
- )} -
-
- ); -}; - -export default Nav; Index: frontend/src/Register.tsx =================================================================== --- frontend/src/Register.tsx (revision 0f71490112c86ba2e2d18bbf12dac1b42e534433) +++ (revision ) @@ -1,160 +1,0 @@ -import { useEffect, useState } from "react"; -import { useNavigate } from "react-router"; -import axiosInstance, { scheduleTokenRefresh } from "./api/axiosInstance"; -import { useAuth } from "./context/authContext"; -import type { User } from "./types"; - -const Register = () => { - const { setUser } = useAuth(); - const [username, setUsername] = useState(""); - const [password, setPassword] = useState(""); - const [fullname, setFullname] = useState(""); - const [email, setEmail] = useState(""); - const [profilePhotoFile, setProfilePhotoFile] = useState(null); - const [previewProfilePhoto, setPreviewProfilePhoto] = useState( - null, - ); - - const navigate = useNavigate(); - - useEffect(() => { - return () => { - if (previewProfilePhoto) { - URL.revokeObjectURL(previewProfilePhoto); - } - }; - }, [previewProfilePhoto]); - - const handleRegister = async (e: React.FormEvent) => { - e.preventDefault(); - // todo: add proper error handling - if (profilePhotoFile && profilePhotoFile.size > 5 * 1024 * 1024) { - alert("Max file size is 5MB"); - return; - } - - if (profilePhotoFile && !profilePhotoFile.type.startsWith("image/")) { - alert("Only images allowed"); - return; - } - const formData = new FormData(); - if (profilePhotoFile) formData.append("profilePhoto", profilePhotoFile); - formData.append("username", username); - formData.append("fullname", fullname); - formData.append("email", email); - formData.append("password", password); - - try { - const response = await axiosInstance.post<{ - user: User; - tokenExpiresIn: number; - }>("/auth/register", formData); - scheduleTokenRefresh(response.data.tokenExpiresIn); - setUser(response.data.user); - navigate("/"); - } catch (error) { - console.error("Registration failed:", error); - } - }; - - return ( -
-

Register

-
-
- - setUsername(e.target.value)} - /> -
-
- - setPassword(e.target.value)} - /> -
-
- - setFullname(e.target.value)} - /> -
-
- - setEmail(e.target.value)} - /> -
-
- -
- - - {profilePhotoFile ? profilePhotoFile.name : "No file chosen"} - -
- { - if (e.target.files && e.target.files[0]) { - setProfilePhotoFile(e.target.files[0]); - setPreviewProfilePhoto(URL.createObjectURL(e.target.files[0])); - } - }} - /> -
- {previewProfilePhoto && ( -
-

Profile Photo Preview:

- Profile Preview -
- )} - -
-
- ); -}; - -export default Register; Index: frontend/src/components/userProfile/AllUsersHelper.tsx =================================================================== --- frontend/src/components/userProfile/AllUsersHelper.tsx (revision 0f71490112c86ba2e2d18bbf12dac1b42e534433) +++ (revision ) @@ -1,87 +1,0 @@ -import React, { useEffect, useState } from "react"; -import { useNavigate } from "react-router-dom"; -import axiosInstance from "../../api/axiosInstance"; -interface User { - id: number; - username: string; - fullName: string; -} - -const AllUsers = () => { - const [users, setUsers] = useState([]); - const [searchedUser, setSearchedUser] = useState(""); - const [error, setError] = useState(null); - const navigate = useNavigate(); - - useEffect(() => { - const fetchUsers = async () => { - const response = axiosInstance.get("/users/all"); - setUsers((await response).data); - }; - fetchUsers(); - }, []); - - const handleUserClick = (userId: number) => { - navigate(`/users/${userId}`); - }; - - const handleSearch = async (e: React.FormEvent) => { - e.preventDefault(); - try { - const response = await axiosInstance.get(`/users/search`, { - params: { name: searchedUser }, - }); - setUsers(response.data); - } catch (err: any) { - const errorMessage = err.response?.data?.error || "Search failed"; - setError(errorMessage); - } - }; - - if (users.length == 0) return
Loading...
; - if (error) { - return ( -
-

Error

-

{error}

-
- ); - } - - return ( -
-

All Users

-
- setSearchedUser(e.target.value)} - className="border p-2 rounded w-full" - placeholder="Search for a user..." - /> - -
- -
- {users.map((u) => ( -
handleUserClick(u.id)} - className="bg-white shadow-md rounded-lg p-4 hover:shadow-lg hover:bg-gray-50 cursor-pointer transition-all" - > -

{u.fullName}

-

@{u.username}

-

{u.id}

-
- ))} -
-
- ); -}; - -export default AllUsers; Index: frontend/src/components/userProfile/UserDetailView.tsx =================================================================== --- frontend/src/components/userProfile/UserDetailView.tsx (revision 0f71490112c86ba2e2d18bbf12dac1b42e534433) +++ (revision ) @@ -1,119 +1,0 @@ -import { useEffect, useState } from "react"; -import { useParams, useNavigate } from "react-router-dom"; -import ArtistView from "./ArtistView"; -import ListenerView from "./ListenerView"; -import axiosInstance from "../../api/axiosInstance"; -import type { ArtistContributionDTO } from "../../types"; -import type { MusicalEntityDTO } from "../../types"; -import type { Playlist } from "../../types"; - -interface User { - id: number; - username: string; - fullName: string; - userType: string; - followers: number; - following: number; - isFollowedByCurrentUser: boolean; - - musicalEntities?: { - contributions: ArtistContributionDTO[]; - }; - - likes?: { - likedEntities: MusicalEntityDTO[]; - }; - - createdPlaylists?: Playlist[]; -} - -const UserDetail = () => { - // user refers to the selected user NOT to the user from context - 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 axiosInstance.get(`/users/${userId}`); - - setUser(response.data); - } catch (err: any) { - const errorMessage = - err.response?.data?.error || "Failed to fetch user"; - setError(errorMessage); - } - }; - 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; Index: frontend/src/context/authContext.tsx =================================================================== --- frontend/src/context/authContext.tsx (revision 0f71490112c86ba2e2d18bbf12dac1b42e534433) +++ frontend/src/context/authContext.tsx (revision 4e5cf92d976588170fa715007a49de90e673172a) @@ -12,5 +12,5 @@ scheduleTokenRefresh, } from "../api/axiosInstance"; -import { type User } from "../types"; +import { type User } from "../utils/types"; interface AuthContextType { Index: frontend/src/pages/AllUsers.tsx =================================================================== --- frontend/src/pages/AllUsers.tsx (revision 4e5cf92d976588170fa715007a49de90e673172a) +++ frontend/src/pages/AllUsers.tsx (revision 4e5cf92d976588170fa715007a49de90e673172a) @@ -0,0 +1,88 @@ +import React, { useEffect, useState } from "react"; +import { useNavigate } from "react-router-dom"; +import axiosInstance from "../api/axiosInstance"; + +interface User { + id: number; + username: string; + fullName: string; +} + +const AllUsers = () => { + const [users, setUsers] = useState([]); + const [searchedUser, setSearchedUser] = useState(""); + const [error, setError] = useState(null); + const navigate = useNavigate(); + + useEffect(() => { + const fetchUsers = async () => { + const response = axiosInstance.get("/users/all"); + setUsers((await response).data); + }; + fetchUsers(); + }, []); + + const handleUserClick = (userId: number) => { + navigate(`/users/${userId}`); + }; + + const handleSearch = async (e: React.FormEvent) => { + e.preventDefault(); + try { + const response = await axiosInstance.get(`/users/search`, { + params: { name: searchedUser }, + }); + setUsers(response.data); + } catch (err: any) { + const errorMessage = err.response?.data?.error || "Search failed"; + setError(errorMessage); + } + }; + + if (users.length == 0) return
Loading...
; + if (error) { + return ( +
+

Error

+

{error}

+
+ ); + } + + return ( +
+

All Users

+
+ setSearchedUser(e.target.value)} + className="border p-2 rounded w-full" + placeholder="Search for a user..." + /> + +
+ +
+ {users.map((u) => ( +
handleUserClick(u.id)} + className="bg-white shadow-md rounded-lg p-4 hover:shadow-lg hover:bg-gray-50 cursor-pointer transition-all" + > +

{u.fullName}

+

@{u.username}

+

{u.id}

+
+ ))} +
+
+ ); +}; + +export default AllUsers; Index: frontend/src/pages/LandingPage.tsx =================================================================== --- frontend/src/pages/LandingPage.tsx (revision 4e5cf92d976588170fa715007a49de90e673172a) +++ frontend/src/pages/LandingPage.tsx (revision 4e5cf92d976588170fa715007a49de90e673172a) @@ -0,0 +1,5 @@ +const LandingPage = () => { + return
landing page
; +}; + +export default LandingPage; Index: frontend/src/pages/Login.tsx =================================================================== --- frontend/src/pages/Login.tsx (revision 4e5cf92d976588170fa715007a49de90e673172a) +++ frontend/src/pages/Login.tsx (revision 4e5cf92d976588170fa715007a49de90e673172a) @@ -0,0 +1,71 @@ +import { useState } from "react"; +import { useNavigate } from "react-router-dom"; +import axiosInstance, { scheduleTokenRefresh } from "../api/axiosInstance"; +import { useAuth } from "../context/authContext"; +import type { User } from "../utils/types"; + +const Login = () => { + const [username, setUsername] = useState(""); + const [password, setPassword] = useState(""); + const [error, setError] = useState(null); + const { setUser } = useAuth(); + const navigate = useNavigate(); + + const handleLogin = async (e: React.FormEvent) => { + e.preventDefault(); + try { + const response = await axiosInstance.post<{ + user: User; + tokenExpiresIn: number; + }>("/auth/login", { username, password }); + scheduleTokenRefresh(response.data.tokenExpiresIn); + setUser(response.data.user); + navigate("/"); + } catch (error) { + setError("Login failed. Please check your credentials."); + } + }; + return ( +
+

Login

+
+ {error &&

{error}

} +
+ + setUsername(e.target.value)} + /> +
+
+ + setPassword(e.target.value)} + /> +
+ +
+
+ ); +}; + +export default Login; Index: frontend/src/pages/Nav.tsx =================================================================== --- frontend/src/pages/Nav.tsx (revision 4e5cf92d976588170fa715007a49de90e673172a) +++ frontend/src/pages/Nav.tsx (revision 4e5cf92d976588170fa715007a49de90e673172a) @@ -0,0 +1,85 @@ +import { Link } from "react-router-dom"; +import axiosInstance, { baseURL } from "../api/axiosInstance"; +import Logo from "../assets/logo-finkwave.png"; +import { useAuth } from "../context/authContext"; + +const Nav = () => { + const { user, setUser, isAuthLoading } = useAuth(); + + const handleLogout = async (e: React.MouseEvent) => { + e.preventDefault(); + try { + await axiosInstance.post("/auth/logout"); + setUser(undefined); + } catch (error) { + console.error("Logout failed:", error); + } + }; + + return ( +
+ + Finkwave Logo + + +
+ {!isAuthLoading && ( +
+ {user ? ( +
+
+ {user.profilePhoto ? ( + {`${user.username}'s + ) : ( +
+ + {user.username.charAt(0).toUpperCase()} + +
+ )} + +
+

{user.username}

+

+ {user.role} +

+
+
+ +
+ ) : ( +
+ + Login + + + Register + +
+ )} +
+ )} +
+
+ ); +}; + +export default Nav; Index: frontend/src/pages/Register.tsx =================================================================== --- frontend/src/pages/Register.tsx (revision 4e5cf92d976588170fa715007a49de90e673172a) +++ frontend/src/pages/Register.tsx (revision 4e5cf92d976588170fa715007a49de90e673172a) @@ -0,0 +1,160 @@ +import { useEffect, useState } from "react"; +import { useNavigate } from "react-router"; +import axiosInstance, { scheduleTokenRefresh } from "../api/axiosInstance"; +import { useAuth } from "../context/authContext"; +import type { User } from "../utils/types"; + +const Register = () => { + const { setUser } = useAuth(); + const [username, setUsername] = useState(""); + const [password, setPassword] = useState(""); + const [fullname, setFullname] = useState(""); + const [email, setEmail] = useState(""); + const [profilePhotoFile, setProfilePhotoFile] = useState(null); + const [previewProfilePhoto, setPreviewProfilePhoto] = useState( + null, + ); + + const navigate = useNavigate(); + + useEffect(() => { + return () => { + if (previewProfilePhoto) { + URL.revokeObjectURL(previewProfilePhoto); + } + }; + }, [previewProfilePhoto]); + + const handleRegister = async (e: React.FormEvent) => { + e.preventDefault(); + // todo: add proper error handling + if (profilePhotoFile && profilePhotoFile.size > 5 * 1024 * 1024) { + alert("Max file size is 5MB"); + return; + } + + if (profilePhotoFile && !profilePhotoFile.type.startsWith("image/")) { + alert("Only images allowed"); + return; + } + const formData = new FormData(); + if (profilePhotoFile) formData.append("profilePhoto", profilePhotoFile); + formData.append("username", username); + formData.append("fullname", fullname); + formData.append("email", email); + formData.append("password", password); + + try { + const response = await axiosInstance.post<{ + user: User; + tokenExpiresIn: number; + }>("/auth/register", formData); + scheduleTokenRefresh(response.data.tokenExpiresIn); + setUser(response.data.user); + navigate("/"); + } catch (error) { + console.error("Registration failed:", error); + } + }; + + return ( +
+

Register

+
+
+ + setUsername(e.target.value)} + /> +
+
+ + setPassword(e.target.value)} + /> +
+
+ + setFullname(e.target.value)} + /> +
+
+ + setEmail(e.target.value)} + /> +
+
+ +
+ + + {profilePhotoFile ? profilePhotoFile.name : "No file chosen"} + +
+ { + if (e.target.files && e.target.files[0]) { + setProfilePhotoFile(e.target.files[0]); + setPreviewProfilePhoto(URL.createObjectURL(e.target.files[0])); + } + }} + /> +
+ {previewProfilePhoto && ( +
+

Profile Photo Preview:

+ Profile Preview +
+ )} + +
+
+ ); +}; + +export default Register; Index: frontend/src/pages/UserDetailView.tsx =================================================================== --- frontend/src/pages/UserDetailView.tsx (revision 4e5cf92d976588170fa715007a49de90e673172a) +++ frontend/src/pages/UserDetailView.tsx (revision 4e5cf92d976588170fa715007a49de90e673172a) @@ -0,0 +1,121 @@ +import { useEffect, useState } from "react"; +import { useNavigate, useParams } from "react-router-dom"; +import axiosInstance from "../api/axiosInstance"; +import ArtistView from "../components/userProfile/ArtistView"; +import ListenerView from "../components/userProfile/ListenerView"; +import type { + ArtistContributionDTO, + MusicalEntityDTO, + Playlist, +} from "../utils/types"; + +interface User { + id: number; + username: string; + fullName: string; + userType: string; + followers: number; + following: number; + isFollowedByCurrentUser: boolean; + + musicalEntities?: { + contributions: ArtistContributionDTO[]; + }; + + likes?: { + likedEntities: MusicalEntityDTO[]; + }; + + createdPlaylists?: Playlist[]; +} + +const UserDetail = () => { + // user refers to the selected user NOT to the user from context + 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 axiosInstance.get(`/users/${userId}`); + + setUser(response.data); + } catch (err: any) { + const errorMessage = + err.response?.data?.error || "Failed to fetch user"; + setError(errorMessage); + } + }; + 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; Index: frontend/src/types.ts =================================================================== --- frontend/src/types.ts (revision 0f71490112c86ba2e2d18bbf12dac1b42e534433) +++ (revision ) @@ -1,28 +1,0 @@ -export interface User { - username: string; - fullName: string; - email?: string; - profilePhoto?: string | null; - role?: "ADMIN" | "NONADMIN"; -} - -export interface ArtistContributionDTO { - musicalEntityId: number; - title: string; - genre: string; - role: string; - entityType: string; -} -export interface MusicalEntityDTO { - id: number; - title: string; - genre: string; - type: string; -} - -export interface Playlist { - id: number; - name: string; - cover: string; - creatorName: string; -} Index: frontend/src/utils/types.ts =================================================================== --- frontend/src/utils/types.ts (revision 4e5cf92d976588170fa715007a49de90e673172a) +++ frontend/src/utils/types.ts (revision 4e5cf92d976588170fa715007a49de90e673172a) @@ -0,0 +1,28 @@ +export interface User { + username: string; + fullName: string; + email?: string; + profilePhoto?: string | null; + role?: "ADMIN" | "NONADMIN"; +} + +export interface ArtistContributionDTO { + musicalEntityId: number; + title: string; + genre: string; + role: string; + entityType: string; +} +export interface MusicalEntityDTO { + id: number; + title: string; + genre: string; + type: string; +} + +export interface Playlist { + id: number; + name: string; + cover: string; + creatorName: string; +}