Implement useDrag and useDrop for bookmark item

- Implement useDrag to Bookmark item
- Implement useDrop for bookmark item to BookmarkFolderItem
- Add bookmarkItemDropHandler method to update bookmark folder content

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

@@ -14,7 +14,7 @@ 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 { IPageToDeleteWithMeta } from '~/interfaces/page';
+import { IPageHasId, IPageToDeleteWithMeta } from '~/interfaces/page';
 import { OnDeletedFunction } from '~/interfaces/ui';
 import { useSWRBookmarkInfo } from '~/stores/bookmark';
 import { useSWRxBookamrkFolderAndChild } from '~/stores/bookmark-folder';
@@ -184,11 +184,11 @@ const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderIt
     }),
   });
 
+
   const folderItemDropHandler = async(item: BookmarkFolderItemProps) => {
     try {
       await apiv3Put('/bookmark-folder', { bookmarkFolderId: item.bookmarkFolder._id, name: item.bookmarkFolder.name, parent: bookmarkFolder._id });
       await mutateChildBookmarkData();
-      await mutateChildBookmarkData();
       toastSuccess(t('toaster.update_successed', { target: t('bookmark_folder.bookmark_folder') }));
     }
     catch (err) {
@@ -196,6 +196,18 @@ const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderIt
     }
   };
 
+  const bookmarkItemDropHandler = useCallback(async(item: IPageHasId) => {
+    try {
+      await apiv3Post('/bookmark-folder/add-boookmark-to-folder', { pageId: item._id, folderId: bookmarkFolder._id });
+      mutateParentBookmarkFolder();
+      toastSuccess('Bookmark added to bookmark folder successfully');
+    }
+    catch (err) {
+      toastError(err);
+    }
+
+  }, [bookmarkFolder._id, mutateParentBookmarkFolder]);
+
 
   const isDroppable = (item: BookmarkFolderItemProps, targetRoot: string, targetLevel: number): boolean => {
     if (item.bookmarkFolder.parent === bookmarkFolder._id || item.bookmarkFolder._id === bookmarkFolder._id) {
@@ -221,6 +233,14 @@ const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderIt
     }),
   }));
 
+  const [, bookmarkItemDropRef] = useDrop(() => ({
+    accept: 'BOOKMARK',
+    drop: bookmarkItemDropHandler,
+    collect: monitor => ({
+      isOver: monitor.isOver(),
+    }),
+  }));
+
   const renderChildFolder = () => {
     return isOpen && currentChildren?.map((childFolder) => {
       return (
@@ -265,7 +285,7 @@ const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderIt
 
   return (
     <div id={`grw-bookmark-folder-item-${folderId}`} className="grw-foldertree-item-container">
-      <li ref={(c) => { bookmarkFolderDragRef(c); bookmarkFolderDropRef(c) }}
+      <li ref={(c) => { bookmarkFolderDragRef(c); bookmarkFolderDropRef(c); bookmarkItemDropRef(c) }}
         className="list-group-item list-group-item-action border-0 py-0 pr-3 d-flex align-items-center"
         onClick={loadChildFolder}
       >

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

@@ -3,6 +3,7 @@ import React, { useCallback, useState } from 'react';
 import nodePath from 'path';
 
 import { DevidedPagePath, pathUtils } from '@growi/core';
+import { useDrag } from 'react-dnd';
 import { useTranslation } from 'react-i18next';
 import { UncontrolledTooltip, DropdownToggle } from 'reactstrap';
 
@@ -94,8 +95,18 @@ const BookmarkItem = (props: Props): JSX.Element => {
     onClickDeleteMenuItem(pageToDelete);
   }, [bookmarkedPage, onClickDeleteMenuItem]);
 
+  const [, bookmarkItemDragRef] = useDrag({
+    type: 'BOOKMARK',
+    item:  bookmarkedPage,
+    collect: monitor => ({
+      isDragging: monitor.isDragging(),
+      canDrag: monitor.canDrag(),
+    }),
+  });
+
+
   return (
-    <div className="grw-foldertree-item-container" key={bookmarkedPage._id}>
+    <div className="grw-foldertree-item-container" key={bookmarkedPage._id} ref={(c) => { bookmarkItemDragRef(c) }}>
       <li className="bookmark-item-list list-group-item list-group-item-action border-0 py-0 pl-5 d-flex align-items-center" id={bookmarkItemId}>
         { isRenameInputShown ? (
           <ClosableTextInput