improve badge count

https://youtrack.weseek.co.jp/issue/GW-7915
- Remove childCount method
- Change count value of CountBadge component
- Update end drop method of bookmark item
- Implement pageInfo props to PageItemControl
- Fix incorrect remove bookmark button text
- Implement tooltip to delete bookmark button
- Adjust translation of delete bookmark button wording

packages/app/public/static/locales/en_US/translation.json

@@ -823,7 +823,8 @@
       "modal_footer_button": "Delete Folder"
     },
     "input_placeholder": "Input folder name",
-    "new_folder": "New Folder"
+    "new_folder": "New Folder",
+    "delete": "Delete Folder"
   },
   "v5_page_migration": {
     "page_tree_not_avaliable" : "Page tree feature is not available yet.",

packages/app/public/static/locales/ja_JP/translation.json

@@ -823,7 +823,8 @@
       "modal_footer_button": "フォルダを削除"
     },
     "input_placeholder": "フォルダ名を入力してください`",
-    "new_folder": "新しいフォルダ"
+    "new_folder": "新しいフォルダ",
+    "delete": "フォルダを削除"
   },
   "v5_page_migration": {
     "page_tree_not_avaliable" : "Page Tree 機能は現在使用できません。",

packages/app/public/static/locales/zh_CN/translation.json

@@ -826,7 +826,8 @@
       "modal_footer_button": "删除文件夹"
     },
     "input_placeholder": "输入文件夹名称",
-    "new_folder": "新建文件夹"
+    "new_folder": "新建文件夹",
+    "delete": "删除文件夹"
   },
   "v5_page_migration": {
     "page_tree_not_avaliable": "Page Tree 功能不可用",

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

@@ -1,5 +1,5 @@
 import {
-  FC, useCallback, useEffect, useState, useMemo,
+  FC, useCallback, useEffect, useState,
 } from 'react';
 
 import { useTranslation } from 'next-i18next';
@@ -52,13 +52,6 @@ const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderIt
   const { mutate: mutateBookmarkInfo } = useSWRBookmarkInfo(currentPage?._id);
   const { open: openDeleteModal } = usePageDeleteModal();
 
-  const childCount = useMemo((): number => {
-    if (currentChildren != null && currentChildren.length > children.length) {
-      return currentChildren.length;
-    }
-    return children.length;
-  }, [children.length, currentChildren]);
-
   useEffect(() => {
     if (childBookmarkFolderData != null) {
       mutateChildBookmarkData();
@@ -312,9 +305,9 @@ const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderIt
             <div className='grw-foldertree-title-anchor pl-2' >
               <p className={'text-truncate m-auto '}>{name}</p>
             </div>
-            {hasChildren() && (
+            {bookmarks.length > 0 && (
               <div className="grw-foldertree-count-wrapper">
-                <CountBadge count={childCount} />
+                <CountBadge count={bookmarks.length} />
               </div>
             )}
           </>

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

@@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'next-i18next';
 import {
   DropdownItem,
-  DropdownMenu, DropdownToggle, UncontrolledDropdown,
+  DropdownMenu, DropdownToggle, UncontrolledDropdown, UncontrolledTooltip,
 } from 'reactstrap';
 
 import { apiv3Delete, apiv3Post } from '~/client/util/apiv3-client';
@@ -178,6 +178,7 @@ const BookmarkFolderMenuItem = (props: Props): JSX.Element => {
         </div>
 
         <DropdownToggle
+          id={`bookmark-delete-button-${item._id}`}
           className="text-danger ml-auto"
           color="transparent"
           onClick={e => onClickDeleteHandler(e, item)}
@@ -198,6 +199,15 @@ const BookmarkFolderMenuItem = (props: Props): JSX.Element => {
         {renderBookmarkSubMenuItem()}
 
       </UncontrolledDropdown >
+      <UncontrolledTooltip
+        modifiers={{ preventOverflow: { boundariesElement: 'window' } }}
+        autohide={false}
+        placement="top"
+        target={`bookmark-delete-button-${item._id}`}
+        fade={false}
+      >
+        {t('bookmark_folder.delete')}
+      </UncontrolledTooltip>
     </>
   );
 };

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

@@ -13,6 +13,7 @@ import { toastError, toastSuccess } from '~/client/util/toastr';
 import { BookmarkFolderItems } from '~/interfaces/bookmark-info';
 import { IPageHasId, IPageInfoAll, IPageToDeleteWithMeta } from '~/interfaces/page';
 import { useSWRxBookamrkFolderAndChild } from '~/stores/bookmark-folder';
+import { useSWRxPageInfo } from '~/stores/page';
 
 import ClosableTextInput, { AlertInfo, AlertType } from '../Common/ClosableTextInput';
 import { MenuItemType, PageItemControl } from '../Common/Dropdown/PageItemControl';
@@ -38,13 +39,15 @@ const BookmarkItem = (props: Props): JSX.Element => {
   const [parentId, setParentId] = useState(parentFolder._id);
   const { mutate: mutateParentBookmarkData } = useSWRxBookamrkFolderAndChild();
   const { mutate: mutateChildFolderData } = useSWRxBookamrkFolderAndChild(parentId);
-
+  const { data: fetchedPageInfo, mutate: mutatePageInfo } = useSWRxPageInfo(bookmarkedPage._id);
 
   useEffect(() => {
+    mutatePageInfo();
     if (parentId != null) {
       mutateChildFolderData();
     }
-  }, [parentId, mutateChildFolderData]);
+    mutateParentBookmarkData();
+  }, [parentId, mutateChildFolderData, mutatePageInfo, mutateParentBookmarkData]);
 
   const bookmarkMenuItemClickHandler = useCallback(async() => {
     await unbookmark(bookmarkedPage._id);
@@ -111,13 +114,7 @@ const BookmarkItem = (props: Props): JSX.Element => {
     type: 'BOOKMARK',
     item: bookmarkedPage,
     end: () => {
-      if (parentFolder.parent == null) {
-        mutateParentBookmarkData();
-      }
-      if (parentId != null) {
-        setParentId(parentFolder.parent);
-        mutateChildFolderData();
-      }
+      setParentId(parentFolder.parent);
     },
     collect: monitor => ({
       isDragging: monitor.isDragging(),
@@ -148,6 +145,7 @@ const BookmarkItem = (props: Props): JSX.Element => {
       <PageItemControl
         pageId={bookmarkedPage._id}
         isEnableActions
+        pageInfo={fetchedPageInfo}
         forceHideMenuItems={[MenuItemType.DUPLICATE]}
         onClickBookmarkMenuItem={bookmarkMenuItemClickHandler}
         onClickRenameMenuItem={renameMenuItemClickHandler}