Update ProjectMembers component to allow deleting users from a project

frontend/src/Components/ProjectMembers.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { Link, useParams } from "react-router-dom";
 import GetUsersInProject, { ProjectMember } from "./GetUsersInProject";
+import { api } from "../API/API";
 
 function ProjectMembers(): JSX.Element {
   const { projectName } = useParams();
@@ -11,34 +12,68 @@ function ProjectMembers(): JSX.Element {
     setUsersProp: setProjectMembers,
   });
 
+  const handleUserDeleteClick = async (username: string): Promise<void> => {
+    const token = localStorage.getItem("accessToken") ?? "";
+    const response = await api.removeUserFromProject(
+      username,
+      projectName ?? "",
+      token,
+    );
+    console.log(response.data);
+
+    // Remove the deleted user from the state
+    setProjectMembers((prevMembers) =>
+      prevMembers.filter((member) => member.Username !== username),
+    );
+  };
+
   return (
     <>
       <h1 className="font-bold text-[30px] mb-[20px]">
         All Members In: {projectName}{" "}
       </h1>
       <div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[70vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px] text-[20px]">
-        {projectMembers.map((projectMember: ProjectMember, index: number) => (
+        {projectMembers.map((projectMember: ProjectMember, index: number) => {
-          <h1 key={index} className="border-b-2 border-black w-full">
+          if (projectMember.Username === "admin") {
-            <div className="flex justify-between">
+            return null; // Skip rendering for admin user
-              <div className="flex">
+          }
-                <h1>{projectMember.Username}</h1>
+          return (
-                <span className="ml-6 mr-2 font-bold">Role:</span>
+            <h1 key={index} className="border-b-2 border-black w-full">
-                <h1>{projectMember.UserRole}</h1>
+              <div className="flex justify-between">
-              </div>
+                <div className="flex">
-              <div className="flex">
+                  <h1>{projectMember.Username}</h1>
-                <div className="ml-auto flex space-x-4">
+                  <span className="ml-6 mr-2 font-bold">Role:</span>
-                  <Link
+                  <h1>{projectMember.UserRole}</h1>
-                    to={`/otherUsersTimeReports/${projectName}/${projectMember.Username}`}
+                </div>
-                  >
+                <div className="flex">
-                    <h1 className="underline cursor-pointer font-bold">
+                  <div className="ml-auto flex space-x-4">
-                      View Reports
+                    {projectMember.Username !==
-                    </h1>
+                      localStorage.getItem("username") && (
-                  </Link>
+                      <h1
+                        className="underline cursor-pointer font-bold"
+                        onClick={() => {
+                          confirm(
+                            "Are you sure you want to delete this user?",
+                          ) &&
+                            void handleUserDeleteClick(projectMember.Username);
+                        }}
+                      >
+                        Delete User
+                      </h1>
+                    )}
+                    <Link
+                      to={`/otherUsersTimeReports/${projectName}/${projectMember.Username}`}
+                    >
+                      <h1 className="underline cursor-pointer font-bold">
+                        View Reports
+                      </h1>
+                    </Link>
+                  </div>
                 </div>
               </div>
-            </div>
+            </h1>
-          </h1>
+          );
-        ))}
+        })}
       </div>
     </>
   );