Changed so that it makes a modal for each user instead of a link

frontend/src/Components/UserListAdmin.tsx

@@ -1,5 +1,6 @@
-import { Link } from "react-router-dom";
+import { useState } from "react";
 import { PublicUser } from "../Types/goTypes";
+import UserInfoModal from "./UserInfoModal";
 
 /**
  * The props for the UserProps component
@@ -9,27 +10,52 @@ interface UserProps {
 }
 
 /**
- * A list of users for admin manage users page, that links admin to the right user page
+ * A list of users for admin manage users page, that sets an onClick
- * thanks to the state property
+ * function for eact user <li> element, which displays a modul with
- * @param props - The users to display
+ * user info.
+ * @param props - An array of users users to display
  * @returns {JSX.Element} The user list
  * @example
- * const users = [{ id: 1, userName: "Random name" }];
+ * const users = [{ id: 1, userName: "ExampleName" }];
  * return <UserList users={users} />;
  */
 
 export function UserListAdmin(props: UserProps): JSX.Element {
+  const [modalVisible, setModalVisible] = useState(false);
+  const [username, setUsername] = useState("");
+
+  const handleClick = (username: string): void => {
+    setUsername(username);
+    setModalVisible(true);
+  };
+
+  const handleClose = (): void => {
+    setUsername("");
+    setModalVisible(false);
+  };
+
   return (
+    <>
+      <UserInfoModal
+        onClose={handleClose}
+        isVisible={modalVisible}
+        username={username}
+      />
       <div>
         <ul className="font-bold underline text-[30px] cursor-pointer padding">
           {props.users.map((user) => (
-          <Link to="/adminUserInfo" key={user.userId} state={user.username}>
+            <li
-            <li className="pt-5" key={user.userId}>
+              className="pt-5"
+              key={user.userId}
+              onClick={() => {
+                handleClick(user.username);
+              }}
+            >
               {user.username}
             </li>
-          </Link>
           ))}
         </ul>
       </div>
+    </>
   );
 }