From e8262ed5e0de6bc3645f6815e11fab6d7f13f73c Mon Sep 17 00:00:00 2001
From: Peter KW <peter.k.w.96@gmail.com>
Date: Wed, 20 Mar 2024 23:45:50 +0100
Subject: [PATCH] Now shows users in project when clicked

---
 frontend/src/Components/ProjectListAdmin.tsx | 41 +++++++++++++++-----
 1 file changed, 32 insertions(+), 9 deletions(-)

diff --git a/frontend/src/Components/ProjectListAdmin.tsx b/frontend/src/Components/ProjectListAdmin.tsx
index dbc7403..4ebdaf8 100644
--- a/frontend/src/Components/ProjectListAdmin.tsx
+++ b/frontend/src/Components/ProjectListAdmin.tsx
@@ -1,6 +1,8 @@
 import { useState } from "react";
 import { NewProject } from "../Types/goTypes";
 import ProjectInfoModal from "./ProjectInfoModal";
+import UserInfoModal from "./UserInfoModal";
+import DeleteUser from "./DeleteUser";
 
 /**
  * A list of projects for admin manage projects page, that sets an onClick
@@ -16,26 +18,47 @@ import ProjectInfoModal from "./ProjectInfoModal";
 export function ProjectListAdmin(props: {
   projects: NewProject[];
 }): JSX.Element {
-  const [modalVisible, setModalVisible] = useState(false);
+  const [projectModalVisible, setProjectModalVisible] = useState(false);
   const [projectname, setProjectname] = useState("");
+  const [userModalVisible, setUserModalVisible] = useState(false);
+  const [username, setUsername] = useState("");
 
-  const handleClick = (username: string): void => {
-    setProjectname(username);
-    setModalVisible(true);
+  const handleClickUser = (username: string): void => {
+    setUsername(username);
+    setUserModalVisible(true);
   };
 
-  const handleClose = (): void => {
+  const handleClickProject = (username: string): void => {
+    setProjectname(username);
+    setProjectModalVisible(true);
+  };
+
+  const handleCloseProject = (): void => {
     setProjectname("");
-    setModalVisible(false);
+    setProjectModalVisible(false);
+  };
+
+  const handleCloseUser = (): void => {
+    setProjectname("");
+    setUserModalVisible(false);
   };
 
   return (
     <>
       <ProjectInfoModal
-        onClose={handleClose}
-        isVisible={modalVisible}
+        onClose={handleCloseProject}
+        onClick={handleClickUser}
+        isVisible={projectModalVisible}
         projectname={projectname}
       />
+      <UserInfoModal
+        manageMember={true}
+        onClose={handleCloseUser}
+        //TODO: CHANGE TO REMOVE USER FROM PROJECT
+        onDelete={() => DeleteUser}
+        isVisible={userModalVisible}
+        username={username}
+      />
       <div>
         <ul className="font-bold underline text-[30px] cursor-pointer padding">
           {props.projects.map((project) => (
@@ -43,7 +66,7 @@ export function ProjectListAdmin(props: {
               className="pt-5"
               key={project.name}
               onClick={() => {
-                handleClick(project.name);
+                handleClickProject(project.name);
               }}
             >
               {project.name}