Merge pull request #167 from Vizzuality/staging

Staging > main

client/src/containers/datasets/item.tsx

@@ -1,9 +1,6 @@
-"use client";
-
+import { useState } from "react";
 import Markdown from "react-markdown";
-
 import Link from "next/link";
-
 import { useAtomValue } from "jotai";
 import { useSession } from "next-auth/react";
 import { LuInfo } from "react-icons/lu";
@@ -18,13 +15,15 @@ import SearchHighlight from "@/components/ui/search-highlight";
 import { Switch } from "@/components/ui/switch";
 
 const DatasetsItem = ({ id, attributes }: DatasetListResponseDataItem) => {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [datasets, setDatasets] = useSyncDatasets();
   const [, setLayers] = useSyncLayers();
   const datasetSearch = useAtomValue(datasetSearchAtom);
-
   const { data: user } = useSession();
 
   const handleToogle = () => {
+    if (isDialogOpen) return; // Prevent toggling when the dialog is open
+
     const lys = attributes?.layers;
 
     if (!lys) return;
@@ -34,10 +33,8 @@ const DatasetsItem = ({ id, attributes }: DatasetListResponseDataItem) => {
         if (prev.includes(id)) {
           return prev.filter((d) => d !== id);
         }
-
         return [...prev, id];
       }
-
       return prev;
     });
 
@@ -50,10 +47,8 @@ const DatasetsItem = ({ id, attributes }: DatasetListResponseDataItem) => {
         if (prev.some((id) => ids.includes(id))) {
           return prev.filter((id) => !ids.includes(id));
         }
-
         return [...ids, ...prev];
       }
-
       return prev;
     });
   };
@@ -71,18 +66,17 @@ const DatasetsItem = ({ id, attributes }: DatasetListResponseDataItem) => {
           <SearchHighlight query={datasetSearch}>{attributes?.name}</SearchHighlight>
         </h2>
       </div>
-      <div className="flex items-center space-x-2.5">
+      <div className="flex items-center space-x-2.5" onClick={(e) => e.stopPropagation()}>
         {user && (
           <Link
             href={`/dashboard/datasets/edit/${id}`}
-            className="inline-flex items-center justify-center whitespace-nowrap rounded-md border border-primary bg-transparent px-2.5 py-1 text-[10px] text-sm font-medium text-primary ring-offset-background transition-colors hover:bg-primary/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 "
-            onClick={(e) => e.stopPropagation()}
+            className="inline-flex items-center justify-center whitespace-nowrap rounded-md border border-primary bg-transparent px-2.5 py-1 text-[10px] text-sm font-medium text-primary ring-offset-background transition-colors hover:bg-primary/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
           >
             Edit
           </Link>
         )}
 
-        <Dialog>
+        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
           <DialogTrigger onClick={(e) => e.stopPropagation()}>
             <LuInfo className="h-5 w-5" />
           </DialogTrigger>