Merge pull request #7364 from weseek/imprv/gw7915-display-bookmark-count-on-bookmark-folder

imprv: improve badge  count

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,28 +1,27 @@
 import {
-  FC, useCallback, useEffect, useState, useMemo,
+  FC, useCallback, useEffect, useState,
 } from 'react';
 
 import { useTranslation } from 'next-i18next';
 import { useDrag, useDrop } from 'react-dnd';
 import { DropdownToggle } from 'reactstrap';
 
-import { apiv3Delete, apiv3Post, apiv3Put } from '~/client/util/apiv3-client';
+import { apiv3Post, apiv3Put } from '~/client/util/apiv3-client';
 import { toastError, toastSuccess } from '~/client/util/toastr';
 import CountBadge from '~/components/Common/CountBadge';
 import FolderIcon from '~/components/Icons/FolderIcon';
 import TriangleIcon from '~/components/Icons/TriangleIcon';
 import { BookmarkFolderItems } from '~/interfaces/bookmark-info';
 import { IPageHasId, IPageToDeleteWithMeta } from '~/interfaces/page';
-import { OnDeletedFunction } from '~/interfaces/ui';
+import { onDeletedBookmarkFolderFunction, OnDeletedFunction } from '~/interfaces/ui';
 import { useSWRBookmarkInfo } from '~/stores/bookmark';
 import { useSWRxBookamrkFolderAndChild } from '~/stores/bookmark-folder';
-import { usePageDeleteModal } from '~/stores/modal';
+import { useBookmarkFolderDeleteModal, usePageDeleteModal } from '~/stores/modal';
 import { useSWRxCurrentPage } from '~/stores/page';
 
 import BookmarkFolderItemControl from './BookmarkFolderItemControl';
 import BookmarkFolderNameInput from './BookmarkFolderNameInput';
 import BookmarkItem from './BookmarkItem';
-import DeleteBookmarkFolderModal from './DeleteBookmarkFolderModal';
 
 
 type BookmarkFolderItemProps = {
@@ -47,17 +46,10 @@ const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderIt
   const { mutate: mutateParentBookmarkFolder } = useSWRxBookamrkFolderAndChild(parent);
   const [isRenameAction, setIsRenameAction] = useState<boolean>(false);
   const [isCreateAction, setIsCreateAction] = useState<boolean>(false);
-  const [isDeleteFolderModalShown, setIsDeleteFolderModalShown] = useState<boolean>(false);
   const { data: currentPage } = useSWRxCurrentPage();
   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]);
+  const { open: openDeleteBookmarkFolderModal } = useBookmarkFolderDeleteModal();
 
   useEffect(() => {
     if (childBookmarkFolderData != null) {
@@ -121,19 +113,6 @@ const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderIt
 
   }, [mutateChildBookmarkData, t, targetFolder]);
 
-  // Delete Fodler handler
-  const onClickDeleteButtonHandler = useCallback(async() => {
-    try {
-      await apiv3Delete(`/bookmark-folder/${folderId}`);
-      setIsDeleteFolderModalShown(false);
-      loadParent();
-      mutateBookmarkInfo();
-      toastSuccess(t('toaster.delete_succeeded', { target: t('bookmark_folder.bookmark_folder'), ns: 'commons' }));
-    }
-    catch (err) {
-      toastError(err);
-    }
-  }, [folderId, loadParent, mutateBookmarkInfo, t]);
 
   const onClickPlusButton = useCallback(async(e) => {
     e.stopPropagation();
@@ -269,12 +248,20 @@ const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderIt
   }, []);
 
   const onClickDeleteHandler = useCallback(() => {
-    setIsDeleteFolderModalShown(true);
-  }, []);
+    const bookmarkFolderDeleteHandler: onDeletedBookmarkFolderFunction = (folderId) => {
+      if (typeof folderId !== 'string') {
+        return;
+      }
+      loadParent();
+      mutateBookmarkInfo();
+      toastSuccess(t('toaster.delete_succeeded', { target: t('bookmark_folder.bookmark_folder'), ns: 'commons' }));
+    };
 
-  const onDeleteFolderModalClose = useCallback(() => {
-    setIsDeleteFolderModalShown(false);
-  }, []);
+    if (bookmarkFolder == null) {
+      return;
+    }
+    openDeleteBookmarkFolderModal(bookmarkFolder, { onDeleted: bookmarkFolderDeleteHandler });
+  }, [bookmarkFolder, loadParent, mutateBookmarkInfo, openDeleteBookmarkFolderModal, t]);
 
 
   return (
@@ -312,9 +299,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>
             )}
           </>
