Ignore:
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/components/userProfile
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • frontend/src/components/userProfile/AllUsersHelper.tsx

    rc6e1892 r0f71490  
    11import React, { useEffect, useState } from "react";
    22import { useNavigate } from "react-router-dom";
    3 
     3import axiosInstance from "../../api/axiosInstance";
    44interface User {
    55  id: number;
    … …  
    1616  useEffect(() => {
    1717    const fetchUsers = async () => {
    18       const response = await fetch("http://localhost:8080/users/all");
    19       const data = await response.json();
    20       setUsers(data);
     18      const response = axiosInstance.get("/users/all");
     19      setUsers((await response).data);
    2120    };
    2221    fetchUsers();
    … …  
    3029    e.preventDefault();
    3130    try {
    32       const response = await fetch(
    33         `http://localhost:8080/users/search?name=${searchedUser}`,
    34       );
    35       if (!response.ok) throw new Error("Search failed");
    36 
    37       const data = await response.json();
    38       setUsers(data);
     31      const response = await axiosInstance.get(`/users/search`, {
     32        params: { name: searchedUser },
     33      });
     34      setUsers(response.data);
    3935    } catch (err: any) {
    40       setError(err.message);
     36      const errorMessage = err.response?.data?.error || "Search failed";
     37      setError(errorMessage);
    4138    }
    4239  };
    4340
    4441  if (users.length == 0) return <div className="p-6">Loading...</div>;
     42  if (error) {
     43    return (
     44      <div className="p-6 bg-red-50 border border-red-200 text-red-700 rounded-lg">
     45        <h2 className="font-bold">Error</h2>
     46        <p>{error}</p>
     47      </div>
     48    );
     49  }
    4550
    4651  return (

  • frontend/src/components/userProfile/ArtistView.tsx

    rc6e1892 r0f71490  
    11import { useNavigate } from "react-router-dom";
    22import { Music, Disc3, Mic2 } from "lucide-react";
    3 
    4 interface ArtistContributionDTO {
    5   musicalEntityId: number;
    6   title: string;
    7   role: string;
    8   entityType: string;
    9 }
     3import type { ArtistContributionDTO } from "../../types";
    104
    115interface ArtistViewProps {
    … …  
    1610  const navigate = useNavigate();
    1711
    18   const albums = contributions.filter((c) => c.entityType === "Album");
    19   const songs = contributions.filter((c) => c.entityType === "Song");
     12  const albums = contributions.filter((c) => c.entityType === "ALBUM");
     13  const songs = contributions.filter((c) => c.entityType === "SONG");
    2014
    2115  const getRoleColor = (role: string) => {
    … …  
    3125  return (
    3226    <div className="mt-8">
    33       {/* Albums Section */}
    3427      {albums.length > 0 && (
    3528        <div className="mb-12">
    … …  
    9184                  </h3>
    9285                  <div className="flex items-center gap-2 mt-1">
    93                     <Mic2 className="w-4 h-4 text-gray-400" />
     86                    {song.genre}
    9487                  </div>
    9588                </div>

  • frontend/src/components/userProfile/UserDetailView.tsx

    rc6e1892 r0f71490  
    33import ArtistView from "./ArtistView";
    44import ListenerView from "./ListenerView";
    5 
    6 interface MusicalEntityDTO {
    7   id: number;
    8   title: string;
    9   genre: string;
    10   type: string;
    11 }
    12 
    13 interface ArtistContributionDTO {
    14   musicalEntityId: number;
    15   title: string;
    16   role: string;
    17   entityType: string;
    18 }
    19 
    20 interface Playlist {
    21   id: number;
    22   name: string;
    23   cover: string;
    24   creatorName: string;
    25 }
     5import axiosInstance from "../../api/axiosInstance";
     6import type { ArtistContributionDTO } from "../../types";
     7import type { MusicalEntityDTO } from "../../types";
     8import type { Playlist } from "../../types";
    269
    2710interface User {
    … …  
    3215  followers: number;
    3316  following: number;
     17  isFollowedByCurrentUser: boolean;
    3418
    3519  musicalEntities?: {
    … …  
    4529
    4630const UserDetail = () => {
     31  // user refers to the selected user NOT to the user from context
    4732  const { userId } = useParams();
    4833  const navigate = useNavigate();
    … …  
    5439      setError(null);
    5540      try {
    56         const response = await fetch(`http://localhost:8080/users/${userId}`);
     41        const response = await axiosInstance.get(`/users/${userId}`);
    5742
    58         if (!response.ok) {
    59           const errorData = await response.json();
    60           throw new Error(errorData.error || "Failed to fetch user");
    61         }
    62 
    63         const data = await response.json();
    64         setUser(data);
     43        setUser(response.data);
    6544      } catch (err: any) {
    66         setError(err.message);
     45        const errorMessage =
     46          err.response?.data?.error || "Failed to fetch user";
     47        setError(errorMessage);
    6748      }
    6849    };
    … …  
    11596            </div>
    11697
    117             <button className="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors font-medium">
    118               Follow
     98            <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">
     99              {user.isFollowedByCurrentUser ? "Unfollow" : "Follow"}
    119100            </button>
    120101          </div>
Note: See TracChangeset for help on using the changeset viewer.