Bookmark page on by bookmark button on submenu

https://youtrack.weseek.co.jp/issue/GW-7920
- Remove cancel bookmark tooltip
- Add onUnbookmarkHandler method
- Modify toggleBookmarkHandler toaster
- Display toaster conditionally
- Display cancel bookmark dropdown item if page is already bookmarked
- Add custom class to bookmark list when drag item isOver folder
- Adjust custom style for drop item area

packages/app/src/components/BookmarkButtons.tsx

@@ -44,12 +44,8 @@ const BookmarkButtons: FC<Props> = (props: Props) => {
     if (isGuestUser) {
       return 'Not available for guest';
     }
-
-    if (bookmarkInfo?.isBookmarked) {
-      return 'tooltip.cancel_bookmark';
-    }
     return 'tooltip.bookmark';
-  }, [isGuestUser, bookmarkInfo]);
+  }, [isGuestUser]);
 
 
   return (

packages/app/src/components/Bookmarks/BookmarkFolderItem.tsx

@@ -181,7 +181,7 @@ const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderIt
     return true;
   };
 
-  const [, dropRef] = useDrop(() => ({
+  const [{ isOver }, dropRef] = useDrop(() => ({
     accept: acceptedTypes,
     drop: (item: DragItemDataType, monitor) => {
       const itemType = monitor.getItemType();
@@ -192,8 +192,7 @@ const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderIt
       return isDroppable(item, root, level, itemType);
     },
     collect: monitor => ({
-      isFolderOver: monitor.isOver({ shallow: true }) && monitor.canDrop(),
-      isBookmarkOver: monitor.isOver() && monitor.canDrop(),
+      isOver: monitor.isOver({ shallow: true }) && monitor.canDrop(),
     }),
   }));
 
@@ -254,7 +253,7 @@ const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderIt
   return (
     <div id={`grw-bookmark-folder-item-${folderId}`} className="grw-foldertree-item-container">
       <li ref={(c) => { bookmarkFolderDragRef(c); dropRef(c) }}
-        className="list-group-item list-group-item-action border-0 py-0 pr-3 d-flex align-items-center"
+        className={`${isOver ? 'grw-accept-drop-item' : ''} list-group-item list-group-item-action border-0 py-0 pr-3 d-flex align-items-center`}
         onClick={loadChildFolder}
       >
         <div className="grw-triangle-container d-flex justify-content-center">

packages/app/src/components/Bookmarks/BookmarkFolderMenu.tsx

@@ -36,29 +36,33 @@ const BookmarkFolderMenu = (props: Props): JSX.Element => {
   const isBookmarked = userBookmarkInfo?.isBookmarked;
   const [isOpen, setIsOpen] = useState(false);
 
+
   const toggleBookmarkHandler = useCallback(async() => {
 
     try {
       await apiv3Put('/bookmark-folder/update-bookmark', { pageId: currentPage?._id, status: isBookmarked });
-      toastSuccess(t('toaster.add_succeeded', { target: t('bookmark_folder.bookmark'), ns: 'commons' }));
     }
     catch (err) {
       toastError(err);
     }
 
-    mutateUserBookmarks();
-    mutateBookmarkInfo();
-    setSelectedItem(null);
-    mutateBookmarkFolderData();
-  }, [currentPage, isBookmarked, mutateBookmarkFolderData, mutateBookmarkInfo, mutateUserBookmarks, t]);
 
+  }, [currentPage, isBookmarked]);
 
   const onClickNewBookmarkFolder = useCallback(() => {
     setIsCreateAction(true);
   }, []);
 
+  const onUnbookmarkHandler = useCallback(async() => {
+    await toggleBookmarkHandler();
+    mutateUserBookmarks();
+    mutateBookmarkInfo();
+    mutateBookmarkFolderData();
+    setSelectedItem(null);
+    toastSuccess(t('toaster.delete_succeeded', { target: t('bookmark_folder.bookmark'), ns: 'commons' }));
+  }, [mutateBookmarkFolderData, mutateBookmarkInfo, mutateUserBookmarks, t, toggleBookmarkHandler]);
 
-  const toggleHandler = useCallback(() => {
+  const toggleHandler = useCallback(async() => {
     setIsOpen(!isOpen);
     mutateBookmarkFolderData();
     if (isOpen && bookmarkFolders != null) {
@@ -72,7 +76,19 @@ const BookmarkFolderMenu = (props: Props): JSX.Element => {
         });
       });
     }
-  }, [bookmarkFolders, currentPage?._id, isOpen, mutateBookmarkFolderData]);
+    if (!isOpen && !isBookmarked) {
+      try {
+        toggleBookmarkHandler();
+        mutateUserBookmarks();
+        mutateBookmarkInfo();
+        setSelectedItem(null);
+        toastSuccess(t('toaster.add_succeeded', { target: t('bookmark_folder.bookmark'), ns: 'commons' }));
+      }
+      catch (err) {
+        toastError(err);
+      }
+    }
+  }, [isOpen, mutateBookmarkFolderData, bookmarkFolders, isBookmarked, currentPage?._id, toggleBookmarkHandler, mutateUserBookmarks, mutateBookmarkInfo, t]);
 
 
   const isBookmarkFolderExists = useCallback((): boolean => {
@@ -97,17 +113,14 @@ const BookmarkFolderMenu = (props: Props): JSX.Element => {
 
   const onMenuItemClickHandler = useCallback(async(itemId: string) => {
     try {
-      // Remove from root folder then move to selected folder
       if (isBookmarked) {
         await toggleBookmarkHandler();
-        await apiv3Post('/bookmark-folder/add-boookmark-to-folder', { pageId: currentPage?._id, folderId: itemId });
-      }
-      // Move to selected folder
-      else {
-        await apiv3Post('/bookmark-folder/add-boookmark-to-folder', { pageId: currentPage?._id, folderId: itemId });
-        mutateBookmarkInfo();
-        toastSuccess(t('toaster.add_succeeded', { target: t('bookmark_folder.bookmark'), ns: 'commons' }));
       }
+      await apiv3Post('/bookmark-folder/add-boookmark-to-folder', { pageId: currentPage?._id, folderId: itemId });
+      const toaster = isBookmarked ? 'toaster.update_successed' : 'toaster.add_succeeded';
+      toastSuccess(t(toaster, { target: t('bookmark_folder.bookmark'), ns: 'commons' }));
+      mutateBookmarkInfo();
+      mutateUserBookmarks();
     }
     catch (err) {
       toastError(err);
@@ -115,19 +128,25 @@ const BookmarkFolderMenu = (props: Props): JSX.Element => {
 
     mutateBookmarkFolderData();
     setSelectedItem(itemId);
-  }, [currentPage?._id, isBookmarked, mutateBookmarkFolderData, mutateBookmarkInfo, t, toggleBookmarkHandler]);
+  }, [currentPage?._id, isBookmarked, mutateBookmarkFolderData, mutateBookmarkInfo, mutateUserBookmarks, toggleBookmarkHandler, t]);
 
 
   const renderBookmarkMenuItem = (child ?:BookmarkFolderItems[]) => {
     if (!child) {
       return (
         <>
-          <DropdownItem toggle={false} onClick={toggleBookmarkHandler} className={`grw-bookmark-folder-menu-item ${isBookmarked ? 'text-danger' : ''}`}>
-            <i className="fa fa-bookmark"></i> <span className="mx-2 ">
-              { isBookmarked ? t('bookmark_folder.cancel_bookmark') : t('bookmark_folder.bookmark_this_page')}
-            </span>
-          </DropdownItem>
-          <DropdownItem divider />
+          { isBookmarked && (
+            <>
+              <DropdownItem toggle={false} onClick={onUnbookmarkHandler} className={'grw-bookmark-folder-menu-item text-danger'}>
+                <i className="fa fa-bookmark"></i> <span className="mx-2 ">
+                  {t('bookmark_folder.cancel_bookmark') }
+                </span>
+              </DropdownItem>
+              <DropdownItem divider />
+            </>)
+
+          }
+
           { isCreateAction ? (
             <div className='mx-2'>
               <BookmarkFolderNameInput

packages/app/src/components/Bookmarks/BookmarkFolderMenuItem.tsx

@@ -109,15 +109,11 @@ const BookmarkFolderMenuItem = (props: Props): JSX.Element => {
     try {
       if (isBookmarked) {
         await apiv3Put('/bookmark-folder/update-bookmark', { pageId: currentPage?._id, status: isBookmarked });
-        await apiv3Post('/bookmark-folder/add-boookmark-to-folder', { pageId: currentPage?._id, folderId: item._id });
-        mutateUserBookmarks();
       }
-      else {
-        await apiv3Post('/bookmark-folder/add-boookmark-to-folder', { pageId: currentPage?._id, folderId: item._id });
-        toastSuccess(t('toaster.add_succeeded', { target: t('bookmark_folder.bookmark'), ns: 'commons' }));
-        mutateUserBookmarks();
-      }
-
+      await apiv3Post('/bookmark-folder/add-boookmark-to-folder', { pageId: currentPage?._id, folderId: item._id });
+      const toaster = isBookmarked ? 'toaster.update_successed' : 'toaster.add_succeeded';
+      toastSuccess(t(toaster, { target: t('bookmark_folder.bookmark'), ns: 'commons' }));
+      mutateUserBookmarks();
       mutateBookamrkData();
       setSelectedItem(item._id);
       mutateBookmarkInfo();

packages/app/src/components/Bookmarks/BookmarkFolderTree.module.scss

@@ -1,13 +1,19 @@
 @use '~/styles/molecules/bookmark-folder-tree';
 
 .grw-folder-tree-container :global {
+  .grw-foldertree-item-container, .grw-drop-item-area {
+    & .grw-accept-drop-item {
+      border-style: dashed !important;
+      border-width: 0.15rem !important;
+    }
+  }
+
   .grw-drop-item-area {
     min-height: 90vh;
     padding: 1rem;
-    .grw-accept-drop-item {
-      padding: 0.5rem;
-      border-style: dashed;
-      border-width: 0.15rem;
+
+    & .grw-accept-drop-item {
+      padding: 0.7rem;
     }
   }
 }

packages/app/src/styles/theme/_apply-colors-dark.scss

@@ -371,10 +371,10 @@
 
     // bookmarks
     .grw-folder-tree-container {
-      .grw-drop-item-area {
+      .grw-drop-item-area , .grw-foldertree-item-container {
         .grw-accept-drop-item {
-          background-color: hsl.lighten(var(--bgcolor-sidebar-context), 10%);
-          border-color: hsl.lighten(var(--bgcolor-sidebar-context), 30%);
+          background-color: hsl.lighten(var(--bgcolor-sidebar-context), 10%) !important;
+          border-color: hsl.lighten(var(--bgcolor-sidebar-context), 30%) !important;
         }
       }
     }
@@ -438,10 +438,10 @@
       );
     }
     .grw-folder-tree-container {
-      .grw-drop-item-area {
+      .grw-drop-item-area , .grw-foldertree-item-container {
         .grw-accept-drop-item {
-          background-color: hsl.lighten(var($body-bg), 10%);
-          border-color: hsl.lighten(var($body-bg), 30%);
+          background-color: hsl.lighten(var($body-bg), 10%) !important;
+          border-color: hsl.lighten(var($body-bg), 30%) !important;
         }
       }
     }

packages/app/src/styles/theme/_apply-colors-light.scss

@@ -239,10 +239,10 @@
 
     // bookmark
     .grw-folder-tree-container {
-      .grw-drop-item-area {
+      .grw-drop-item-area, .grw-foldertree-item-container  {
         .grw-accept-drop-item {
-          background-color: hsl.darken(var(--bgcolor-sidebar-context), 10%);
-          border-color: hsl.darken(var(--bgcolor-sidebar-context), 30%);
+          background-color: hsl.darken(var(--bgcolor-sidebar-context), 10%) !important;
+          border-color: hsl.darken(var(--bgcolor-sidebar-context), 30%) !important;
         }
       }
     }
@@ -310,10 +310,10 @@
       );
     }
     .grw-folder-tree-container {
-      .grw-drop-item-area {
+      .grw-drop-item-area, .grw-foldertree-item-container  {
         .grw-accept-drop-item {
-          background-color: hsl.darken(var($body-bg), 10%);
-          border-color: hsl.darken(var($body-bg), 30%);
+          background-color: hsl.darken(var($body-bg), 10%) !important;
+          border-color: hsl.darken(var($body-bg), 30%) !important;
         }
       }
     }