@@ -357,11 +344,6 @@ const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderIt
       {
         renderBookmarkItem()
       }
-      <DeleteBookmarkFolderModal
-        bookmarkFolder={bookmarkFolder}
-        isOpen={isDeleteFolderModalShown}
-        onClickDeleteButton={onClickDeleteButtonHandler}
-        onModalClose={onDeleteFolderModalClose} />
     </div>
   );
 };

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

@@ -3,14 +3,16 @@ 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';
+import { apiv3Post } from '~/client/util/apiv3-client';
 import { toastError, toastSuccess } from '~/client/util/toastr';
 import { BookmarkFolderItems } from '~/interfaces/bookmark-info';
+import { onDeletedBookmarkFolderFunction } from '~/interfaces/ui';
 import { useSWRBookmarkInfo } from '~/stores/bookmark';
 import { useSWRxBookamrkFolderAndChild } from '~/stores/bookmark-folder';
+import { useBookmarkFolderDeleteModal } from '~/stores/modal';
 import { useSWRxCurrentPage } from '~/stores/page';
 
 import FolderIcon from '../Icons/FolderIcon';
@@ -37,6 +39,7 @@ const BookmarkFolderMenuItem = (props: Props): JSX.Element => {
   const [isCreateAction, setIsCreateAction] = useState<boolean>(false);
   const { data: currentPage } = useSWRxCurrentPage();
   const { mutate: mutateBookmarkInfo } = useSWRBookmarkInfo(currentPage?._id);
+  const { open: openDeleteBookmarkFolderModal } = useBookmarkFolderDeleteModal();
 
   const onPressEnterHandlerForCreate = useCallback(async(folderName: string) => {
     try {
@@ -82,19 +85,22 @@ const BookmarkFolderMenuItem = (props: Props): JSX.Element => {
   }, []);
 
   // Delete folder handler
-  const onClickDeleteHandler = useCallback(async(e, item) => {
+  const onClickDeleteHandler = useCallback(async(e) => {
     e.stopPropagation();
-    try {
-      await apiv3Delete(`/bookmark-folder/${item._id}`);
-      mutateParentFolders();
+    const bookmarkFolderDeleteHandler: onDeletedBookmarkFolderFunction = (folderId) => {
+      if (typeof folderId !== 'string') {
+        return;
+      }
       mutateBookmarkInfo();
-      setIsOpen(false);
+      mutateParentFolders();
       toastSuccess(t('toaster.delete_succeeded', { target: t('bookmark_folder.bookmark_folder'), ns: 'commons' }));
+    };
+
+    if (item == null) {
+      return;
     }
-    catch (err) {
-      toastError(err);
-    }
-  }, [mutateBookmarkInfo, mutateParentFolders, t]);
+    openDeleteBookmarkFolderModal(item, { onDeleted: bookmarkFolderDeleteHandler });
+  }, [item, mutateBookmarkInfo, mutateParentFolders, openDeleteBookmarkFolderModal, t]);
 
   const onClickChildMenuItemHandler = useCallback(async(e, item) => {
     e.stopPropagation();
@@ -178,9 +184,10 @@ 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)}
+          onClick={e => onClickDeleteHandler(e)}
         >
           <i className="icon-fw icon-trash grw-page-control-dropdown-icon"></i>
         </DropdownToggle>
@@ -198,6 +205,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}

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

@@ -1,53 +0,0 @@
-
-import React from 'react';
-
-import { useTranslation } from 'next-i18next';
-import {
-  Modal, ModalBody, ModalFooter, ModalHeader,
-} from 'reactstrap';
-
-import FolderIcon from '~/components/Icons/FolderIcon';
-import { BookmarkFolderItems } from '~/interfaces/bookmark-info';
-
-type DeleteBookmarkFolderModalProps = {
-  isOpen: boolean
-  bookmarkFolder: BookmarkFolderItems
-  onClickDeleteButton: () => void
-  onModalClose: () => void
-}
-
-const DeleteBookmarkFolderModal = (props: DeleteBookmarkFolderModalProps): JSX.Element => {
-  const { t } = useTranslation();
-  const {
-    isOpen, onClickDeleteButton, bookmarkFolder, onModalClose,
-  } = props;
-
-  return (
-    <Modal size="md" isOpen={isOpen} toggle={onModalClose} data-testid="page-delete-modal" className="grw-create-page">
-      <ModalHeader tag="h4" toggle={onModalClose} className="bg-danger text-light">
-        <i className="icon-fw icon-trash"></i>
-        {t('bookmark_folder.delete_modal.modal_header_label')}
-      </ModalHeader>
-      <ModalBody>
-        <div className="form-group pb-1">
-          <label>{ t('bookmark_folder.delete_modal.modal_body_description') }:</label><br />
-          <FolderIcon isOpen={false}/> {bookmarkFolder.name}
-        </div>
-        {t('bookmark_folder.delete_modal.modal_body_alert')}
-      </ModalBody>
-      <ModalFooter>
-        <button
-          type="button"
-          className="btn btn-danger"
-          onClick={onClickDeleteButton}
-        >
-          <i className="mr-1 icon-trash" aria-hidden="true"></i>
-          {t('bookmark_folder.delete_modal.modal_footer_button')}
-        </button>
-      </ModalFooter>
-    </Modal>
-
-  );
-};
-
-export default DeleteBookmarkFolderModal;

packages/app/src/components/DeleteBookmarkFolderModal.tsx

@@ -0,0 +1,70 @@
+
+import React, { FC } from 'react';
+
+import { useTranslation } from 'next-i18next';
+import {
+  Modal, ModalBody, ModalFooter, ModalHeader,
+} from 'reactstrap';
+
+import { apiv3Delete } from '~/client/util/apiv3-client';
+import { toastError } from '~/client/util/toastr';
+import FolderIcon from '~/components/Icons/FolderIcon';
+import { useBookmarkFolderDeleteModal } from '~/stores/modal';
+
+
+const DeleteBookmarkFolderModal: FC = () => {
+  const { t } = useTranslation();
+  const { data: deleteBookmarkFolderModalData, close: closeBookmarkFolderDeleteModal } = useBookmarkFolderDeleteModal();
+  const isOpened = deleteBookmarkFolderModalData?.isOpened ?? false;
+
+  async function deleteBookmark() {
+    if (deleteBookmarkFolderModalData == null || deleteBookmarkFolderModalData.bookmarkFolder == null) {
+      return;
+    }
+    if (deleteBookmarkFolderModalData.bookmarkFolder != null) {
+      try {
+        await apiv3Delete(`/bookmark-folder/${deleteBookmarkFolderModalData.bookmarkFolder._id}`);
+        const onDeleted = deleteBookmarkFolderModalData.opts?.onDeleted;
+        if (onDeleted != null) {
+          onDeleted(deleteBookmarkFolderModalData.bookmarkFolder._id);
+        }
+        closeBookmarkFolderDeleteModal();
+      }
+      catch (err) {
+        toastError(err);
+      }
+    }
+  }
+  async function onClickDeleteButton() {
+    await deleteBookmark();
+  }
+
+  return (
+    <Modal size="md" isOpen={isOpened} toggle={closeBookmarkFolderDeleteModal} data-testid="page-delete-modal" className="grw-create-page">
+      <ModalHeader tag="h4" toggle={closeBookmarkFolderDeleteModal} className="bg-danger text-light">
+        <i className="icon-fw icon-trash"></i>
+        {t('bookmark_folder.delete_modal.modal_header_label')}
+      </ModalHeader>
+      <ModalBody>
+        <div className="form-group pb-1">
+          <label>{ t('bookmark_folder.delete_modal.modal_body_description') }:</label><br />
+          <FolderIcon isOpen={false}/> {deleteBookmarkFolderModalData?.bookmarkFolder?.name}
+        </div>
+        {t('bookmark_folder.delete_modal.modal_body_alert')}
+      </ModalBody>
+      <ModalFooter>
+        <button
+          type="button"
+          className="btn btn-danger"
+          onClick={onClickDeleteButton}
+        >
+          <i className="mr-1 icon-trash" aria-hidden="true"></i>
+          {t('bookmark_folder.delete_modal.modal_footer_button')}
+        </button>
+      </ModalFooter>
+    </Modal>
+
+  );
+};
+
+export default DeleteBookmarkFolderModal;

packages/app/src/components/Layout/BasicLayout.tsx

@@ -22,6 +22,7 @@ const PageDeleteModal = dynamic(() => import('../PageDeleteModal'), { ssr: false
 const PageRenameModal = dynamic(() => import('../PageRenameModal'), { ssr: false });
 const PagePresentationModal = dynamic(() => import('../PagePresentationModal'), { ssr: false });
 const PageAccessoriesModal = dynamic(() => import('../PageAccessoriesModal'), { ssr: false });
+const DeleteBookmarkFolderModal = dynamic(() => import('../DeleteBookmarkFolderModal'), { ssr: false });
 // Fab
 const Fab = dynamic(() => import('../Fab').then(mod => mod.Fab), { ssr: false });
 
@@ -55,6 +56,7 @@ export const BasicLayout = ({ children, className }: Props): JSX.Element => {
         <PageDeleteModal />
         <PageRenameModal />
         <PageAccessoriesModal />
+        <DeleteBookmarkFolderModal />
       </DndProvider>
 
       <PagePresentationModal />

packages/app/src/interfaces/ui.ts

@@ -26,3 +26,4 @@ export type OnDeletedFunction = (idOrPaths: string | string[], isRecursively: Nu
 export type OnRenamedFunction = (path: string) => void;
 export type OnDuplicatedFunction = (fromPath: string, toPath: string) => void;
 export type OnPutBackedFunction = (path: string) => void;
+export type onDeletedBookmarkFolderFunction = (bookmarkFolderId: string) => void;

packages/app/src/stores/modal.tsx

@@ -3,9 +3,10 @@ import { useCallback, useMemo } from 'react';
 import { SWRResponse } from 'swr';
 
 import MarkdownTable from '~/client/models/MarkdownTable';
+import { BookmarkFolderItems } from '~/interfaces/bookmark-info';
 import { IPageToDeleteWithMeta, IPageToRenameWithMeta } from '~/interfaces/page';
 import {
-  OnDuplicatedFunction, OnRenamedFunction, OnDeletedFunction, OnPutBackedFunction,
+  OnDuplicatedFunction, OnRenamedFunction, OnDeletedFunction, OnPutBackedFunction, onDeletedBookmarkFolderFunction,
 } from '~/interfaces/ui';
 import { IUserGroupHasId } from '~/interfaces/user';
 
@@ -580,3 +581,43 @@ export const useConflictDiffModal = (): SWRResponse<ConflictDiffModalStatus, Err
     },
   });
 };
+
+/*
+* BookmarkFolderDeleteModal
+*/
+export type IDeleteBookmarkFolderModalOption = {
+  onDeleted?: onDeletedBookmarkFolderFunction,
+}
+
+type DeleteBookmarkFolderModalStatus = {
+  isOpened: boolean,
+  bookmarkFolder?: BookmarkFolderItems,
+  opts?: IDeleteBookmarkFolderModalOption,
+}
+
+type DeleteModalBookmarkFolderStatusUtils = {
+  open(
+    bookmarkFolder?: BookmarkFolderItems,
+    opts?: IDeleteBookmarkFolderModalOption,
+  ): Promise<DeleteBookmarkFolderModalStatus | undefined>,
+  close(): Promise<DeleteBookmarkFolderModalStatus | undefined>,
+}
+
+export const useBookmarkFolderDeleteModal = (status?: DeleteBookmarkFolderModalStatus):
+ SWRResponse<DeleteBookmarkFolderModalStatus, Error> & DeleteModalBookmarkFolderStatusUtils => {
+  const initialData: DeleteBookmarkFolderModalStatus = {
+    isOpened: false,
+  };
+  const swrResponse = useStaticSWR<DeleteBookmarkFolderModalStatus, Error>('deleteBookmarkFolderModalStatus', status, { fallbackData: initialData });
+
+  return {
+    ...swrResponse,
+    open: (
+        bookmarkFolder?: BookmarkFolderItems,
+        opts?: IDeleteBookmarkFolderModalOption,
+    ) => swrResponse.mutate({
+      isOpened: true, bookmarkFolder, opts,
+    }),
+    close: () => swrResponse.mutate({ isOpened: false }),
+  };
+};