Ignore:
Timestamp:
02/05/26 20:52:11 (5 months ago)
Author:
Filip Gavrilovski <filipgavrilovski28@…>
Branches:
main
Children:
2ce7c1e
Parents:
694fc25
Message:

add working server side search to landing page; change some endpoints

Location:
frontend/src/components
Files:
4 added
1 edited

Legend:

Unmodified
Added
Removed

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

    r694fc25 rcb4a1da  
    33
    44interface ModalProps {
    5   title: string;
    6   users: BaseNonAdminUser[];
    7   onClose: () => void;
    8   onFollowToggle: (targetUsername: string) => Promise<void>;
     5        title: string;
     6        users: BaseNonAdminUser[];
     7        onClose: () => void;
     8        onFollowToggle: (targetUsername: string) => Promise<void>;
    99}
    1010
    1111const UserListModal = ({
    12   title,
    13   users,
    14   onClose,
    15   onFollowToggle,
     12        title,
     13        users,
     14        onClose,
     15        onFollowToggle,
    1616}: ModalProps) => {
    17   const navigate = useNavigate();
    18   const baseURL = import.meta.env.VITE_API_BASE_URL;
     17        const navigate = useNavigate();
     18        const baseURL = import.meta.env.VITE_API_BASE_URL;
    1919
    20   return (
    21     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
    22       <div className="bg-white rounded-xl shadow-2xl w-full max-w-md max-h-[70vh] flex flex-col">
    23         <div className="p-4 border-b flex justify-between items-center">
    24           <h2 className="text-xl font-bold">{title}</h2>
    25           <button
    26             onClick={onClose}
    27             className="text-gray-500 hover:text-black text-2xl cursor-pointer"
    28           >
    29             &times;
    30           </button>
    31         </div>
     20        return (
     21                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
     22                        <div className="bg-white rounded-xl shadow-2xl w-full max-w-md max-h-[70vh] flex flex-col">
     23                                <div className="p-4 border-b flex justify-between items-center">
     24                                        <h2 className="text-xl font-bold">{title}</h2>
     25                                        <button
     26                                                onClick={onClose}
     27                                                className="text-gray-500 hover:text-black text-2xl cursor-pointer"
     28                                        >
     29                                                &times;
     30                                        </button>
     31                                </div>
    3232
    33         <div className="overflow-y-auto p-4 flex-1">
    34           {users.length === 0 ? (
    35             <p className="text-center text-gray-500 py-8">No users found.</p>
    36           ) : (
    37             users.map((u) => (
    38               <div
    39                 key={u.username}
    40                 className="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition-colors"
    41               >
    42                 <div
    43                   className="flex items-center gap-4 cursor-pointer flex-1"
    44                   onClick={() => {
    45                     onClose();
    46                     navigate(`/users/${u.username}`);
    47                   }}
    48                 >
    49                   <div className="w-10 h-10 rounded-full bg-blue-100 overflow-hidden shrink-0 flex items-center justify-center">
    50                     {u.profilePhoto ? (
    51                       <img
    52                         src={`${baseURL}/${u.profilePhoto}`}
    53                         className="w-full h-full object-cover"
    54                         alt=""
    55                       />
    56                     ) : (
    57                       <span className="text-blue-600 font-bold">
    58                         {u.fullName.charAt(0)}
    59                       </span>
    60                     )}
    61                   </div>
    62                   <p className="font-semibold text-gray-900">{u.fullName}</p>
    63                 </div>
     33                                <div className="overflow-y-auto p-4 flex-1">
     34                                        {users.length === 0 ? (
     35                                                <p className="text-center text-gray-500 py-8">No users found.</p>
     36                                        ) : (
     37                                                users.map((u) => (
     38                                                        <div
     39                                                                key={u.username}
     40                                                                className="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition-colors"
     41                                                        >
     42                                                                <div
     43                                                                        className="flex items-center gap-4 cursor-pointer flex-1"
     44                                                                        onClick={() => {
     45                                                                                onClose();
     46                                                                                navigate(`/users/${u.username}`);
     47                                                                        }}
     48                                                                >
     49                                                                        <div className="w-10 h-10 rounded-full bg-blue-100 overflow-hidden shrink-0 flex items-center justify-center">
     50                                                                                {u.profilePhoto ? (
     51                                                                                        <img
     52                                                                                                src={`${baseURL}/${u.profilePhoto}`}
     53                                                                                                className="w-full h-full object-cover"
     54                                                                                                alt=""
     55                                                                                        />
     56                                                                                ) : (
     57                                                                                        <span className="text-blue-600 font-bold">
     58                                                                                                {u.fullName.charAt(0)}
     59                                                                                        </span>
     60                                                                                )}
     61                                                                        </div>
     62                                                                        <p className="font-semibold text-gray-900">{u.fullName}</p>
     63                                                                </div>
    6464
    65                 <button
    66                   onClick={() => onFollowToggle(u.username)}
    67                   className={`px-4 py-1 text-sm font-medium rounded-md transition-colors cursor-pointer ${
    68                     u.isFollowedByCurrentUser
    69                       ? "bg-gray-200 text-gray-700 hover:bg-gray-300"
    70                       : "bg-blue-500 text-white hover:bg-blue-600"
    71                   }`}
    72                 >
    73                   {u.isFollowedByCurrentUser ? "Unfollow" : "Follow"}
    74                 </button>
    75               </div>
    76             ))
    77           )}
    78         </div>
    79       </div>
    80       <div className="absolute inset-0 -z-10" onClick={onClose}></div>
    81     </div>
    82   );
     65                                                                <button
     66                                                                        onClick={() => onFollowToggle(u.username)}
     67                                                                        className={`px-4 py-1 text-sm font-medium rounded-md transition-colors cursor-pointer ${
     68                                                                                u.isFollowedByCurrentUser
     69                                                                                        ? "bg-gray-200 text-gray-700 hover:bg-gray-300"
     70                                                                                        : "bg-blue-500 text-white hover:bg-blue-600"
     71                                                                        }`}
     72                                                                >
     73                                                                        {u.isFollowedByCurrentUser ? "Unfollow" : "Follow"}
     74                                                                </button>
     75                                                        </div>
     76                                                ))
     77                                        )}
     78                                </div>
     79                        </div>
     80                        <div className="absolute inset-0 -z-10" onClick={onClose}></div>
     81                </div>
     82        );
    8383};
    8484
Note: See TracChangeset for help on using the changeset viewer.