From 36524e5cbb3ab99dbd0df10d97f8f0c3ef03b808 Mon Sep 17 00:00:00 2001
From: Peter KW <peter.k.w.96@gmail.com>
Date: Tue, 19 Mar 2024 00:25:37 +0100
Subject: [PATCH] Changed so that it makes a modal for each user instead of a
 link

---
 frontend/src/Components/UserListAdmin.tsx | 54 +++++++++++++++++------
 1 file changed, 40 insertions(+), 14 deletions(-)

diff --git a/frontend/src/Components/UserListAdmin.tsx b/frontend/src/Components/UserListAdmin.tsx
index b86076a..3d2bcae 100644
--- a/frontend/src/Components/UserListAdmin.tsx
+++ b/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
- * thanks to the state property
- * @param props - The users to display
+ * A list of users for admin manage users page, that sets an onClick
+ * function for eact user <li> element, which displays a modul with
+ * 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 (
-    <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 className="pt-5" key={user.userId}>
+    <>
+      <UserInfoModal
+        onClose={handleClose}
+        isVisible={modalVisible}
+        username={username}
+      />
+      <div>
+        <ul className="font-bold underline text-[30px] cursor-pointer padding">
+          {props.users.map((user) => (
+            <li
+              className="pt-5"
+              key={user.userId}
+              onClick={() => {
+                handleClick(user.username);
+              }}
+            >
               {user.username}
             </li>
-          </Link>
-        ))}
-      </ul>
-    </div>
+          ))}
+        </ul>
+      </div>
+    </>
   );
 }