From 878508aab23383b04ed02ac93752018ce754bf88 Mon Sep 17 00:00:00 2001
From: kamtschatka <simon.schatka@gmx.at>
Date: Sun, 13 Oct 2024 09:14:19 +0200
Subject: [PATCH] updated the code to reuse the DeleteTagConfirmationDialog to
 improve performance and fix the tag deletion

---
 .../components/dashboard/tags/AllTagsView.tsx | 23 +++++++++++++++++++
 .../tags/DeleteTagConfirmationDialog.tsx      |  6 +----
 .../web/components/dashboard/tags/TagPill.tsx | 21 ++++++++---------
 3 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/apps/web/components/dashboard/tags/AllTagsView.tsx b/apps/web/components/dashboard/tags/AllTagsView.tsx
index 7b81ed72..3b53fd70 100644
--- a/apps/web/components/dashboard/tags/AllTagsView.tsx
+++ b/apps/web/components/dashboard/tags/AllTagsView.tsx
@@ -19,6 +19,7 @@ import { ArrowDownAZ, Combine } from "lucide-react";
 import type { ZGetTagResponse } from "@hoarder/shared/types/tags";
 import { useDeleteUnusedTags } from "@hoarder/shared-react/hooks/tags";
 
+import DeleteTagConfirmationDialog from "./DeleteTagConfirmationDialog";
 import { TagPill } from "./TagPill";
 
 function DeleteAllUnusedTags({ numUnusedTags }: { numUnusedTags: number }) {
@@ -66,6 +67,11 @@ const byUsageSorter = (a: ZGetTagResponse, b: ZGetTagResponse) => {
 const byNameSorter = (a: ZGetTagResponse, b: ZGetTagResponse) =>
   a.name.localeCompare(b.name, undefined, { sensitivity: "base" });
 
+interface Tag {
+  id: string;
+  name: string;
+}
+
 export default function AllTagsView({
   initialData,
 }: {
@@ -74,6 +80,14 @@ export default function AllTagsView({
   const [draggingEnabled, setDraggingEnabled] = React.useState(false);
   const [sortByName, setSortByName] = React.useState(false);
 
+  const [isDialogOpen, setIsDialogOpen] = React.useState(false);
+  const [selectedTag, setSelectedTag] = React.useState<Tag | null>(null);
+
+  const handleOpenDialog = (tag: Tag) => {
+    setSelectedTag(tag);
+    setIsDialogOpen(true);
+  };
+
   function toggleSortByName(): void {
     setSortByName(!sortByName);
   }
@@ -104,8 +118,17 @@ export default function AllTagsView({
               name={t.name}
               count={t.count}
               isDraggable={draggingEnabled}
+              onOpenDialog={handleOpenDialog}
             />
           ))}
+
+          {selectedTag && (
+            <DeleteTagConfirmationDialog
+              tag={selectedTag}
+              open={isDialogOpen}
+              setOpen={setIsDialogOpen}
+            />
+          )}
         </div>
       );
     } else {
diff --git a/apps/web/components/dashboard/tags/DeleteTagConfirmationDialog.tsx b/apps/web/components/dashboard/tags/DeleteTagConfirmationDialog.tsx
index 7021b715..ba737ec8 100644
--- a/apps/web/components/dashboard/tags/DeleteTagConfirmationDialog.tsx
+++ b/apps/web/components/dashboard/tags/DeleteTagConfirmationDialog.tsx
@@ -7,12 +7,10 @@ import { useDeleteTag } from "@hoarder/shared-react/hooks/tags";
 
 export default function DeleteTagConfirmationDialog({
   tag,
-  children,
   open,
   setOpen,
 }: {
   tag: { id: string; name: string };
-  children?: React.ReactNode;
   open?: boolean;
   setOpen?: (v: boolean) => void;
 }) {
@@ -55,8 +53,6 @@ export default function DeleteTagConfirmationDialog({
           Delete
         </ActionButton>
       )}
-    >
-      {children}
-    </ActionConfirmingDialog>
+    ></ActionConfirmingDialog>
   );
 }
diff --git a/apps/web/components/dashboard/tags/TagPill.tsx b/apps/web/components/dashboard/tags/TagPill.tsx
index 5a0f9943..409ae355 100644
--- a/apps/web/components/dashboard/tags/TagPill.tsx
+++ b/apps/web/components/dashboard/tags/TagPill.tsx
@@ -9,18 +9,18 @@ import Draggable from "react-draggable";
 
 import { useMergeTag } from "@hoarder/shared-react/hooks/tags";
 
-import DeleteTagConfirmationDialog from "./DeleteTagConfirmationDialog";
-
 export function TagPill({
   id,
   name,
   count,
   isDraggable,
+  onOpenDialog,
 }: {
   id: string;
   name: string;
   count: number;
   isDraggable: boolean;
+  onOpenDialog: (tag: { id: string; name: string }) => void;
 }) {
   const [isHovered, setIsHovered] = useState(false);
 
@@ -86,15 +86,14 @@ export function TagPill({
       </Link>
 
       {isHovered && (
-        <DeleteTagConfirmationDialog tag={{ name, id }}>
-          <Button
-            size="none"
-            variant="secondary"
-            className="-translate-1/2 absolute -right-1 -top-1 hidden rounded-full group-hover:block"
-          >
-            <X className="size-3" />
-          </Button>
-        </DeleteTagConfirmationDialog>
+        <Button
+          size="none"
+          variant="secondary"
+          className="-translate-1/2 absolute -right-1 -top-1 hidden rounded-full group-hover:block"
+          onClick={() => onOpenDialog({ id, name })}
+        >
+          <X className="size-3" />
+        </Button>
       )}
     </div>
   );