Changeset fd81a18 for frontend/src


Ignore:
Timestamp:
01/26/26 18:34:45 (6 months ago)
Author:
Dimitar Arsov <dimitararsov04@…>
Branches:
main
Children:
a3ae097
Parents:
efe76fe
Message:

add playlists to user profile

Location:
frontend/src/components/userProfile
Files:
2 added
1 edited

Legend:

Unmodified
Added
Removed

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

    refe76fe rfd81a18  
    11import { useEffect, useState } from "react";
    22import { useParams, useNavigate } from "react-router-dom";
     3import ArtistView from "./ArtistView";
     4import ListenerView from "./ListenerView";
     5
     6interface MusicalEntityDTO {
     7  id: number;
     8  title: string;
     9  genre: string;
     10  type: string;
     11}
     12
     13interface ArtistContributionDTO {
     14  musicalEntityId: number;
     15  title: string;
     16  role: string;
     17  entityType: string;
     18}
     19
     20interface Playlist {
     21  id: number;
     22  name: string;
     23  cover: string;
     24  creatorName: string;
     25}
    326
    427interface User {
    … …  
    629  username: string;
    730  fullName: string;
    8   followerCount: number;
    9   followingCount: number;
    1031  userType: string;
    11   contributions?: {
    12     role: string;
    13     title: string;
    14     musicalEntityId: number;
    15     entityType: string;
    16   }[];
     32  followers: number;
     33  following: number;
    1734
    18   likedEntities?: {
    19     entityId: number;
    20     entityTitle: string;
    21     entityGenre: string;
    22     entityType: string;
    23   }[];
     35  musicalEntities?: {
     36    contributions: ArtistContributionDTO[];
     37  };
     38
     39  likes?: {
     40    likedEntities: MusicalEntityDTO[];
     41  };
     42
     43  createdPlaylists?: Playlist[];
    2444}
    2545
    … …  
    3454      const response = await fetch(`http://localhost:8080/users/${userId}`);
    3555      const data = await response.json();
     56      console.log("Fetched user data:", data);
    3657      setUser(data);
    3758    };
    … …  
    4364  return (
    4465    <div className="container mx-auto p-6">
    45       {/* <button
    46         onClick={() => navigate("/allUsers")}
     66      <button
     67        onClick={() => navigate(-1)}
    4768        className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
    4869      >
    49         ← Back to All Users
    50       </button> */}
     70        ← Back
     71      </button>
     72
    5173      <div className="bg-white shadow-lg rounded-lg p-8">
    52         <h1 className="text-4xl font-bold mb-4">{user.fullName}</h1>
    53         <p className="text-gray-600 text-lg mb-2">Username: @{user.username}</p>
    54         <p className="text-gray-600 text-lg mb-2">
    55           Followers: {user.followerCount}
    56         </p>
    57         <p className="text-gray-600 text-lg mb-2">
    58           Following: {user.followingCount}
    59         </p>
    60         <p>Type: {user.userType}</p>
    61         {user.userType === "Artist" && user.contributions && (
    62           <div className="mt-8 border-t pt-6">
    63             <h2 className="text-2xl font-bold mb-4">Discography</h2>
    64             <div className="grid gap-3">
    65               {user.contributions.map((item, index) => (
    66                 <div
    67                   key={index}
    68                   className="p-4 border rounded flex justify-between items-center"
    69                 >
    70                   <div>
    71                     <p className="font-semibold">{item.title}</p>
    72                     <p className="text-sm text-gray-500">{item.entityType}</p>
    73                   </div>
    74                   <span className="bg-gray-100 px-3 py-1 rounded-full text-sm font-medium">
    75                     {item.role}
    76                   </span>
    77                   <span className="bg-gray-100 px-3 py-1 rounded-full text-sm font-medium">
    78                     {item.musicalEntityId}
    79                   </span>
    80                 </div>
    81               ))}
     74        {/* Profile Header */}
     75        <div className="flex items-start gap-6 mb-8">
     76          {/* Profile Photo */}
     77          <div className="shrink-0">
     78            <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">
     79              {user.fullName.charAt(0).toUpperCase()}
    8280            </div>
    8381          </div>
     82
     83          {/* User Info */}
     84          <div className="flex-1">
     85            <h1 className="text-4xl font-bold mb-2">{user.fullName}</h1>
     86            <span className="inline-block px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium mb-4">
     87              {user.userType}
     88            </span>
     89
     90            {/* Followers/Following Stats */}
     91            <div className="flex gap-6 mb-4 text-gray-700">
     92              <div className="flex flex-col">
     93                <span className="text-2xl font-bold">{user.followers}</span>
     94                <span className="text-sm text-gray-500">Followers</span>
     95              </div>
     96              <div className="flex flex-col">
     97                <span className="text-2xl font-bold">{user.following}</span>
     98                <span className="text-sm text-gray-500">Following</span>
     99              </div>
     100            </div>
     101
     102            <button className="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors font-medium">
     103              Follow
     104            </button>
     105          </div>
     106        </div>
     107
     108        {user.userType === "ARTIST" && user.musicalEntities?.contributions && (
     109          <ArtistView contributions={user.musicalEntities.contributions} />
    84110        )}
    85111
    86         {user.userType === "Listener" && user.likedEntities && (
    87           <div>
    88             <h3 className="text-2xl font-bold mb-4">Liked Songs & Albums</h3>
    89             <div className="grid gap-2">
    90               {user.likedEntities.map((like) => (
    91                 <div
    92                   key={like.entityId}
    93                   className="p-3 bg-gray-50 rounded flex justify-between"
    94                 >
    95                   <span>{like.entityTitle}</span>
    96                   <span className="text-sm text-gray-400">
    97                     {like.entityType}
    98                   </span>
    99                   <span className="text-sm text-gray-400">
    100                     {like.entityGenre}
    101                   </span>
    102                 </div>
    103               ))}
    104             </div>
    105           </div>
     112        {user.userType === "LISTENER" && user.likes?.likedEntities && (
     113          <ListenerView
     114            likedEntities={user.likes.likedEntities}
     115            playlists={user.createdPlaylists}
     116          />
    106117        )}
    107118      </div>
Note: See TracChangeset for help on using the changeset viewer.