Fix double request on adding bookmark

https://youtrack.weseek.co.jp/issue/GW-7910
- Remove addBookmarkToFolder from BookmarkFolderMenu
- Move addBookmarkToFolder  method to onMenuItemClickHandler
- Add onClick handler to radio button
- Implement add bookmark folder in BookmarkFolderMenuItem
- Fix double request on adding bookmark

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

@@ -49,22 +49,18 @@ const BookmarkFolderMenu = (props: Props): JSX.Element => {
 
   }, [mutateChildBookmarkData, t]);
 
-  const addBookmarkToFolder = useCallback(async(folderId: string) => {
+
+  const onMenuItemClickHandler = useCallback(async(itemId: string) => {
+    setSelectedItem(itemId);
     try {
-      await apiv3Post('/bookmark-folder/add-boookmark-to-folder', { pageId: currentPage?._id, folderId });
+      await apiv3Post('/bookmark-folder/add-boookmark-to-folder', { pageId: currentPage?._id, folderId: itemId });
       toastSuccess('Bookmark added to bookmark folder successfully');
     }
     catch (err) {
       toastError(err);
     }
-
   }, [currentPage]);
 
-  const onMenuItemClickHandler = useCallback((itemId: string) => {
-    setSelectedItem(itemId);
-    addBookmarkToFolder(itemId);
-  }, [addBookmarkToFolder]);
-
   return (
     <UncontrolledDropdown className={`grw-bookmark-folder-dropdown ${styles['grw-bookmark-folder-dropdown']}`}>
       {children}
@@ -100,7 +96,8 @@ const BookmarkFolderMenu = (props: Props): JSX.Element => {
                   checked={selectedItem === folder._id}
                   name="bookmark-folder-menu-item"
                   id={`bookmark-folder-menu-item-${folder._id}`}
-                  onChange={e => e.stopPropagation() }
+                  onChange={e => e.stopPropagation()}
+                  onClick={e => e.stopPropagation() }
                 />
                 <label htmlFor={`bookmark-folder-menu-item-${folder._id}`} className='p-2 m-0 grw-bookmark-folder-menu-item-title mr-auto'>
                   {folder.name}

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

@@ -4,8 +4,11 @@ import {
   DropdownMenu, DropdownToggle, UncontrolledDropdown,
 } from 'reactstrap';
 
+import { toastError, toastSuccess } from '~/client/util/apiNotification';
+import { apiv3Post } from '~/client/util/apiv3-client';
 import { BookmarkFolderItems } from '~/interfaces/bookmark-info';
 import { useSWRxBookamrkFolderAndChild } from '~/stores/bookmark-folder';
+import { useSWRxCurrentPage } from '~/stores/page';
 
 import TriangleIcon from '../Icons/TriangleIcon';
 
@@ -22,6 +25,7 @@ const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
   const [isOpen, setIsOpen] = useState(false);
   const { data: childFolders, mutate: mutateChildFolders } = useSWRxBookamrkFolderAndChild(item._id);
   const [selectedItem, setSelectedItem] = useState<string | null>(null);
+  const { data: currentPage } = useSWRxCurrentPage();
 
   useEffect(() => {
     if (isOpen) {
@@ -36,11 +40,18 @@ const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
     setIsOpen(!isOpen);
   }, [isOpen]);
 
-  const onClickChildMenuItemHandler = useCallback((e, item) => {
+  const onClickChildMenuItemHandler = useCallback(async(e, item) => {
     e.stopPropagation();
     setSelectedItem(item._id);
+    try {
+      await apiv3Post('/bookmark-folder/add-boookmark-to-folder', { pageId: currentPage?._id, folderId: item._id });
+      toastSuccess('Bookmark added to bookmark folder successfully');
+    }
+    catch (err) {
+      toastError(err);
+    }
     onSelectedChild();
-  }, [onSelectedChild]);
+  }, [currentPage, onSelectedChild]);
 
   return (
     <UncontrolledDropdown
@@ -84,7 +95,8 @@ const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
                     checked={selectedItem === child._id}
                     name="bookmark-folder-menu-item"
                     id={`bookmark-folder-menu-item-${child._id}`}
-                    onChange={e => e.stopPropagation() }
+                    onChange={e => e.stopPropagation()}
+                    onClick={e => e.stopPropagation() }
                   />
                   <label htmlFor={`bookmark-folder-menu-item-${child._id}`} className='p-2 m-0 grw-bookmark-folder-menu-item-title mr-auto'>
                     {child.name}

packages/app/src/server/models/bookmark-folder.ts

@@ -95,7 +95,6 @@ bookmarkFolderSchema.statics.findFolderAndChildren = async function(
         model: 'Page',
       },
     }).exec() as unknown as BookmarkFolderItems[];
-  console.log(bookmarkFolders);
   return bookmarkFolders;
 };
 

packages/app/src/server/routes/apiv3/bookmark-folder.ts

@@ -38,7 +38,6 @@ module.exports = (crowi) => {
 
     try {
       const bookmarkFolder = await BookmarkFolder.createByParameters(params);
-      console.log(bookmarkFolder);
       logger.debug('bookmark folder created', bookmarkFolder);
       return res.apiv3({ bookmarkFolder });
     }