fix: hide popover if click on Non

Closes: #230
museebolo · Jan 22, 2025 · eade08a · eade08a
1 parent 61e7af4
commit eade08a
Showing 1 changed file with 17 additions and 21 deletions.
diff --git a/nextjs-interface/src/app/ui/dashboard/DeleteUsersData.tsx b/nextjs-interface/src/app/ui/dashboard/DeleteUsersData.tsx
@@ -10,24 +10,19 @@ import { Button } from "@/components/ui/button";
 import { useAllUsers } from "@/lib/data";
 
 export default function DeleteUserData({ username }: { username: string }) {
-
   // Function to hide the delete popup
   const [hidePopup, setHidePopup] = useState(false);
 
   const hidePopover = () => {
-
     setHidePopup(!hidePopup);
 
-    console.log("Popover cachée");
-  }
-
-
+    console.log(hidePopup ? "Popover cachée" : "Popover affichée");
+  };
 
   // Function to delete a user
   const [users, setUsers] = useState<user[]>([]);
 
   const handleDelete = async () => {
-
     try {
       const response = await fetch(`/postgrest/users?username=eq.${username}`, {
         method: "DELETE",
@@ -40,7 +35,7 @@ export default function DeleteUserData({ username }: { username: string }) {
       if (!response.ok) {
         return;
       } else {
-        window.location.href = "/dashboard/users";
+        // window.location.href = "/dashboard/users";
       }
 
       // Remove user from local state after successful deletion
@@ -57,20 +52,21 @@ export default function DeleteUserData({ username }: { username: string }) {
           <Trash2 />
         </PopoverTrigger>
 
-        <PopoverContent className="mr-5 mt-2 flex w-fit flex-col gap-2 dark:bg-zinc-800">
-          <p>Supprimer cet utilisateur ?</p>
-          <Button
-              onClick={handleDelete}
-              className="w-72">
-            OUI
-          </Button>
-          <Button
+        {hidePopup && (
+          <PopoverContent className="mr-5 mt-2 flex w-fit flex-col gap-2 dark:bg-zinc-800">
+            <p>Supprimer {username} ?</p>
+            <Button onClick={handleDelete} className="w-72">
+              OUI
+            </Button>
+            <Button
               onClick={hidePopover}
-              className="w-72">
-            NON
-          </Button>
-        </PopoverContent>
+              className="w-72 data-[state=closed]:animate-out"
+            >
+              NON
+            </Button>
+          </PopoverContent>
+        )}
       </Popover>
     </div>
   );
-}
+}