Changeset 0f71490 for frontend/src

Timestamp:

01/27/26 12:55:23 (6 months ago)

Author:

Dimitar Arsov <dimitararsov04@…>

Branches:

main

Children:

4e5cf92

Parents:

c6e1892

Message:

show follow/following button

Location:

frontend/src

Files:

• components/userProfile/AllUsersHelper.tsx (modified) (3 diffs)
• components/userProfile/ArtistView.tsx (modified) (4 diffs)
• components/userProfile/UserDetailView.tsx (modified) (5 diffs)
• types.ts (modified) (1 diff)

frontend/src/components/userProfile/AllUsersHelper.tsx

@@ -1 +1 @@
 import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-
+import axiosInstance from "../../api/axiosInstance";
 interface User {
   id: number;
@@ -16 +16 @@
   useEffect(() => {
     const fetchUsers = async () => {
-      const response = await fetch("http://localhost:8080/users/all");
-      const data = await response.json();
-      setUsers(data);
+      const response = axiosInstance.get("/users/all");
+      setUsers((await response).data);
     };
     fetchUsers();
@@ -30 +29 @@
     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);
+      const response = await axiosInstance.get(`/users/search`, {
+        params: { name: searchedUser },
+      });
+      setUsers(response.data);
     } catch (err: any) {
-      setError(err.message);
+      const errorMessage = err.response?.data?.error || "Search failed";
+      setError(errorMessage);
     }
   };
 
   if (users.length == 0) return <div className="p-6">Loading...</div>;
+  if (error) {
+    return (
+      <div className="p-6 bg-red-50 border border-red-200 text-red-700 rounded-lg">
+        <h2 className="font-bold">Error</h2>
+        <p>{error}</p>
+      </div>
+    );
+  }
 
   return (

frontend/src/components/userProfile/ArtistView.tsx

@@ -1 +1 @@
 import { useNavigate } from "react-router-dom";
 import { Music, Disc3, Mic2 } from "lucide-react";
-
-interface ArtistContributionDTO {
-  musicalEntityId: number;
-  title: string;
-  role: string;
-  entityType: string;
-}
+import type { ArtistContributionDTO } from "../../types";
 
 interface ArtistViewProps {
@@ -16 +10 @@
   const navigate = useNavigate();
 
-  const albums = contributions.filter((c) => c.entityType === "Album");
-  const songs = contributions.filter((c) => c.entityType === "Song");
+  const albums = contributions.filter((c) => c.entityType === "ALBUM");
+  const songs = contributions.filter((c) => c.entityType === "SONG");
 
   const getRoleColor = (role: string) => {
@@ -31 +25 @@
   return (
     <div className="mt-8">
-      {/* Albums Section */}
       {albums.length > 0 && (
         <div className="mb-12">
@@ -91 +84 @@
                   </h3>
                   <div className="flex items-center gap-2 mt-1">
-                    <Mic2 className="w-4 h-4 text-gray-400" />
+                    {song.genre}
                   </div>
                 </div>

frontend/src/components/userProfile/UserDetailView.tsx

@@ -3 +3 @@
 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;
-}
+import axiosInstance from "../../api/axiosInstance";
+import type { ArtistContributionDTO } from "../../types";
+import type { MusicalEntityDTO } from "../../types";
+import type { Playlist } from "../../types";
 
 interface User {
@@ -32 +15 @@
   followers: number;
   following: number;
+  isFollowedByCurrentUser: boolean;
 
   musicalEntities?: {
@@ -45 +29 @@
 
 const UserDetail = () => {
+  // user refers to the selected user NOT to the user from context
   const { userId } = useParams();
   const navigate = useNavigate();
@@ -54 +39 @@
       setError(null);
       try {
-        const response = await fetch(`http://localhost:8080/users/${userId}`);
+        const response = await axiosInstance.get(`/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);
+        setUser(response.data);
       } catch (err: any) {
-        setError(err.message);
+        const errorMessage =
+          err.response?.data?.error || "Failed to fetch user";
+        setError(errorMessage);
       }
     };
@@ -115 +96 @@
             </div>
 
-            <button className="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors font-medium">
-              Follow
+            <button className="px-6 py-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg shadow-md transition-colors duration-200 cursor-pointer">
+              {user.isFollowedByCurrentUser ? "Unfollow" : "Follow"}
             </button>
           </div>

frontend/src/types.ts

@@ -1 +1 @@
 export interface User {
-        username: string;
-        fullName: string;
-        email?: string;
-        profilePhoto?: string | null;
-        role?: "ADMIN" | "NONADMIN";
+  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;
+}