Add RoleDeleteModal

Author: NicoBiernat

src/modals/RoleDeleteModal.tsx

@@ -0,0 +1,76 @@
+import { AuthContext } from '@luna/contexts/api/auth/AuthContext';
+import { newUninitializedRole, Role } from '@luna/contexts/api/auth/types';
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from '@heroui/react';
+import { useCallback, useContext, useEffect, useState } from 'react';
+
+export interface RoleDeleteModalProps {
+  id: number;
+  isOpen: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+export function RoleDeleteModal({ id, isOpen, setOpen }: RoleDeleteModalProps) {
+  const [role, setRole] = useState<Role>(newUninitializedRole());
+  const auth = useContext(AuthContext);
+
+  // initialize modal state
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const fetchRole = async () => {
+      const roleResult = await auth.getRoleById(id);
+      if (roleResult.ok) {
+        setRole(roleResult.value);
+      } else {
+        console.log('Fetching role failed:', roleResult.error);
+        setRole(newUninitializedRole());
+      }
+    };
+    fetchRole();
+  }, [id, isOpen, auth]);
+
+  const deleteRole = useCallback(async () => {
+    const result = await auth.deleteRole(role.id);
+    if (result.ok) {
+      console.log('Deleted role: ', id);
+    } else {
+      console.log('Deleting role', id, 'failed:', result.error);
+    }
+    // TODO: feedback from the request (success, error)
+    setOpen(false);
+  }, [auth, id, setOpen, role.id]);
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={setOpen}>
+      <ModalContent>
+        {onClose => (
+          <>
+            <ModalHeader>Delete Role</ModalHeader>
+            <ModalBody>
+              <span>
+                Do you really want to delete the role{' '}
+                <b>
+                  {role.name} (ID: {role.id})
+                </b>
+                ?
+              </span>
+            </ModalBody>
+            <ModalFooter>
+              <Button color="danger" onPress={deleteRole}>
+                Delete
+              </Button>
+              <Button onPress={onClose}>Cancel</Button>
+            </ModalFooter>
+          </>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+}

src/screens/home/admin/RolesView.tsx

@@ -24,6 +24,7 @@ import {
 } from '@tabler/icons-react';
 import { useContext, useState } from 'react';
 import { RoleAddModal } from '@luna/modals/RoleAddModal';
+import { RoleDeleteModal } from '@luna/modals/RoleDeleteModal';
 
 export function RolesView() {
   const auth = useContext(AuthContext);
@@ -77,6 +78,11 @@ export function RolesView() {
       }
     >
       <RoleAddModal isOpen={showRoleAddModal} setOpen={setShowRoleAddModal} />
+      <RoleDeleteModal
+        id={roleId}
+        isOpen={showRoleAddModal}
+        setOpen={setShowRoleAddModal}
+      />
       <Table
         aria-label="Table of roles for administrators"
         removeWrapper