Update render bookmark button and bookmark folder item

https://youtrack.weseek.co.jp/issue/GW-7910
- Add isBookmarkFolderExists method to check if bookmark folder is not empty
- Update render condition of bookmark dropdown menu if bookmark folder is empty
- Implement useSWRBookmarkInfo to BookmarkFolderMenu and BookmarkFolderMenuItem
- Implement useSWRBookmarkInfo to BookmarkButtons component
- Get isBookmarked and bookmarkCount value from bookmarkInfo instead of props
- Remove props of bookmarkCount and isBookmarked from BookmarkButtons
- Update props of BookmarkButtons in SubNavButtons component

packages/app/src/components/BookmarkButtons.tsx

@@ -7,7 +7,9 @@ import {
   UncontrolledTooltip, Popover, PopoverBody, DropdownToggle,
 } from 'reactstrap';
 
+import { useSWRBookmarkInfo } from '~/stores/bookmark';
 import { useIsGuestUser } from '~/stores/context';
+import { useSWRxCurrentPage } from '~/stores/page';
 
 import { IUser } from '../interfaces/user';
 
@@ -17,17 +19,16 @@ import UserPictureList from './User/UserPictureList';
 import styles from './BookmarkButtons.module.scss';
 
 interface Props {
-  bookmarkCount?: number
-  isBookmarked?: boolean
   bookmarkedUsers?: IUser[]
   hideTotalNumber?: boolean
 }
 
 const BookmarkButtons: FC<Props> = (props: Props) => {
   const { t } = useTranslation();
-
+  const { data } = useSWRxCurrentPage();
+  const { data: bookmarkInfo } = useSWRBookmarkInfo(data?._id);
   const {
-    bookmarkCount, isBookmarked, bookmarkedUsers, hideTotalNumber,
+    bookmarkedUsers, hideTotalNumber,
   } = props;
 
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
@@ -43,19 +44,19 @@ const BookmarkButtons: FC<Props> = (props: Props) => {
       return 'Not available for guest';
     }
 
-    if (isBookmarked) {
+    if (bookmarkInfo?.isBookmarked) {
       return 'tooltip.cancel_bookmark';
     }
     return 'tooltip.bookmark';
-  }, [isGuestUser, isBookmarked]);
+  }, [isGuestUser, bookmarkInfo]);
 
 
   return (
     <div className={`btn-group btn-group-bookmark ${styles['btn-group-bookmark']}`} role="group" aria-label="Bookmark buttons">
       <BookmarkFolderMenu >
         <DropdownToggle id='bookmark-dropdown-btn' color="transparent" className={`shadow-none btn btn-bookmark border-0
-          ${isBookmarked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}>
-          <i className={`fa ${isBookmarked ? 'fa-bookmark' : 'fa-bookmark-o'}`}></i>
+          ${bookmarkInfo?.isBookmarked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}>
+          <i className={`fa ${bookmarkInfo?.isBookmarked ? 'fa-bookmark' : 'fa-bookmark-o'}`}></i>
         </DropdownToggle>
       </BookmarkFolderMenu>
 
@@ -69,9 +70,9 @@ const BookmarkButtons: FC<Props> = (props: Props) => {
             type="button"
             id="po-total-bookmarks"
             className={`shadow-none btn btn-bookmark border-0
-              total-bookmarks ${props.isBookmarked ? 'active' : ''}`}
+              total-bookmarks ${bookmarkInfo?.isBookmarked ? 'active' : ''}`}
           >
-            {bookmarkCount ?? 0}
+            {bookmarkInfo?.sumOfBookmarks ?? 0}
           </button>
           { bookmarkedUsers != null && (
             <Popover placement="bottom" isOpen={isPopoverOpen} target="po-total-bookmarks" toggle={togglePopover} trigger="legacy">

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

@@ -9,6 +9,7 @@ import {
 
 import { toastError, toastSuccess } from '~/client/util/apiNotification';
 import { apiv3Get, apiv3Post } from '~/client/util/apiv3-client';
+import { useSWRBookmarkInfo } from '~/stores/bookmark';
 import { useSWRxBookamrkFolderAndChild } from '~/stores/bookmark-folder';
 import { useSWRxCurrentPage } from '~/stores/page';
 
@@ -30,6 +31,7 @@ const BookmarkFolderMenu = (props: Props): JSX.Element => {
   const { data: bookmarkFolders, mutate: mutateBookmarkFolderData } = useSWRxBookamrkFolderAndChild();
   const [selectedItem, setSelectedItem] = useState<string | null>(null);
   const { data: currentPage } = useSWRxCurrentPage();
+  const { mutate: mutateBookmarkInfo } = useSWRBookmarkInfo(currentPage?._id);
 
   const getSelectedFolder = useCallback(async() => {
     try {
@@ -52,6 +54,13 @@ const BookmarkFolderMenu = (props: Props): JSX.Element => {
     getSelectedFolder();
   }, [getSelectedFolder]);
 
+  const isBookmarkFolderExists = useCallback((): boolean => {
+    if (bookmarkFolders && bookmarkFolders.length > 0) {
+      return true;
+    }
+    return false;
+  }, [bookmarkFolders]);
+
   const onPressEnterHandlerForCreate = useCallback(async(folderName: string) => {
     try {
       await apiv3Post('/bookmark-folder', { name: folderName, parent: null });
@@ -69,12 +78,13 @@ const BookmarkFolderMenu = (props: Props): JSX.Element => {
     try {
       await apiv3Post('/bookmark-folder/add-boookmark-to-folder', { pageId: currentPage?._id, folderId: itemId });
       setSelectedItem(itemId);
+      mutateBookmarkInfo();
       toastSuccess('Bookmark added to bookmark folder successfully');
     }
     catch (err) {
       toastError(err);
     }
-  }, [currentPage]);
+  }, [currentPage, mutateBookmarkInfo]);
 
   const renderBookmarkMenuItem = useCallback(() => {
     return (
@@ -92,27 +102,40 @@ const BookmarkFolderMenu = (props: Props): JSX.Element => {
             <span className="mx-2 ">{t('bookmark_folder.new_folder')}</span>
           </DropdownItem>
         )}
-        <DropdownItem divider />
-        {bookmarkFolders?.map(folder => (
-          <div key={folder._id} >
-            {
-              <div className='dropdown-item grw-bookmark-folder-menu-item' tabIndex={0} role="menuitem" onClick={() => onMenuItemClickHandler(folder._id)}>
-                <BookmarkFolderMenuItem
-                  isSelected={selectedItem === folder._id}
-                  item={folder}
-                  onSelectedChild={() => setSelectedItem(null)}
-                />
+        { isBookmarkFolderExists() && (
+          <>
+            <DropdownItem divider />
+            {bookmarkFolders?.map(folder => (
+              <div key={folder._id} >
+                {
+                  <div className='dropdown-item grw-bookmark-folder-menu-item' tabIndex={0} role="menuitem" onClick={() => onMenuItemClickHandler(folder._id)}>
+                    <BookmarkFolderMenuItem
+                      isSelected={selectedItem === folder._id}
+                      item={folder}
+                      onSelectedChild={() => setSelectedItem(null)}
+                    />
+                  </div>
+                }
               </div>
-            }
-          </div>
-        ))}
+            ))}
+          </>
+        )}
       </>
     );
-  }, [bookmarkFolders, isCreateAction, onClickNewBookmarkFolder, onMenuItemClickHandler, onPressEnterHandlerForCreate, selectedItem, t]);
+  }, [bookmarkFolders,
+      isBookmarkFolderExists,
+      isCreateAction,
+      onClickNewBookmarkFolder,
+      onMenuItemClickHandler,
+      onPressEnterHandlerForCreate,
+      selectedItem,
+      t,
+  ]);
 
   return (
     <UncontrolledDropdown
-      direction='up'
+      onToggle={getSelectedFolder}
+      direction={ isBookmarkFolderExists() ? 'up' : 'down' }
       className={`grw-bookmark-folder-dropdown ${styles['grw-bookmark-folder-dropdown']}`}>
       {children}
       <DropdownMenu

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

@@ -9,6 +9,7 @@ import {
 import { toastError, toastSuccess } from '~/client/util/apiNotification';
 import { apiv3Get, apiv3Post } from '~/client/util/apiv3-client';
 import { BookmarkFolderItems } from '~/interfaces/bookmark-info';
+import { useSWRBookmarkInfo } from '~/stores/bookmark';
 import { useSWRxBookamrkFolderAndChild } from '~/stores/bookmark-folder';
 import { useSWRxCurrentPage } from '~/stores/page';
 
@@ -25,7 +26,7 @@ type Props ={
 }
 const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
   const {
-    item, isSelected, onSelectedChild,
+    item, isSelected,
   } = props;
   const { t } = useTranslation();
   const [isOpen, setIsOpen] = useState(false);
@@ -34,6 +35,7 @@ const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
   const [selectedItem, setSelectedItem] = useState<string | null>(null);
   const [isCreateAction, setIsCreateAction] = useState<boolean>(false);
   const { data: currentPage } = useSWRxCurrentPage();
+  const { mutate: mutateBookmarkInfo } = useSWRBookmarkInfo(currentPage?._id);
 
   const getSelectedFolder = useCallback(async() => {
     try {
@@ -89,6 +91,7 @@ const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
   const onClickChildMenuItemHandler = useCallback(async(e, item) => {
     e.stopPropagation();
     setSelectedItem(item._id);
+    mutateBookmarkInfo();
     try {
       await apiv3Post('/bookmark-folder/add-boookmark-to-folder', { pageId: currentPage?._id, folderId: item._id });
       toastSuccess('Bookmark added to bookmark folder successfully');
@@ -96,8 +99,7 @@ const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
     catch (err) {
       toastError(err);
     }
-    // onSelectedChild();
-  }, [currentPage]);
+  }, [currentPage, mutateBookmarkInfo]);
 
   const renderBookmarkSubMenuItem = useCallback(() => {
     return (

packages/app/src/components/Navbar/SubNavButtons.tsx

@@ -228,8 +228,6 @@ const SubNavButtonsSubstance = (props: SubNavButtonsSubstanceProps): JSX.Element
       {revisionId != null && (
         <BookmarkButtons
           hideTotalNumber={isCompactMode}
-          bookmarkCount={bookmarkCount}
-          isBookmarked={isBookmarked}
           bookmarkedUsers={bookmarkInfo?.bookmarkedUsers}
         />
       )}