From 38ba94ec53efb8a4d4139b1bceea2ca50a3b6e1a Mon Sep 17 00:00:00 2001
From: T'JAMPENS QUENTIN p2406187 <pyramond69@gmail.com>
Date: Tue, 17 Mar 2026 11:09:34 +0100
Subject: [PATCH] Add deleteUser btn

---
 src/pages/Profile/ProfilePage.tsx             |  2 +-
 .../DeleteMember/DeleteMemberBtn.tsx          | 31 +++++++++++++++++++
 .../{ManageMember.jsx => ManageMember.tsx}    | 13 +++++---
 3 files changed, 41 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/Profile/components/ManageMember/DeleteMember/DeleteMemberBtn.tsx
 rename src/pages/Profile/components/ManageMember/{ManageMember.jsx => ManageMember.tsx} (67%)

diff --git a/src/pages/Profile/ProfilePage.tsx b/src/pages/Profile/ProfilePage.tsx
index 8eaa107..18af636 100644
--- a/src/pages/Profile/ProfilePage.tsx
+++ b/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";
 
diff --git a/src/pages/Profile/components/ManageMember/DeleteMember/DeleteMemberBtn.tsx b/src/pages/Profile/components/ManageMember/DeleteMember/DeleteMemberBtn.tsx
new file mode 100644
index 0000000..fd9e6eb
--- /dev/null
+++ b/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>
+}
\ No newline at end of file
diff --git a/src/pages/Profile/components/ManageMember/ManageMember.jsx b/src/pages/Profile/components/ManageMember/ManageMember.tsx
similarity index 67%
rename from src/pages/Profile/components/ManageMember/ManageMember.jsx
rename to src/pages/Profile/components/ManageMember/ManageMember.tsx
index d35b7d0..5eafdb7 100644
--- a/src/pages/Profile/components/ManageMember/ManageMember.jsx
+++ b/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}