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

File:
1 edited

Legend:

Unmodified
Added
Removed

  • frontend/src/pages/AllUsers.tsx

    r694fc25 rcb4a1da  
    44
    55interface User {
    6   username: string;
    7   fullName: string;
     6        username: string;
     7        fullName: string;
    88}
    99
    1010const AllUsers = () => {
    11   const [users, setUsers] = useState<User[]>([]);
    12   const [searchedUser, setSearchedUser] = useState<string>("");
    13   const [error, setError] = useState<string | null>(null);
    14   const navigate = useNavigate();
     11        const [users, setUsers] = useState<User[]>([]);
     12        const [searchedUser, setSearchedUser] = useState<string>("");
     13        const [error, setError] = useState<string | null>(null);
     14        const navigate = useNavigate();
    1515
    16   useEffect(() => {
    17     const fetchUsers = async () => {
    18       const response = axiosInstance.get("/users/all");
    19       setUsers((await response).data);
    20     };
    21     fetchUsers();
    22   }, []);
     16        useEffect(() => {
     17                const fetchUsers = async () => {
     18                        const response = axiosInstance.get("/users/na/all");
     19                        setUsers((await response).data);
     20                };
     21                fetchUsers();
     22        }, []);
    2323
    24   const handleUserClick = (username: string) => {
    25     navigate(`/users/${username}`);
    26   };
     24        const handleUserClick = (username: string) => {
     25                navigate(`/users/${username}`);
     26        };
    2727
    28   const handleSearch = async (e: React.FormEvent) => {
    29     e.preventDefault();
    30     try {
    31       const response = await axiosInstance.get(`/users/search`, {
    32         params: { name: searchedUser },
    33       });
    34       setUsers(response.data);
    35     } catch (err: any) {
    36       const errorMessage = err.response?.data?.error || "Search failed";
    37       setError(errorMessage);
    38     }
    39   };
     28        const handleSearch = async (e: React.FormEvent) => {
     29                e.preventDefault();
     30                try {
     31                        const response = await axiosInstance.get(`/users/na/search`, {
     32                                params: { name: searchedUser },
     33                        });
     34                        setUsers(response.data);
     35                } catch (err: any) {
     36                        const errorMessage = err.response?.data?.error || "Search failed";
     37                        setError(errorMessage);
     38                }
     39        };
    4040
    41   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   }
     41        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        }
    5050
    51   return (
    52     <div className="container mx-auto p-6">
    53       <h1 className="text-3xl font-bold mb-6">All Users</h1>
    54       <form onSubmit={handleSearch} className="flex gap-2 mb-10">
    55         <input
    56           type="text"
    57           value={searchedUser}
    58           onChange={(e) => setSearchedUser(e.target.value)}
    59           className="border p-2 rounded w-full"
    60           placeholder="Search for a user..."
    61         />
    62         <button
    63           type="submit"
    64           className="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 transition-colors"
    65         >
    66           Search
    67         </button>
    68       </form>
     51        return (
     52                <div className="container mx-auto p-6">
     53                        <h1 className="text-3xl font-bold mb-6">All Users</h1>
     54                        <form onSubmit={handleSearch} className="flex gap-2 mb-10">
     55                                <input
     56                                        type="text"
     57                                        value={searchedUser}
     58                                        onChange={(e) => setSearchedUser(e.target.value)}
     59                                        className="border p-2 rounded w-full"
     60                                        placeholder="Search for a user..."
     61                                />
     62                                <button
     63                                        type="submit"
     64                                        className="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 transition-colors"
     65                                >
     66                                        Search
     67                                </button>
     68                        </form>
    6969
    70       <div className="grid gap-4">
    71         {users.map((u) => (
    72           <div
    73             key={u.username}
    74             onClick={() => handleUserClick(u.username)}
    75             className="bg-white shadow-md rounded-lg p-4 hover:shadow-lg hover:bg-gray-50 cursor-pointer transition-all"
    76           >
    77             <h2 className="text-xl font-semibold">{u.fullName}</h2>
    78             <p className="text-gray-600">@{u.username}</p>
    79           </div>
    80         ))}
    81       </div>
    82     </div>
    83   );
     70                        <div className="grid gap-4">
     71                                {users.map((u) => (
     72                                        <div
     73                                                key={u.username}
     74                                                onClick={() => handleUserClick(u.username)}
     75                                                className="bg-white shadow-md rounded-lg p-4 hover:shadow-lg hover:bg-gray-50 cursor-pointer transition-all"
     76                                        >
     77                                                <h2 className="text-xl font-semibold">{u.fullName}</h2>
     78                                                <p className="text-gray-600">@{u.username}</p>
     79                                        </div>
     80                                ))}
     81                        </div>
     82                </div>
     83        );
    8484};
    8585
Note: See TracChangeset for help on using the changeset viewer.