Create bookmark folder dropdown menu

https://youtrack.weseek.co.jp/issue/GW-7910
- Create component for BookmarkFolderDropdown menu
- Replace bookmark button with BookmarkFolderDropdown  component
- Remove handle click method for bookmark / un-bookmark
- Remove bookmarkClickHandler method from SubNavButtons component
- Remove onBookMarkClicked props from BookmarkButton component

packages/app/src/components/BookmarkButtons.tsx

@@ -1,12 +1,17 @@
-import React, { FC, useState, useCallback } from 'react';
+import React, {
+  FC, useState, useCallback,
+} from 'react';
 
 import { useTranslation } from 'next-i18next';
-import { UncontrolledTooltip, Popover, PopoverBody } from 'reactstrap';
+import {
+  UncontrolledTooltip, Popover, PopoverBody, DropdownToggle,
+} from 'reactstrap';
 
 import { useIsGuestUser } from '~/stores/context';
 
 import { IUser } from '../interfaces/user';
 
+import BookmarkFolderDropdown from './Bookmarks/BookmarkFolderDropdown';
 import UserPictureList from './User/UserPictureList';
 
 import styles from './BookmarkButtons.module.scss';
@@ -16,7 +21,6 @@ interface Props {
   isBookmarked?: boolean
   bookmarkedUsers?: IUser[]
   hideTotalNumber?: boolean
-  onBookMarkClicked: ()=>void;
 }
 
 const BookmarkButtons: FC<Props> = (props: Props) => {
@@ -34,12 +38,6 @@ const BookmarkButtons: FC<Props> = (props: Props) => {
     setIsPopoverOpen(!isPopoverOpen);
   };
 
-  const handleClick = async() => {
-    if (props.onBookMarkClicked != null) {
-      props.onBookMarkClicked();
-    }
-  };
-
   const getTooltipMessage = useCallback(() => {
     if (isGuestUser) {
       return 'Not available for guest';
@@ -53,17 +51,14 @@ const BookmarkButtons: FC<Props> = (props: Props) => {
 
   return (
     <div className={`btn-group btn-group-bookmark ${styles['btn-group-bookmark']}`} role="group" aria-label="Bookmark buttons">
-      <button
-        type="button"
-        id="bookmark-button"
-        onClick={handleClick}
-        className={`shadow-none btn btn-bookmark border-0
-          ${isBookmarked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
-      >
-        <i className={`fa ${isBookmarked ? 'fa-bookmark' : 'fa-bookmark-o'}`}></i>
-      </button>
-
-      <UncontrolledTooltip placement="top" target="bookmark-button" fade={false}>
+      <BookmarkFolderDropdown >
+        <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>
+        </DropdownToggle>
+      </BookmarkFolderDropdown>
+
+      <UncontrolledTooltip placement="top" target="bookmark-dropdown-btn" fade={false}>
         {t(getTooltipMessage())}
       </UncontrolledTooltip>
 

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

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+
+import { useTranslation } from 'next-i18next';
+import {
+  Dropdown, DropdownItem, DropdownMenu,
+} from 'reactstrap';
+
+import { useSWRxBookamrkFolderAndChild } from '~/stores/bookmark-folder';
+
+import FolderIcon from '../Icons/FolderIcon';
+
+
+type Props = {
+  children?: React.ReactNode
+}
+const BookmarkFolderDropdown = (props: Props): JSX.Element => {
+  const { t } = useTranslation();
+  const { children } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const { data: bookmarkFolderData } = useSWRxBookamrkFolderAndChild();
+
+  return (
+    <Dropdown isOpen={isOpen} toggle={() => setIsOpen(!isOpen)}>
+      { children }
+      <DropdownMenu
+        positionFixed
+        modifiers={{ preventOverflow: { boundariesElement: undefined } }}
+        right={true}
+        className="rounded-0"
+      >
+        <DropdownItem
+          onClick={() => {}}
+        >
+          <FolderIcon isOpen={false} />
+          <span className='ml-2'>{t('bookmark_folder.new_folder')}</span>
+
+        </DropdownItem>
+
+        <DropdownItem divider/>
+        {
+          bookmarkFolderData?.map((folder) => {
+            return (
+              <>
+                <DropdownItem
+                  toggle={false}
+                  key={folder._id}
+                >
+                  { folder.name }
+                </DropdownItem>
+              </>
+            );
+          })
+        }
+
+      </DropdownMenu>
+    </Dropdown>
+  );
+};
+
+export default BookmarkFolderDropdown;

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

@@ -129,19 +129,6 @@ const SubNavButtonsSubstance = (props: SubNavButtonsSubstanceProps): JSX.Element
     mutatePageInfo();
   }, [isGuestUser, mutatePageInfo, pageId, pageInfo]);
 
-  const bookmarkClickHandler = useCallback(async() => {
-    if (isGuestUser == null || isGuestUser) {
-      return;
-    }
-    if (!isIPageInfoForOperation(pageInfo)) {
-      return;
-    }
-
-    await toggleBookmark(pageId, pageInfo.isBookmarked);
-    mutatePageInfo();
-    mutateBookmarkInfo();
-    mutateCurrentUserBookmark();
-  }, [isGuestUser, mutateBookmarkInfo, mutatePageInfo, mutateCurrentUserBookmark, pageId, pageInfo]);
 
   const duplicateMenuItemClickHandler = useCallback(async(_pageId: string): Promise<void> => {
     if (onClickDuplicateMenuItem == null || path == null) {
@@ -244,7 +231,6 @@ const SubNavButtonsSubstance = (props: SubNavButtonsSubstanceProps): JSX.Element
           bookmarkCount={bookmarkCount}
           isBookmarked={isBookmarked}
           bookmarkedUsers={bookmarkInfo?.bookmarkedUsers}
-          onBookMarkClicked={bookmarkClickHandler}
         />
       )}
       {revisionId != null && !isCompactMode && (