fix: Delete only last tag from bookmark (#408)

* refactor: Simplify tag deletion callback API

* fix: Sync currentBookmark.current.tags with state changes

* style: Fix formatting

Author: veracioux

frontend/components/Bookmark/BookmarkCard.tsx

@@ -203,8 +203,7 @@ export default function BookmarkCard({ bookmark }: Readonly<BookmarkProp>) {
     });
   }
 
-  const onDeleteTag = (title: string) => {
-    const idx = getIdxFromTitle(title);
+  const onDeleteTag = (idx: number) => {
     const tagId = bookmark.tags[idx].id;
     if (currentBookmark.current) {
       currentBookmark.current.tags = currentBookmark.current.tags.filter(
@@ -229,6 +228,7 @@ export default function BookmarkCard({ bookmark }: Readonly<BookmarkProp>) {
     addTagToBookmark(bookmark, tag).then((action) => {
       dispatch(action);
       setStrTags([...strTags, tag]);
+      currentBookmark.current.tags.push({ id: action.id, title: action.title });
     });
 
   function getIdxFromTitle(title: string): number {

frontend/components/Bookmark/NewBookmarkCard.tsx

@@ -242,7 +242,7 @@ export default function NewBookmarkCard() {
                   tags={strTags}
                   inputValue={tagInput}
                   setInputValue={setTagInput}
-                  onDeleteTag={(_, index) => deleteTag(index, setFieldValue)}
+                  onDeleteTag={(index) => deleteTag(index, setFieldValue)}
                   onPushTag={(tag) => onPushTag(tag, setFieldValue)}
                   testIdPrefix="new-bk-"
                 ></TagInput>

frontend/components/Bookmark/TagInput.tsx

@@ -5,7 +5,7 @@ const TagInput = (props: {
   tags: readonly string[];
   inputValue: string;
   setInputValue: (val: string) => void;
-  onDeleteTag: (tag: string, index: number) => void;
+  onDeleteTag: (index: number) => void;
   onPushTag: (tag: string) => void;
   testIdPrefix: `bk-${string}-` | `new-bk-`;
 }) => {
@@ -28,7 +28,7 @@ const TagInput = (props: {
       const tagsCopy = [...props.tags];
       const poppedTag = tagsCopy.pop();
       if (poppedTag) {
-        props.onDeleteTag(poppedTag, props.tags.length - 1);
+        props.onDeleteTag(props.tags.length - 1);
         props.setInputValue(poppedTag);
       }
     }
@@ -39,10 +39,10 @@ const TagInput = (props: {
       {props.tags.map((tag, index) => (
         <button
           key={tag}
-          onClick={() => props.onDeleteTag(tag, index)}
+          onClick={() => props.onDeleteTag(index)}
           onContextMenu={(e) => {
             e.preventDefault();
-            props.onDeleteTag(tag, index);
+            props.onDeleteTag(index);
           }}
           type="button"
           className={style.pillButton}