Changeset 2b08bed for frontend

Timestamp:

01/30/26 22:14:36 (5 months ago)

Author:

Dimitar Arsov <dimitararsov04@…>

Branches:

main

Children:

2730163

Parents:

98992cf

Message:

show followers, following and songs in album

Location:

frontend/src

Files:

• App.tsx (modified) (1 diff)
• components/userProfile/ArtistView.tsx (modified) (1 diff)
• components/userProfile/ListenerView.tsx (modified) (1 diff)
• components/userProfile/UserListModal.tsx (added)
• pages/MusicalCollection.tsx (added)
• pages/UserDetailView.tsx (modified) (8 diffs)
• utils/types.ts (modified) (2 diffs)

frontend/src/App.tsx

@@ -8 +8 @@
 import Register from "./pages/Register";
 import UserDetailView from "./pages/UserDetailView";
+import MusicalCollection from "./pages/MusicalCollection";
 
 const Layout = () => {
-        return (
-                <div className="flex flex-col min-h-screen">
-                        <Nav />
-                        <ToastContainer
-                                position="top-right"
-                                autoClose={2000}
-                                hideProgressBar={false}
-                                newestOnTop={false}
-                                closeOnClick
-                                rtl={false}
-                                pauseOnFocusLoss
-                                draggable
-                                pauseOnHover
-                                theme="light"
-                        />
-                        <main className="grow">
-                                <Outlet />
-                        </main>
-                </div>
-        );
+  return (
+    <div className="flex flex-col min-h-screen">
+      <Nav />
+      <ToastContainer
+        position="top-right"
+        autoClose={2000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        theme="light"
+      />
+      <main className="grow">
+        <Outlet />
+      </main>
+    </div>
+  );
 };
 
 const router = createBrowserRouter([
-        {
-                path: "",
-                element: <Layout />,
-                children: [
-                        {
-                                path: "/",
-                                element: <LandingPage />,
-                        },
-                        {
-                                path: "/login",
-                                element: <Login />,
-                        },
-                        {
-                                path: "/users",
-                                element: <AllUsers />,
-                        },
-                        {
-                                path: "/users/:userId",
-                                element: <UserDetailView />,
-                        },
-                        {
-                                path: "/register",
-                                element: <Register />,
-                        },
-                ],
-        },
+  {
+    path: "",
+    element: <Layout />,
+    children: [
+      {
+        path: "/",
+        element: <LandingPage />,
+      },
+      {
+        path: "/login",
+        element: <Login />,
+      },
+      {
+        path: "/users",
+        element: <AllUsers />,
+      },
+      {
+        path: "/users/:userId",
+        element: <UserDetailView />,
+      },
+      {
+        path: "/register",
+        element: <Register />,
+      },
+      {
+        path: "/collection/:type/:id",
+        element: <MusicalCollection />,
+      },
+    ],
+  },
 ]);
 
 function App() {
-        return <RouterProvider router={router} />;
+  return <RouterProvider router={router} />;
 }
 

frontend/src/components/userProfile/ArtistView.tsx

@@ -37 +37 @@
                 className="group cursor-pointer"
                 onClick={() =>
-                  navigate(`/musical-entity/${album.musicalEntityId}`)
+                  navigate(`/collection/album/${album.musicalEntityId}`)
                 }
               >

frontend/src/components/userProfile/ListenerView.tsx

@@ -31 +31 @@
                 key={playlist.id}
                 className="group cursor-pointer"
-                onClick={() => navigate(`/playlist/${playlist.id}`)}
+                onClick={() => navigate(`/playlists/${playlist.id}`)}
               >
                 <div className="aspect-square rounded-md overflow-hidden bg-gray-100 mb-2 relative shadow-sm group-hover:shadow-lg transition-all">

frontend/src/pages/UserDetailView.tsx

@@ -4 +4 @@
 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 +26 @@
 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<UserProfile | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [showModal, setShowModal] = useState(false);
+  const [modalTitle, setModalTitle] = useState("");
+  const [modalUsers, setModalUsers] = useState<any[]>([]);
+  const [isLoadingModal, setIsLoadingModal] = useState(false);
   const [isFollowing, setIsFollowing] = useState(false);
 
@@ -47 +45 @@
         `/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 +111 @@
         const response = await axiosInstance.get(`/users/${userId}`);
         console.log(response.data);
-
         setUser(response.data);
       } catch (err: any) {
@@ -84 +134 @@
   return (
     <div className="container mx-auto p-6">
+      {isLoadingModal && (
+        <div className="fixed inset-0 z-40 bg-black/30 backdrop-blur-sm flex items-center justify-center">
+          <div className="flex items-center gap-3">
+            <div className="w-6 h-6 border-3 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
+          </div>
+        </div>
+      )}
       <button
         onClick={() => navigate(-1)}
@@ -94 +151 @@
         <div className="flex items-start gap-6 mb-8">
           <div className="shrink-0">
-            <div className="w-32 h-32 rounded-full bg-linear-to-br from-blue-400 to-purple-500 flex items-center justify-center text-white text-4xl font-bold shadow-lg">
-              {user.fullName.charAt(0).toUpperCase()}
+            <div className="w-32 h-32 rounded-full bg-linear-to-br from-blue-400 to-purple-500 flex items-center justify-center text-white text-4xl font-bold shadow-lg overflow-hidden">
+              {user.profilePhoto ? (
+                <img
+                  src={`${baseURL}/${user.profilePhoto}`}
+                  alt={user.fullName}
+                  className="w-full h-full object-cover"
+                />
+              ) : (
+                user.fullName.charAt(0).toUpperCase()
+              )}
             </div>
           </div>
@@ -106 +171 @@
 
             <div className="flex gap-6 mb-4 text-gray-700">
-              <div className="flex flex-col">
+              <div
+                className={`flex flex-col ${user.userType == "LISTENER" ? "cursor-pointer" : "cursor-default"}`}
+                onClick={
+                  user.userType === "LISTENER" ? displayFollowers : undefined
+                }
+              >
                 <span className="text-2xl font-bold">{user.followers}</span>
                 <span className="text-sm text-gray-500">Followers</span>
               </div>
-              <div className="flex flex-col">
+              <div
+                className={`flex flex-col ${user.userType == "LISTENER" ? "cursor-pointer" : "cursor-default"}`}
+                onClick={
+                  user.userType === "LISTENER" ? displayFollowing : undefined
+                }
+              >
                 <span className="text-2xl font-bold">{user.following}</span>
                 <span className="text-sm text-gray-500">Following</span>
@@ -144 +219 @@
           />
         )}
+
+        {showModal && (
+          <UserListModal
+            title={modalTitle}
+            users={modalUsers}
+            onClose={() => setShowModal(false)}
+            onFollowToggle={handleFollowInModal}
+          />
+        )}
       </div>
     </div>

frontend/src/utils/types.ts

@@ -19 +19 @@
   genre: string;
   type: string;
+  releasedBy: string;
 }
 
@@ -27 +28 @@
   creatorName: string;
 }
+
+export interface BaseNonAdminUser {
+  id: number;
+  fullName: string;
+  userType: string;
+  profilePhoto: string;
+  followers: number;
+  following: number;
+  isFollowedByCurrentUser: boolean;
+}