Add user to project component

frontend/src/Components/AddUserToProject.tsx

@@ -0,0 +1,132 @@
+import { useState } from "react";
+import { APIResponse, api } from "../API/API";
+import { NewProjMember } from "../Types/goTypes";
+import Logo from "../assets/Logo.svg";
+import Button from "./Button";
+import GetAllUsers from "./GetAllUsers";
+
+/**
+ * Tries to add a member to a project
+ * @param {Object} props - A NewProjMember
+ * @returns {boolean} True if added, false if not
+ */
+function MemberAdd(props: { memberToAdd: NewProjMember }): boolean {
+  let added = false;
+
+  api
+    .addUserToProject(
+      props.memberToAdd,
+      localStorage.getItem("accessToken") ?? "",
+    )
+    .then((response: APIResponse<NewProjMember>) => {
+      if (response.success) {
+        added = true;
+      } else {
+        console.error(response.message);
+      }
+    })
+    .catch((error) => {
+      console.error("An error occurred during member add:", error);
+    });
+  return added;
+}
+
+/**
+ * Provides UI for adding a project to the system.
+ * @returns {JSX.Element} - Returns the component UI for adding a project
+ */
+function AddUserToProject(): JSX.Element {
+  const [name, setName] = useState("");
+  const [users, setUsers] = useState<string[]>([]);
+  const [role, setRole] = useState("");
+  GetAllUsers({ setUsersProp: setUsers });
+
+  const handleClick = (): boolean => {
+    const newMember: NewProjMember = {
+      username: name,
+      projectname: localStorage.getItem("projectName") ?? "",
+      role: "user",
+    };
+    return MemberAdd({ memberToAdd: newMember });
+  };
+
+  return (
+    <div className="flex flex-col h-fit w-screen items-center justify-center">
+      <div className="border-4 border-black bg-white flex flex-col items-center justify-center rounded-3xl content-center pl-20 pr-20  h-[84vh] w-[50vh]">
+        <form
+          className="bg-white rounded px-8 pt-6 pb-8 mb-4 items-center justify-center flex flex-col w-fit h-fit"
+          onSubmit={(e) => {
+            e.preventDefault();
+            MemberAdd({
+              memberToAdd: {
+                username: "",
+                projectname: "",
+                role: "project_manager",
+              },
+            });
+          }}
+        >
+          <img
+            src={Logo}
+            className="logo w-[7vw] mb-10 mt-10"
+            alt="TTIME Logo"
+          />
+          <h3 className="pb-4 mb-2 text-center font-bold text-[18px]">
+            Add {name} to {localStorage.getItem("projectName") ?? ""} as {role}
+          </h3>
+          <p className="p-1">Role for user:</p>
+          <div className="border-2 border-black p-2 rounded-xl text-center h-[10h] w-[16vh]">
+            <ul className="text-center items-center font-medium space-y-2">
+              <li
+                className="h-[10h] w-[14vh] items-start p-1 border-2 border-black rounded-full bg-orange-200 hover:bg-orange-600 hover:text-slate-100 hover:cursor-pointer"
+                onClick={() => {
+                  setRole("user");
+                }}
+              >
+                {"User"}
+              </li>
+              <li
+                className="h-[10h] w-[14vh] items-start p-1 border-2 border-black rounded-full bg-orange-200 hover:bg-orange-600 hover:text-slate-100 hover:cursor-pointer"
+                onClick={() => {
+                  setRole("project_manager");
+                }}
+              >
+                {"Project manager"}
+              </li>
+            </ul>
+          </div>
+          <p className="p-1">User to add:</p>
+          <div className="border-2 border-black p-2 rounded-xl text-center overflow-scroll h-[26vh] w-[26vh]">
+            <ul className="text-center font-medium space-y-2">
+              <div></div>
+              {users.map((user) => (
+                <li
+                  className="items-start p-1 border-2 border-black rounded-full bg-orange-200 hover:bg-orange-600 hover:text-slate-100 hover:cursor-pointer"
+                  key={user}
+                  value={user}
+                  onClick={() => {
+                    setName(user);
+                  }}
+                >
+                  <span>{user}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className="flex items-center justify-between">
+            <Button
+              text="Add"
+              onClick={(): void => {
+                handleClick();
+              }}
+              type="submit"
+            />
+          </div>
+        </form>
+        <p className="text-center text-gray-500 text-xs"></p>
+      </div>
+    </div>
+  );
+}
+
+export default AddUserToProject;