Add deleteUser btn

src/pages/Profile/ProfilePage.tsx

@@ -8,7 +8,7 @@ import {useParams} from "react-router";
 import {useNavigate} from "react-router";
 import {useRef} from "react";
 import getUserById from "../../utils/users/getUserById";
-import ManageMember from "./components/ManageMember/ManageMember.jsx";
+import ManageMember from "./components/ManageMember/ManageMember.js";
 import uploadProfilePhoto from "../../utils/users/uploadProfilePhoto";
 import deleteProfilePhoto from "../../utils/users/deleteProfilePhoto.js";
 

src/pages/Profile/components/ManageMember/DeleteMember/DeleteMemberBtn.tsx

@@ -0,0 +1,31 @@
+import {ReactNode, useState} from "react";
+import Button from "../../../../../components/ui/Button/Button";
+import Modal from "../../../../../components/ui/Modal/Modal";
+import { useNavigate } from "react-router";
+import deleteOtherUser from "../../../../../utils/users/deleteOtherUser";
+
+export default function DeleteMemberBtn({name, id, className}: { name: string, id: number, className?: any }): ReactNode {
+
+    const [open, setOpen] = useState(false);
+    const navigate = useNavigate();
+
+    const deleteMember = async () => {
+        const result = await deleteOtherUser(id);
+
+        if (result.status === 200 || result.status === 204) {
+            setOpen(false);
+            navigate("/volunteers");
+        }
+    }
+
+    return <div className={className}>
+        <Button variant={"danger"} onClick={() => setOpen(true)}>Désactiver</Button>
+
+        <Modal open={open} onClose={() => setOpen(false)} title={"Supprimer"}>
+            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 15 }}>
+                <p>Etes-vous sur de vouloir supprimer le compte {name} ?</p>
+                <Button variant={"danger"} onClick={deleteMember}>Supprimer</Button>
+            </div>
+        </Modal>
+    </div>
+}

src/pages/Profile/components/ManageMember/ManageMember.tsx

@@ -4,12 +4,14 @@ import {useContext, useState} from "react";
 import styles from "./ManageMember.module.css"
 import DeactivateMemberBtn from "./DeactivateMember/DeactivateMemberBtn.jsx";
 import ModifyRole from "./ModifyRole/ModifyRole.jsx";
-import {AuthContext} from "../../../../contexts/Auth/AuthContext.js";
+import { AuthContext, AuthContextType } from "../../../../contexts/Auth/AuthContext.js";
+import DeleteMemberBtn from "./DeleteMember/DeleteMemberBtn";
+import User from  "../../../../interfaces/user.interface";
 
 
-export default function ManageMember({ userToManage }) {
+export default function ManageMember({ userToManage }: { userToManage: User }) {
 
-    const { user } = useContext(AuthContext);
+    const { user } = useContext(AuthContext) as AuthContextType;
     const [open, setOpen] = useState(false);
 
 
@@ -21,10 +23,13 @@ export default function ManageMember({ userToManage }) {
 
         <Modal open={open} onClose={() => setOpen(false)} title={`Gestion de l'utilisateur ${userToManage.name}`}>
 
-            {(user.id != userToManage.id) ? (
+            {(user?.id != userToManage.id) ? (
                 <div className={styles.manageSection}>
                     <h3>Désactiver le compte</h3>
                     <DeactivateMemberBtn name={userToManage.name} id={userToManage.id} className={styles.manageBlockContent} />
+
+                    <h3>Supprimer le compte</h3>
+                    <DeleteMemberBtn name={userToManage.name} id={userToManage.id} className={styles.manageBlockContent} />
                 </div>
             ) : null}