From d07f2c90065f53d36a3fc0e7db54c32d54a2a332 Mon Sep 17 00:00:00 2001
From: Mohamed Bassem <me@mbassem.com>
Date: Thu, 25 Apr 2024 20:15:15 +0100
Subject: feature(web): Add ability to rename, merge and fast delete tags.
 Fixes #105 (#125)

* feature(web): Allow deleting tags from the all tags page

* feature(web): Add ability to rename, merge and fast delete tags. Fixes #105
---
 .../components/dashboard/preview/EditableTitle.tsx | 155 ++++-----------------
 1 file changed, 25 insertions(+), 130 deletions(-)

(limited to 'apps/web/components/dashboard/preview')

diff --git a/apps/web/components/dashboard/preview/EditableTitle.tsx b/apps/web/components/dashboard/preview/EditableTitle.tsx
index 071b3ca3..8067e23d 100644
--- a/apps/web/components/dashboard/preview/EditableTitle.tsx
+++ b/apps/web/components/dashboard/preview/EditableTitle.tsx
@@ -1,27 +1,11 @@
-import { useEffect, useRef, useState } from "react";
-import { ActionButtonWithTooltip } from "@/components/ui/action-button";
-import { ButtonWithTooltip } from "@/components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipPortal,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
-import { Check, Pencil, X } from "lucide-react";
 
 import { useUpdateBookmark } from "@hoarder/shared-react/hooks/bookmarks";
 import { ZBookmark } from "@hoarder/shared/types/bookmarks";
 
-interface Props {
-  bookmarkId: string;
-  originalTitle: string | null;
-  setEditable: (editable: boolean) => void;
-}
-
-function EditMode({ bookmarkId, originalTitle, setEditable }: Props) {
-  const ref = useRef<HTMLDivElement>(null);
+import { EditableText } from "../EditableText";
 
+export function EditableTitle({ bookmark }: { bookmark: ZBookmark }) {
   const { mutate: updateBookmark, isPending } = useUpdateBookmark({
     onSuccess: () => {
       toast({
@@ -30,107 +14,6 @@ function EditMode({ bookmarkId, originalTitle, setEditable }: Props) {
     },
   });
 
-  useEffect(() => {
-    if (ref.current) {
-      ref.current.focus();
-      ref.current.textContent = originalTitle;
-    }
-  }, [ref]);
-
-  const onSave = () => {
-    let toSave: string | null = ref.current?.textContent ?? null;
-    if (originalTitle == toSave) {
-      // Nothing to do here
-      return;
-    }
-    if (toSave == "") {
-      toSave = null;
-    }
-    updateBookmark({
-      bookmarkId,
-      title: toSave,
-    });
-    setEditable(false);
-  };
-
-  return (
-    <div className="flex gap-3">
-      <div
-        ref={ref}
-        role="presentation"
-        className="p-2 text-center text-lg"
-        contentEditable={true}
-        onKeyDown={(e) => {
-          if (e.key === "Enter") {
-            e.preventDefault();
-          }
-        }}
-      />
-      <ActionButtonWithTooltip
-        tooltip="Save"
-        delayDuration={500}
-        size="none"
-        variant="ghost"
-        className="align-middle text-gray-400"
-        loading={isPending}
-        onClick={() => onSave()}
-      >
-        <Check className="size-4" />
-      </ActionButtonWithTooltip>
-      <ButtonWithTooltip
-        tooltip="Cancel"
-        delayDuration={500}
-        size="none"
-        variant="ghost"
-        className="align-middle text-gray-400"
-        onClick={() => {
-          setEditable(false);
-        }}
-      >
-        <X className="size-4" />
-      </ButtonWithTooltip>
-    </div>
-  );
-}
-
-function ViewMode({ originalTitle, setEditable }: Props) {
-  return (
-    <Tooltip delayDuration={500}>
-      <div className="flex items-center gap-3 text-center">
-        <TooltipTrigger asChild>
-          {originalTitle ? (
-            <p className="line-clamp-2 text-lg">{originalTitle}</p>
-          ) : (
-            <p className="text-lg italic text-gray-600">Untitled</p>
-          )}
-        </TooltipTrigger>
-        <ButtonWithTooltip
-          delayDuration={500}
-          tooltip="Edit title"
-          size="none"
-          variant="ghost"
-          className="align-middle text-gray-400"
-          onClick={() => {
-            setEditable(true);
-          }}
-        >
-          <Pencil className="size-4" />
-        </ButtonWithTooltip>
-      </div>
-      <TooltipPortal>
-        {originalTitle && (
-          <TooltipContent side="bottom" className="max-w-[40ch]">
-            {originalTitle}
-          </TooltipContent>
-        )}
-      </TooltipPortal>
-    </Tooltip>
-  );
-}
-
-export function EditableTitle({ bookmark }: { bookmark: ZBookmark }) {
-  const [editable, setEditable] = useState(false);
-
   let title: string | null = null;
   switch (bookmark.content.type) {
     case "link":
@@ -149,17 +32,29 @@ export function EditableTitle({ bookmark }: { bookmark: ZBookmark }) {
     title = null;
   }
 
-  return editable ? (
-    <EditMode
-      bookmarkId={bookmark.id}
-      originalTitle={title}
-      setEditable={setEditable}
-    />
-  ) : (
-    <ViewMode
-      bookmarkId={bookmark.id}
-      originalTitle={title}
-      setEditable={setEditable}
+  return (
+    <EditableText
+      originalText={title}
+      editClassName="p-2 text-center text-lg"
+      viewClassName="line-clamp-2 text-lg"
+      untitledClassName="text-lg italic text-gray-600"
+      onSave={(newTitle) => {
+        updateBookmark(
+          {
+            bookmarkId: bookmark.id,
+            title: newTitle,
+          },
+          {
+            onError: () => {
+              toast({
+                description: "Something went wrong",
+                variant: "destructive",
+              });
+            },
+          },
+        );
+      }}
+      isSaving={isPending}
     />
   );
 }
-- 
cgit v1.2.3-70-g09d2