Show modal on modify + split component

src/components/manageMember/ManageMember.jsx

@@ -1,29 +1,14 @@
 import Button from "../ui/button/button.jsx";
 import Modal from "../ui/modal/modal.jsx";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import styles from "./manageMember.module.css"
 import DeleteMemberBtn from "./deleteMember/deleteMemberBtn.jsx";
-import getRoles from "../../utils/getRoles.js"
-import modifyRole from "../../utils/users/modifyRole.js";
+import ModifyRole from "./modifyrole/ModifyRole.jsx";
 
 export default function ManageMember({ user }) {
 
     const [open, setOpen] = useState(false);
-    const [roles, setRoles] = useState([]);
-    const [selectedRole, setSelectedRole] = useState(3);
 
-    useEffect(() => {
-        if (!open) return;
-
-        getRoles().then(data => {
-            if (data) setRoles(data);
-        });
-    }, [open]);
-
-    const handleRoleUpdate = async () => {
-        const res = await modifyRole(selectedRole, user.id);
-        console.log(res);
-    };
 
     return <>
         <Button onClick={() => setOpen(true)} variant={"default"} className={styles.manageBtn}>
@@ -40,24 +25,7 @@ export default function ManageMember({ user }) {
 
             <div className={styles.manageSection}>
                 <h3>Modifier le rôle</h3>
-
-                <div className={`${styles.manageBlockContent} ${styles.modifyRole}`}>
-                    <select
-                        value={selectedRole}
-                        onChange={(e) => setSelectedRole(e.target.value)}
-                        className={styles.select}
-                    >
-                        {roles.map((role, index) => (
-                            <option key={index} value={index+1}>
-                                {role}
-                            </option>
-                        ))}
-                    </select>
-
-                    <Button onClick={handleRoleUpdate} variant={"default"}>
-                        Enregistrer
-                    </Button>
-                </div>
+                <ModifyRole user={user} />
             </div>
         </Modal>
     </>

src/components/manageMember/manageMember.module.css

@@ -40,4 +40,8 @@
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
+}
+
+.modalContent {
+    text-align: center;
 }

src/components/manageMember/modifyrole/ModifyRole.jsx

@@ -0,0 +1,59 @@
+import styles from "../manageMember.module.css";
+import Button from "../../ui/button/button.jsx";
+import modifyRole from "../../../utils/users/modifyRole.js";
+import { useState, useEffect } from "react";
+import getRoles from "../../../utils/getRoles.js";
+import Modal from "../../ui/modal/modal.jsx";
+
+export default function ModifyRole({ user }) {
+
+    const [roles, setRoles] = useState([]);
+    const [selectedRole, setSelectedRole] = useState(3);
+    const [open, setOpen] = useState(false);
+    const [title, setTitle] = useState("");
+    const [description, setDescription] = useState("");
+
+    useEffect(() => {
+        getRoles().then(data => {
+            if (data) setRoles(data);
+        });
+    }, [])
+
+
+    const handleRoleUpdate = async () => {
+        const res = await modifyRole(selectedRole, user.id);
+
+        if (res.success) {
+            setDescription("Rôle modifié avec succès");
+            setTitle("Modification")
+            setOpen(true);
+        } else {
+            setDescription("Erreur lors de la modification du rôle");
+            setTitle("Erreur")
+            setOpen(true);
+        }
+    };
+
+
+    return <div className={`${styles.manageBlockContent} ${styles.modifyRole}`}>
+        <select
+            value={selectedRole}
+            onChange={(e) => setSelectedRole(e.target.value)}
+            className={styles.select}
+        >
+            {roles.map((role, index) => (
+                <option key={index} value={index+1}>
+                    {role}
+                </option>
+            ))}
+        </select>
+
+        <Button onClick={handleRoleUpdate} variant={"default"}>
+            Enregistrer
+        </Button>
+
+        <Modal open={open} onClose={() => setOpen(false)} title={title}>
+            <p className={styles.modalContent}>{description}</p>
+        </Modal>
+    </div>
+}

src/utils/users/modifyRole.js

@@ -1,30 +1,33 @@
 import getXSRFToken from "../getXSRF.js";
 
+
 export default async function modifyRole(role, userId) {
-
-    const csrfToken = await getXSRFToken();
-
     try {
-        const res = await fetch(`${import.meta.env.VITE_API_URL}/api/users/${userId}/role`, {
-            method: 'POST',
-            credentials: 'include',
-            headers: {
-                'Accept': 'application/json',
-                'X-XSRF-TOKEN': csrfToken,
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-                role: role,
-            })
-        });
+        const csrfToken = await getXSRFToken();
+
+        const res = await fetch(
+            `${import.meta.env.VITE_API_URL}/api/users/${userId}/role`,
+            {
+                method: 'POST',
+                credentials: 'include',
+                headers: {
+                    'Accept': 'application/json',
+                    'X-XSRF-TOKEN': csrfToken,
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ role }),
+            }
+        );
+
+        const data = await res.json();
 
         if (!res.ok) {
-            throw new Error(`Erreur serveur : ${res.status}`);
+            return { success: false, error: data.message ?? "Erreur serveur" };
         }
 
-        return await res.json();
+        return { success: true, data };
     } catch (err) {
-        console.error('Erreur :', err);
-        return null;
+        console.error(err);
+        return { success: false, error: "Erreur réseau" };
     }
-}
+}