Continue removing unused frontend components/logic, improve querying in select pages

frontend/src/components/basic/dialog/AddIncidentContactDialog.tsx

@@ -1,99 +0,0 @@
-import { Fragment, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Dialog, Transition } from "@headlessui/react";
-
-import addIncidentContact from "@app/pages/api/organization/addIncidentContact";
-
-import Button from "../buttons/Button";
-import InputField from "../InputField";
-
-type Props = {
-  isOpen: boolean;
-  closeModal: () => void;
-  incidentContacts: string[];
-  setIncidentContacts: (arg: string[]) => void;
-};
-
-const AddIncidentContactDialog = ({
-  isOpen,
-  closeModal,
-  incidentContacts,
-  setIncidentContacts
-}: Props) => {
-  const [incidentContactEmail, setIncidentContactEmail] = useState("");
-  const { t } = useTranslation();
-
-  const submit = () => {
-    setIncidentContacts(
-      incidentContacts?.length > 0
-        ? incidentContacts.concat([incidentContactEmail])
-        : [incidentContactEmail]
-    );
-    addIncidentContact(localStorage.getItem("orgData.id") as string, incidentContactEmail);
-    closeModal();
-  };
-  return (
-    <div>
-      <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={closeModal}>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-black bg-opacity-70" />
-          </Transition.Child>
-
-          <div className="fixed inset-0 overflow-y-auto">
-            <div className="flex min-h-full items-center justify-center p-4 text-center">
-              <Transition.Child
-                as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 scale-95"
-                enterTo="opacity-100 scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 scale-100"
-                leaveTo="opacity-0 scale-95"
-              >
-                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md border border-gray-700 bg-bunker-800 p-6 text-left align-middle shadow-xl transition-all">
-                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-400">
-                    {t("section.incident.add-dialog.title")}
-                  </Dialog.Title>
-                  <div className="mt-2 mb-2">
-                    <p className="text-sm text-gray-500">
-                      {t("section.incident.add-dialog.description")}
-                    </p>
-                  </div>
-                  <div className="max-h-28">
-                    <InputField
-                      label={t("common.email")}
-                      onChangeHandler={setIncidentContactEmail}
-                      type="varName"
-                      value={incidentContactEmail}
-                      placeholder=""
-                      isRequired
-                    />
-                  </div>
-                  <div className="mt-6 max-w-max">
-                    <Button
-                      onButtonPressed={submit}
-                      color="mineshaft"
-                      text={t("section.incident.add-dialog.add-incident") as string}
-                      size="md"
-                    />
-                  </div>
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </div>
-        </Dialog>
-      </Transition>
-    </div>
-  );
-};
-
-export default AddIncidentContactDialog;

frontend/src/components/basic/table/ProjectUsersTable.tsx

@@ -6,8 +6,10 @@ import { useNotificationContext } from "@app/components/context/Notifications/No
 import { Select, SelectItem } from "@app/components/v2";
 import { useSubscription, useWorkspace } from "@app/context";
 import updateUserProjectPermission from "@app/ee/api/memberships/UpdateUserProjectPermission";
-import changeUserRoleInWorkspace from "@app/pages/api/workspace/changeUserRoleInWorkspace";
-import deleteUserFromWorkspace from "@app/pages/api/workspace/deleteUserFromWorkspace";
+import {
+  useDeleteUserFromWorkspace,
+  useUpdateUserWorkspaceRole
+} from "@app/hooks/api";
 import getLatestFileKey from "@app/pages/api/workspace/getLatestFileKey";
 import uploadKeys from "@app/pages/api/workspace/uploadKeys";
 
@@ -40,9 +42,11 @@ type EnvironmentProps = {
 const ProjectUsersTable = ({ userData, changeData, myUser, filter, isUserListLoading }: Props) => {
   const { currentWorkspace } = useWorkspace();
   const { subscription } = useSubscription();
-  const [roleSelected, setRoleSelected] = useState(
-    Array(userData?.length).fill(userData.map((user) => user.role))
-  );
+  const { mutateAsync: deleteUserFromWorkspaceMutateAsync } = useDeleteUserFromWorkspace();
+  const { mutateAsync: updateUserWorkspaceRoleMutateAsync } = useUpdateUserWorkspaceRole();
+  // const [roleSelected, setRoleSelected] = useState(
+  //   Array(userData?.length).fill(userData.map((user) => user.role))
+  // );
   const router = useRouter();
   const [myRole, setMyRole] = useState("member");
   const [workspaceEnvs, setWorkspaceEnvs] = useState<EnvironmentProps[]>([]);
@@ -52,38 +56,15 @@ const ProjectUsersTable = ({ userData, changeData, myUser, filter, isUserListLoa
   const workspaceId = router.query.id as string;
   // Delete the row in the table (e.g. a user)
   // #TODO: Add a pop-up that warns you that the user is going to be deleted.
-  const handleDelete = (membershipId: string, index: number) => {
-    // setUserIdToBeDeleted(userId);
-    // onClick();
-    deleteUserFromWorkspace(membershipId);
-    changeData(userData.filter((v, i) => i !== index));
-    setRoleSelected([
-      ...roleSelected.slice(0, index),
-      ...roleSelected.slice(index + 1, userData?.length)
-    ]);
+  const handleDelete = async (membershipId: string) => {
+    await deleteUserFromWorkspaceMutateAsync(membershipId);
   };
 
-  // Update the rold of a certain user
-  const handleRoleUpdate = (index: number, e: string) => {
-    changeUserRoleInWorkspace(userData[index].membershipId, e.toLowerCase());
-    changeData([
-      ...userData.slice(0, index),
-      ...[
-        {
-          key: userData[index].key,
-          firstName: userData[index].firstName,
-          lastName: userData[index].lastName,
-          email: userData[index].email,
-          role: e.toLocaleLowerCase(),
-          status: userData[index].status,
-          userId: userData[index].userId,
-          membershipId: userData[index].membershipId,
-          publicKey: userData[index].publicKey,
-          deniedPermissions: userData[index].deniedPermissions
-        }
-      ],
-      ...userData.slice(index + 1, userData?.length)
-    ]);
+  const handleRoleUpdate = async (index: number, e: string) => {
+    await updateUserWorkspaceRoleMutateAsync({
+      membershipId: userData[index].membershipId, 
+      role: e.toLowerCase()
+    });
     createNotification({
       text: "Successfully changed user role.",
       type: "success"
@@ -373,7 +354,7 @@ const ProjectUsersTable = ({ userData, changeData, myUser, filter, isUserListLoa
                     myRole !== "member" ? (
                       <div className="mt-0.5 flex items-center opacity-50 hover:opacity-100">
                         <Button
-                          onButtonPressed={() => handleDelete(row.membershipId, index)}
+                          onButtonPressed={() => handleDelete(row.membershipId)}
                           color="red"
                           size="icon-sm"
                           icon={faX}