delete user with confirmation modal

src/app.js

@@ -2,7 +2,8 @@ import Layout from './components/layout';
 import { MantineProvider, ColorSchemeProvider } from '@mantine/core';
 import { AuthProvider } from './tools/auth-provider';
 import { Notifications } from '@mantine/notifications';
-import { useColorSchemeToggle } from './tools/color-scheme-toggle'
+import { useColorSchemeToggle } from './tools/color-scheme-toggle';
+import { ModalsProvider } from '@mantine/modals';
 
 const App = () => {
     const [colorScheme, toggleColorScheme] = useColorSchemeToggle();
@@ -10,14 +11,16 @@ const App = () => {
         <>
             <AuthProvider>
                 <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
+                    <ModalsProvider>
                         <MantineProvider withGlobalStyles withNormalizeCSS theme={{ colorScheme }}>
                             <Notifications />
                             <Layout />
                         </MantineProvider>
+                    </ModalsProvider>
                 </ColorSchemeProvider>
             </AuthProvider>
         </>
     );
 };
-
+// todo theme for modal provider
 export default App;

src/components/confirmation-modal.jsx

@@ -0,0 +1,37 @@
+import { Modal, Text, Group, Button } from '@mantine/core';
+
+const ConfirmationModal = ({ opened, handler, text, action }) => {
+    const confirm = () => {
+        action();
+        handler();
+    };
+
+    return (
+        <Modal.Root opened={opened} onClose={handler}>
+            <Modal.Overlay />
+            <Modal.Content>
+                <Modal.Header>
+                    <Modal.Title>
+                        <Text fw={700} fz="lg">
+                            Confirmation
+                        </Text>
+                    </Modal.Title>
+                    <Modal.CloseButton />
+                </Modal.Header>
+                <Modal.Body>
+                    <Text>{text ?? 'Are you sure you want to do this ?'}</Text>
+                    <Group position="right" mt="md">
+                        <Button variant="light" color="red" onClick={handler}>
+                            Cancel
+                        </Button>
+                        <Button variant="light" color="green" onClick={confirm}>
+                            Confirm
+                        </Button>
+                    </Group>
+                </Modal.Body>
+            </Modal.Content>
+        </Modal.Root>
+    );
+};
+
+export default ConfirmationModal;

src/pages/users/index.jsx

@@ -16,6 +16,7 @@ const Users = () => {
     const toggleModalUpdate = () => setShowUpdate(!showUpdate);
     const [users, setUsers] = useState([]);
     const [roles, setRoles] = useState([]);
+    const [deleteLoading, setDeleteLoading] = useState(false);
 
     useEffect(() => {
         API.listUsers()
@@ -68,23 +69,22 @@ const Users = () => {
             <UserTable
                 data={users}
                 updateItem={(item) => {
-                    console.log(item);
                     setItemToUpdate(item);
                     toggleModalUpdate();
                 }}
-                onDelete={(id) => setUsers(users.filter((item) => item.id != id))}
+                deleteUser={(id) => setUsers(users.filter((item) => item.id != id))}
                 updateHandler={toggleModalUpdate}
             />
             <ModalUserEditor
                 opened={showCreate}
-                handler={(item) => updateUser(item)}
+                handler={(item) => addUser(item)}
                 handlerClose={toggleModalCreate}
                 APICall={API.createUser}
                 name="Create"
             />
             <ModalUserEditor
                 opened={showUpdate}
-                handler={(item) => addUser(item)}
+                handler={(item) => updateUser(item)}
                 handlerClose={toggleModalUpdate}
                 APICall={API.updateUser}
                 item={itemToUpdate}

src/pages/users/users-table.jsx

@@ -1,22 +1,57 @@
-import { Button, Center, Table, Paper, ScrollArea, Group } from '@mantine/core';
+import { Button, Center, Table, Paper, ScrollArea, Group, Text } from '@mantine/core';
-import { useNavigate } from 'react-router-dom';
+import { useState } from 'react';
+import setNotification from '../errors/error-notification';
+import API from '../../services/api';
+import { modals } from '@mantine/modals';
 
-const UserTable = (props) => {
+const OpenConfirmationModal = (action) =>
-    const rows = props.data.map((user) => (
+    modals.openConfirmModal({
-        <tr key={user.id}>
+        title: 'Please confirm your action',
+        children: <Text size="sm">Are you sure you want to delete this user ?</Text>,
+        labels: { confirm: 'Confirm', cancel: 'Cancel' },
+        onCancel: () => {},
+        onConfirm: () => action(),
+    });
+
+const Line = ({ user, ...props }) => {
+    const [isLoading, setIsLoading] = useState(false);
+    const deleteUser = () => {
+        setIsLoading(true);
+        API.deleteUser(user.id)
+            .then((res) => {
+                setIsLoading(false);
+                if (res.status === 200) {
+                    props.deleteUser(user.id);
+                } else {
+                    setNotification(true, res);
+                }
+            })
+            .catch((err) => {
+                setNotification(true, err);
+                setIsLoading(false);
+            });
+    };
+    return (
+        <tr>
             <td>{user.login}</td>
             <td>
-                <Group>
+                <Group position="right">
                     <Button onClick={() => 1} color="green">
                         View
                     </Button>
                     <Button onClick={() => props.updateItem(user)}>Update</Button>
-                    <Button onClick={() => 1} color="red">
+                    <Button onClick={() => OpenConfirmationModal(deleteUser)} color="red" loading={isLoading}>
                         Delete
                     </Button>
                 </Group>
             </td>
         </tr>
+    );
+};
+
+const UserTable = (props) => {
+    const rows = props.data.map((user) => (
+        <Line key={user.id} user={user} deleteUser={props.deleteUser} updateItem={props.updateItem} />
     ));
 
     return (
@@ -25,8 +60,8 @@ const UserTable = (props) => {
                 <Table>
                     <thead>
                         <tr>
-                            <th>Name</th>
+                            <th>Login</th>
-                            <th>Actions</th>
+                            <th position="right">Actions</th>
                         </tr>
                     </thead>
                     <tbody>{rows}</tbody>

src/services/api.js

@@ -61,6 +61,9 @@ const API = {
     createUser(data) {
         return caller().post('/users', data);
     },
+    deleteUser(userId) {
+        return caller().delete(`/users/${userId}`);
+    },
 };
 
 export default API;