From e326e2cbe60b049c6a47723f2f81e6c70c627958 Mon Sep 17 00:00:00 2001
From: ColinRgm <colin.regamey@icloud.com>
Date: Tue, 21 Jan 2025 14:31:05 +0100
Subject: [PATCH] fix: add a verification before deleting a user or an ESP

Closes: #230
---
 .../src/app/dashboard/users/page.tsx          | 30 +------
 .../src/app/ui/dashboard/AddUserElement.tsx   |  2 +-
 .../src/app/ui/dashboard/DeleteUsersData.tsx  | 86 +++++++++++++++++++
 3 files changed, 90 insertions(+), 28 deletions(-)
 create mode 100644 nextjs-interface/src/app/ui/dashboard/DeleteUsersData.tsx

diff --git a/nextjs-interface/src/app/dashboard/users/page.tsx b/nextjs-interface/src/app/dashboard/users/page.tsx
index cfaf578..a2e590d 100644
--- a/nextjs-interface/src/app/dashboard/users/page.tsx
+++ b/nextjs-interface/src/app/dashboard/users/page.tsx
@@ -12,6 +12,7 @@ import {
 } from "@/components/ui/card";
 import { getToken, user } from "@/lib/context";
 import EditUsersData from "@/app/ui/dashboard/EditUsersData";
+import DeleteUsersData from "@/app/ui/dashboard/DeleteUsersData";
 
 export default function Page() {
   const [users, setUsers] = useState<user[]>([]);
@@ -27,30 +28,6 @@ export default function Page() {
     return <div>Chargement...</div>;
   }
 
-  // Fonction de suppression d'un utilisateur
-  const handleDelete = async (username: string) => {
-    try {
-      const response = await fetch(`/postgrest/users?username=eq.${username}`, {
-        method: "DELETE",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${getToken()}`,
-        },
-      });
-
-      if (!response.ok) {
-        console.error("Erreur à la suppression de l'utilisateur");
-        console.error(await response.json());
-        return;
-      }
-
-      // Remove user from local state after successful deletion
-      setUsers(users.filter((user) => user.username !== username));
-    } catch (error) {
-      console.error("Error:", error);
-    }
-  };
-
   return (
     <>
       <Card>
@@ -74,9 +51,8 @@ export default function Page() {
                   password={user.password}
                 />
 
-                <Trash2
-                  className="delete-icon cursor-pointer"
-                  onClick={() => handleDelete(user.username)}
+                <DeleteUsersData
+                  username={user.username}
                 />
               </div>
             </div>
diff --git a/nextjs-interface/src/app/ui/dashboard/AddUserElement.tsx b/nextjs-interface/src/app/ui/dashboard/AddUserElement.tsx
index 2879dda..d88356d 100644
--- a/nextjs-interface/src/app/ui/dashboard/AddUserElement.tsx
+++ b/nextjs-interface/src/app/ui/dashboard/AddUserElement.tsx
@@ -44,7 +44,7 @@ export function AddUserElement({
         setUsername("");
         setPassword("");
       } else {
-        setMessage("Erreur à l'ajout 'un utilisateur. Veuillez réessayer.");
+        setMessage("Erreur à l'ajout de l'utilisateur. Veuillez réessayer.");
       }
     } catch (error: any) {
       setMessage("Error: " + error.message);
diff --git a/nextjs-interface/src/app/ui/dashboard/DeleteUsersData.tsx b/nextjs-interface/src/app/ui/dashboard/DeleteUsersData.tsx
new file mode 100644
index 0000000..e93e73f
--- /dev/null
+++ b/nextjs-interface/src/app/ui/dashboard/DeleteUsersData.tsx
@@ -0,0 +1,86 @@
+import { useEffect, useState } from "react";
+import { getToken, user } from "@/lib/context";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useAllUsers } from "@/lib/data";
+import {Simulate} from "react-dom/test-utils";
+import error = Simulate.error;
+
+export default function DeleteUserData({
+  username
+}: {
+  username: string;
+}) {
+
+  const [users, setUsers] = useState<user[]>([]);
+  const allUsers = useAllUsers();
+
+  useEffect(() => {
+    if (allUsers) {
+      setUsers(allUsers);
+    }
+  }, [allUsers]);
+
+  if (!allUsers) {
+    return <div>Chargement...</div>;
+  }
+
+  // Fonction de suppression d'un utilisateur
+  const handleDelete = async (username: string) => {
+    try {
+      const response = await fetch(`/postgrest/users?username=eq.${username}`, {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${getToken()}`,
+        },
+      });
+
+      if (!response.ok) {
+
+        return;
+      } else {
+        // window.location.href = '/dashboard/users'
+      }
+
+      // Remove user from local state after successful deletion
+      setUsers(users.filter((user) => user.username !== username));
+    } catch (error) {
+      console.error("Error:", error);
+    }
+  };
+
+  return (
+    <div>
+      <div className="flex cursor-pointer gap-2">
+        <Popover>
+          <PopoverTrigger>
+            <Trash2 />
+          </PopoverTrigger>
+
+          <PopoverContent>
+            <p>Supprimer cet utilisateur ?</p>
+            <Button
+              onClick={async () => {
+                try {
+                  await handleDelete(username);
+                } catch (e) {
+                  console.error(e);
+                }
+              }}
+              className="w-72"
+            >
+              OUI
+            </Button>
+            <Button className="w-72">NON</Button>
+          </PopoverContent>
+        </Popover>
+      </div>
+    </div>
+  );
+}