Changeset 2730163 for frontend/src

Timestamp:

01/31/26 22:34:40 (5 months ago)

Author:

Dimitar Arsov <dimitararsov04@…>

Branches:

main

Children:

d2af1a6

Parents:

2b08bed

Message:

show songs in playlists/albums

Location:

frontend/src

Files:

• App.tsx (modified) (2 diffs)
• components/userProfile/ListenerView.tsx (modified) (3 diffs)
• components/userProfile/UserListModal.tsx (modified) (1 diff)
• pages/MusicalCollection.tsx (modified) (6 diffs)
• pages/UserDetail.tsx (moved) (moved from frontend/src/pages/UserDetailView.tsx ) (8 diffs)
• utils/error.ts (added)
• utils/types.ts (modified) (3 diffs)

frontend/src/App.tsx

@@ -7 +7 @@
 import Nav from "./pages/Nav";
 import Register from "./pages/Register";
-import UserDetailView from "./pages/UserDetailView";
+import UserDetail from "./pages/UserDetail";
 import MusicalCollection from "./pages/MusicalCollection";
 
@@ -52 +52 @@
       {
         path: "/users/:userId",
-        element: <UserDetailView />,
+        element: <UserDetail />,
       },
       {

frontend/src/components/userProfile/ListenerView.tsx

@@ -20 +20 @@
           <div className="flex items-center gap-2 mb-6 pb-2 border-b-2 border-gray-200">
             <ListMusic className="w-6 h-6 text-gray-700" />
-            <h3 className="text-2xl font-bold text-gray-800">My Playlists</h3>
+            <h3 className="text-2xl font-bold text-gray-800">
+              Created Playlists
+            </h3>
             <span className="text-sm text-gray-400 ml-1">
               ({playlists.length})
@@ -31 +33 @@
                 key={playlist.id}
                 className="group cursor-pointer"
-                onClick={() => navigate(`/playlists/${playlist.id}`)}
+                onClick={() => navigate(`/collection/playlist/${playlist.id}`)}
               >
                 <div className="aspect-square rounded-md overflow-hidden bg-gray-100 mb-2 relative shadow-sm group-hover:shadow-lg transition-all">
@@ -105 +107 @@
                 key={album.id}
                 className="group cursor-pointer"
-                onClick={() => navigate(`/musical-entity/${album.id}`)}
+                onClick={() => navigate(`/collection/album/${album.id}`)}
               >
                 <div className="aspect-square rounded-lg overflow-hidden bg-gradient-to-br from-blue-100 to-indigo-100 mb-3 flex items-center justify-center shadow-sm group-hover:shadow-md transition-all">

frontend/src/components/userProfile/UserListModal.tsx

@@ -25 +25 @@
           <button
             onClick={onClose}
-            className="text-gray-500 hover:text-black text-2xl"
+            className="text-gray-500 hover:text-black text-2xl cursor-pointer"
           >
             &times;

frontend/src/pages/MusicalCollection.tsx

@@ -2 +2 @@
 import { useNavigate, useParams } from "react-router-dom";
 import axiosInstance from "../api/axiosInstance";
-
-interface Song {
+import type { Song, Album, Playlist } from "../utils/types";
+import { handleError } from "../utils/error";
+interface CollectionView {
   id: number;
   title: string;
-  genre: string;
-  type: "SONG";
-  releasedBy: string;
-  isLikedByCurrentUser?: boolean;
-}
-
-interface MusicalEntity {
-  id: number;
-  title: string;
-  genre: string;
+  genre?: string;
   type: string;
   releasedBy: string;
   isLikedByCurrentUser?: boolean;
-  songs?: Song[];
+  songs: Song[];
 }
 
@@ -25 +17 @@
   const { type, id } = useParams();
   const navigate = useNavigate();
-  const [collection, setCollection] = useState<MusicalEntity | null>(null);
+  const [collection, setCollection] = useState<CollectionView | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+
+  const normalizeCollection = (
+    data: Album | Playlist,
+    type: string,
+  ): CollectionView => {
+    if (type === "album") {
+      const album = data as Album;
+      return {
+        id: album.id,
+        title: album.title,
+        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,
+        genre: undefined,
+        type: "PLAYLIST",
+        releasedBy: playlist.creatorName,
+        isLikedByCurrentUser: undefined,
+        songs: playlist.songsInPlaylist,
+      };
+    }
+  };
 
   useEffect(() => {
@@ -37 +58 @@
           type === "album" ? `/albums/${id}` : `/playlists/${id}`;
         const response = await axiosInstance.get(endpoint);
-        console.log(response.data);
-        setCollection(response.data);
+
+        const normalized = normalizeCollection(response.data, type!);
+        setCollection(normalized);
       } catch (err: any) {
-        setError(err.response?.data?.error || "Failed to load collection");
+        setError(handleError(err));
       } finally {
         setIsLoading(false);
@@ -67 +89 @@
       <button
         onClick={() => navigate(-1)}
-        className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors duration-200"
+        className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors duration-200 cursor-pointer"
       >
         ← Back
@@ -88 +110 @@
             <div className="flex items-center gap-3 text-gray-700 mb-4">
               <span className="font-semibold">{collection.releasedBy}</span>
-              <span>•</span>
-              <span className="text-gray-600">{collection.genre}</span>
+              {collection.genre && (
+                <>
+                  <span>•</span>
+                  <span className="text-gray-600">{collection.genre}</span>
+                </>
+              )}
               {collection.songs && (
                 <>
@@ -101 +127 @@
             </div>
 
-            <button
-              className="flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors duration-200"
-              aria-label={collection.isLikedByCurrentUser ? "Unlike" : "Like"}
-            >
-              <svg
-                className="w-5 h-5"
-                fill={collection.isLikedByCurrentUser ? "#ef4444" : "none"}
-                stroke={collection.isLikedByCurrentUser ? "#ef4444" : "#6b7280"}
-                strokeWidth="2"
-                viewBox="0 0 24 24"
+            {type === "album" && (
+              <button
+                className="flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors duration-200"
+                aria-label={collection.isLikedByCurrentUser ? "Unlike" : "Like"}
               >
-                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
-              </svg>
-              <span className="text-sm font-medium text-gray-700">
-                {collection.isLikedByCurrentUser ? "Liked" : "Like"}
-              </span>
-            </button>
+                <svg
+                  className="w-5 h-5"
+                  fill={collection.isLikedByCurrentUser ? "#ef4444" : "none"}
+                  stroke={
+                    collection.isLikedByCurrentUser ? "#ef4444" : "#6b7280"
+                  }
+                  strokeWidth="2"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+                </svg>
+                <span className="text-sm font-medium text-gray-700">
+                  {collection.isLikedByCurrentUser ? "Liked" : "Like"}
+                </span>
+              </button>
+            )}
           </div>
         </div>

frontend/src/pages/UserDetail.tsx

@@ -5 +5 @@
 import ListenerView from "../components/userProfile/ListenerView";
 import UserListModal from "../components/userProfile/UserListModal";
+import { handleError } from "../utils/error";
 import type {
   MusicalEntity,
@@ -43 +44 @@
     try {
       const response = await axiosInstance.post<UserProfile>(
-        `/users/follow/${userId}`,
+        `/users/${userId}/follow`,
       );
       setUser(response.data);
     } catch (err: any) {
-      console.error(err.response?.data?.error);
+      setError(handleError(err));
     } finally {
       setIsFollowing(false);
@@ -56 +57 @@
     setIsLoadingModal(true);
     try {
-      const response = await axiosInstance.get(`/users/followers/${userId}`);
+      const response = await axiosInstance.get(`/users/${userId}/followers`);
       setModalUsers(response.data);
       setModalTitle("Followers");
       setShowModal(true);
     } catch (err) {
-      console.error("Failed to fetch followers");
+      setError(handleError(err));
     } finally {
       setIsLoadingModal(false);
@@ -69 +70 @@
     setIsLoadingModal(true);
     try {
-      const response = await axiosInstance.get(`/users/following/${userId}`);
+      const response = await axiosInstance.get(`/users/${userId}/following`);
       setModalUsers(response.data);
       setModalTitle("Following");
       setShowModal(true);
-    } catch (err) {
-      console.error("Failed to fetch following users");
+    } catch (err: any) {
+      setError(handleError(err));
     } finally {
       setIsLoadingModal(false);
@@ -82 +83 @@
   const handleFollowInModal = async (targetId: number) => {
     try {
-      await axiosInstance.post(`/users/follow/${targetId}`);
+      await axiosInstance.post(`/users/${targetId}/follow`);
       setModalUsers((prevUsers) =>
         prevUsers.map((u) => {
@@ -96 +97 @@
       );
 
-      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);
+      // if (user && user.id === targetId) {
+      //   const response = await axiosInstance.get(`/users/${targetId}`);
+      //   setUser(response.data);
+      // }
+    } catch (err: any) {
+      setError(handleError(err));
     }
   };
@@ -110 +111 @@
       try {
         const response = await axiosInstance.get(`/users/${userId}`);
-        console.log(response.data);
         setUser(response.data);
       } catch (err: any) {
-        const errorMessage =
-          err.response?.data?.error || "Failed to fetch user";
-        setError(errorMessage);
+        setError(handleError(err));
       }
     };
@@ -143 +141 @@
       <button
         onClick={() => navigate(-1)}
-        className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors duration-200"
+        className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors duration-200 cursor-pointer"
       >
         ← Back

frontend/src/utils/types.ts

@@ -13 +13 @@
   role: string;
   entityType: string;
+  isLikedByCurrentUser: boolean;
 }
+
 export interface MusicalEntity {
   id: number;
@@ -20 +22 @@
   type: string;
   releasedBy: string;
+  isLikedByCurrentUser?: boolean;
+}
+
+export interface Song extends MusicalEntity {
+  type: "SONG";
+}
+
+export interface Album extends MusicalEntity {
+  type: "ALBUM";
+  songs: Song[];
 }
 
@@ -27 +39 @@
   cover: string;
   creatorName: string;
+  songsInPlaylist: Song[];
 }