Now shows users in project when clicked

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}