fix: Fix Edit tags not populating tags when link is first added

3 files changed, 20 insertions, 18 deletions

diff --git a/packages/web/app/dashboard/bookmarks/components/AddToListModal.tsx b/packages/web/app/dashboard/bookmarks/components/AddToListModal.tsx
index 36e32ab7..4c8e1bc4 100644
--- a/packages/web/app/dashboard/bookmarks/components/AddToListModal.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/AddToListModal.tsx
@@ -158,14 +158,13 @@ export default function AddToListModal({
 export function useAddToListModal(bookmarkId: string) {
   const [open, setOpen] = useState(false);
 
-  return [
+  return {
     open,
     setOpen,
-    <AddToListModal
-      key={bookmarkId}
+    content: <AddToListModal
       bookmarkId={bookmarkId}
       open={open}
       setOpen={setOpen}
     />,
-  ] as const;
+  };
 }
diff --git a/packages/web/app/dashboard/bookmarks/components/BookmarkOptions.tsx b/packages/web/app/dashboard/bookmarks/components/BookmarkOptions.tsx
index d4447f29..e6d0cd15 100644
--- a/packages/web/app/dashboard/bookmarks/components/BookmarkOptions.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/BookmarkOptions.tsx
@@ -30,8 +30,8 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
   const { toast } = useToast();
   const linkId = bookmark.id;
 
-  const [_, setTagModalIsOpen, tagModal] = useTagModel(bookmark);
-  const [_2, setAddToListModalOpen, addToListModal] = useAddToListModal(
+  const {setOpen: setTagModalIsOpen, content: tagModal} = useTagModel(bookmark);
+  const {setOpen: setAddToListModalOpen, content: addToListModal} = useAddToListModal(
     bookmark.id,
   );
 
diff --git a/packages/web/app/dashboard/bookmarks/components/TagModal.tsx b/packages/web/app/dashboard/bookmarks/components/TagModal.tsx
index 3b6a0bd4..703c4221 100644
--- a/packages/web/app/dashboard/bookmarks/components/TagModal.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/TagModal.tsx
@@ -15,7 +15,7 @@ import { ZBookmark } from "@/lib/types/api/bookmarks";
 import { ZAttachedByEnum } from "@/lib/types/api/tags";
 import { cn } from "@/lib/utils";
 import { Sparkles, X } from "lucide-react";
-import { useState, KeyboardEvent } from "react";
+import { useState, KeyboardEvent, useEffect } from "react";
 
 type EditableTag = { attachedBy: ZAttachedByEnum; id?: string; name: string };
 
@@ -113,13 +113,14 @@ export default function TagModal({
   open: boolean;
   setOpen: (open: boolean) => void;
 }) {
-  const [tags, setTags] = useState(() => {
+  const [tags, setTags] = useState<Map<string, EditableTag>>(new Map());
+  useEffect(() => {
     const m = new Map<string, EditableTag>();
     for (const t of bookmark.tags) {
       m.set(t.name, { attachedBy: t.attachedBy, id: t.id, name: t.name });
     }
-    return m;
-  });
+    setTags(m);
+  }, [bookmark.tags]);
 
   const bookmarkInvalidationFunction =
     api.useUtils().bookmarks.getBookmark.invalidate;
@@ -191,14 +192,16 @@ export default function TagModal({
 export function useTagModel(bookmark: ZBookmark) {
   const [open, setOpen] = useState(false);
 
-  return [
+  return {
     open,
     setOpen,
-    <TagModal
-      key={bookmark.id}
-      bookmark={bookmark}
-      open={open}
-      setOpen={setOpen}
-    />,
-  ] as const;
+    content: (
+      <TagModal
+        key={bookmark.id}
+        bookmark={bookmark}
+        open={open}
+        setOpen={setOpen}
+      />
+    ),
+  };
 }