Fix put back page from bookmark item

https://youtrack.weseek.co.jp/issue/GW-7957
- Implement onClickRevertMenuItem to PageItemControl of BookmarkItem
- Add revertMenuItemClickHandler method
- Add onPagePutBacked function props to BookmarkItem
- Implement onPagePutBacked and create pagePutBackedHandler in BookmarkFolderItem

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

@@ -7,20 +7,21 @@ import { DropdownToggle } from 'reactstrap';
 import {
   addBookmarkToFolder, addNewFolder, hasChildren, updateBookmarkFolder,
 } from '~/client/util/bookmark-utils';
-import { toastError } from '~/client/util/toastr';
+import { toastError, toastSuccess } from '~/client/util/toastr';
 import { FolderIcon } from '~/components/Icons/FolderIcon';
 import { TriangleIcon } from '~/components/Icons/TriangleIcon';
 import {
   BookmarkFolderItems, DragItemDataType, DragItemType, DRAG_ITEM_TYPE,
 } from '~/interfaces/bookmark-info';
 import { IPageToDeleteWithMeta } from '~/interfaces/page';
-import { onDeletedBookmarkFolderFunction } from '~/interfaces/ui';
+import { OnPutBackedFunction, onDeletedBookmarkFolderFunction } from '~/interfaces/ui';
 import { useBookmarkFolderDeleteModal } from '~/stores/modal';
 
 import { BookmarkFolderItemControl } from './BookmarkFolderItemControl';
 import { BookmarkFolderNameInput } from './BookmarkFolderNameInput';
 import { BookmarkItem } from './BookmarkItem';
 import { DragAndDropWrapper } from './DragAndDropWrapper';
+import { useTranslation } from 'react-i18next';
 
 type BookmarkFolderItemProps = {
   isReadOnlyUser: boolean
@@ -38,9 +39,10 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
   const acceptedTypes: DragItemType[] = [DRAG_ITEM_TYPE.FOLDER, DRAG_ITEM_TYPE.BOOKMARK];
   const {
     isReadOnlyUser, bookmarkFolder, isOpen: _isOpen = false, level, root, isUserHomePage,
-    onClickDeleteBookmarkHandler, bookmarkFolderTreeMutation,
+    onClickDeleteBookmarkHandler, bookmarkFolderTreeMutation
   } = props;
 
+  const {t} = useTranslation();
   const {
     name, _id: folderId, children, parent, bookmarks,
   } = bookmarkFolder;
@@ -141,6 +143,11 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
     return true;
   };
 
+  const pagePutBackedHandler: OnPutBackedFunction = useCallback((path) => {
+    toastSuccess(t('page_has_been_reverted', { path }));
+    bookmarkFolderTreeMutation();
+  }, [t]);
+
   const renderChildFolder = () => {
     return isOpen && children?.map((childFolder) => {
       return (
@@ -172,6 +179,7 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
           canMoveToRoot={true}
           onClickDeleteBookmarkHandler={onClickDeleteBookmarkHandler}
           bookmarkFolderTreeMutation={bookmarkFolderTreeMutation}
+          onPagePutBacked={pagePutBackedHandler}
         />
       );
     });

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

@@ -6,7 +6,7 @@ import { DevidedPagePath, pathUtils } from '@growi/core';
 import { useTranslation } from 'react-i18next';
 import { UncontrolledTooltip, DropdownToggle } from 'reactstrap';
 
-import { unbookmark } from '~/client/services/page-operation';
+import { unbookmark, unlink } from '~/client/services/page-operation';
 import { addBookmarkToFolder, renamePage } from '~/client/util/bookmark-utils';
 import { ValidationTarget } from '~/client/util/input-validator';
 import { toastError } from '~/client/util/toastr';
@@ -20,6 +20,8 @@ import { PageListItemS } from '../PageList/PageListItemS';
 
 import { BookmarkMoveToRootBtn } from './BookmarkMoveToRootBtn';
 import { DragAndDropWrapper } from './DragAndDropWrapper';
+import { OnPutBackedFunction } from '~/interfaces/ui';
+import { usePutBackPageModal } from '~/stores/modal';
 
 type Props = {
   isReadOnlyUser: boolean
@@ -28,7 +30,8 @@ type Props = {
   parentFolder: BookmarkFolderItems | null,
   canMoveToRoot: boolean,
   onClickDeleteBookmarkHandler: (pageToDelete: IPageToDeleteWithMeta) => void,
-  bookmarkFolderTreeMutation: () => void
+  bookmarkFolderTreeMutation: () => void,
+  onPagePutBacked?: OnPutBackedFunction
 }
 
 export const BookmarkItem = (props: Props): JSX.Element => {
@@ -39,9 +42,9 @@ export const BookmarkItem = (props: Props): JSX.Element => {
 
   const {
     isReadOnlyUser, bookmarkedPage, onClickDeleteBookmarkHandler,
-    parentFolder, level, canMoveToRoot, bookmarkFolderTreeMutation,
+    parentFolder, level, canMoveToRoot, bookmarkFolderTreeMutation, onPagePutBacked
   } = props;
-
+  const { open: openPutBackPageModal } = usePutBackPageModal();
   const [isRenameInputShown, setRenameInputShown] = useState(false);
 
   const { data: fetchedPageInfo } = useSWRxPageInfo(bookmarkedPage._id);
@@ -109,6 +112,24 @@ export const BookmarkItem = (props: Props): JSX.Element => {
     onClickDeleteBookmarkHandler(pageToDelete);
   }, [bookmarkedPage._id, bookmarkedPage.path, bookmarkedPage.revision, onClickDeleteBookmarkHandler]);
 
+  const revertMenuItemClickHandler = useCallback(async() => {
+    const { _id: pageId, path } = bookmarkedPage;
+
+    const putBackedHandler = async(path) => {
+      try {
+        await unlink(bookmarkedPage.path);
+      }
+      catch (err) {
+        toastError(err);
+      }
+
+      if (onPagePutBacked != null) {
+        onPagePutBacked(path);
+      }
+    };
+    openPutBackPageModal({ pageId, path }, { onPutBacked: putBackedHandler });
+  }, [onPagePutBacked, openPutBackPageModal, bookmarkedPage]);
+
   return (
     <DragAndDropWrapper
       item={dragItem}
@@ -140,6 +161,7 @@ export const BookmarkItem = (props: Props): JSX.Element => {
             onClickBookmarkMenuItem={bookmarkMenuItemClickHandler}
             onClickRenameMenuItem={renameMenuItemClickHandler}
             onClickDeleteMenuItem={deleteMenuItemClickHandler}
+            onClickRevertMenuItem={revertMenuItemClickHandler}
             additionalMenuItemOnTopRenderer={canMoveToRoot
               ? () => <BookmarkMoveToRootBtn pageId={bookmarkedPage._id} onClickMoveToRootHandler={onClickMoveToRootHandler}/>
               : undefined}