refactor bookmark folder tree

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

@@ -2,23 +2,20 @@ import {
   FC, useCallback, useState,
 } from 'react';
 
-import type { IPageHasId } from '@growi/core';
-import { useTranslation } from 'next-i18next';
 import { DropdownToggle } from 'reactstrap';
-import type { KeyedMutator } from 'swr';
 
 import {
   addBookmarkToFolder, addNewFolder, hasChildren, updateBookmarkFolder,
 } from '~/client/util/bookmark-utils';
-import { toastError, toastSuccess } from '~/client/util/toastr';
+import { toastError } from '~/client/util/toastr';
 import { FolderIcon } from '~/components/Icons/FolderIcon';
 import { TriangleIcon } from '~/components/Icons/TriangleIcon';
 import {
-  BookmarkFolderItems, DragItemDataType, DragItemType, DRAG_ITEM_TYPE, IBookmarkInfo,
+  BookmarkFolderItems, DragItemDataType, DragItemType, DRAG_ITEM_TYPE,
 } from '~/interfaces/bookmark-info';
 import { IPageToDeleteWithMeta } from '~/interfaces/page';
-import { onDeletedBookmarkFolderFunction, OnDeletedFunction } from '~/interfaces/ui';
-import { useBookmarkFolderDeleteModal, usePageDeleteModal } from '~/stores/modal';
+import { onDeletedBookmarkFolderFunction } from '~/interfaces/ui';
+import { useBookmarkFolderDeleteModal } from '~/stores/modal';
 
 import { BookmarkFolderItemControl } from './BookmarkFolderItemControl';
 import { BookmarkFolderNameInput } from './BookmarkFolderNameInput';
@@ -31,23 +28,18 @@ type BookmarkFolderItemProps = {
   level: number
   root: string
   isUserHomePage?: boolean
-  bookmarkFolders: BookmarkFolderItems[]
-  mutateBookmarkFolders: KeyedMutator<BookmarkFolderItems[]>
-  userBookmarks: IPageHasId[]
-  mutateUserBookmarks: KeyedMutator<IPageHasId[]>
-  bookmarkInfo: IBookmarkInfo
-  mutateBookmarkInfo: KeyedMutator<IBookmarkInfo>
+  onClickDeleteBookmarkHandler: (pageToDelete: IPageToDeleteWithMeta) => void
+  bookmarkFolderTreeMutation: () => void
 }
 
 export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderItemProps) => {
   const BASE_FOLDER_PADDING = 15;
   const acceptedTypes: DragItemType[] = [DRAG_ITEM_TYPE.FOLDER, DRAG_ITEM_TYPE.BOOKMARK];
   const {
-    bookmarkFolder, isOpen: _isOpen = false, level, root, isUserHomePage, bookmarkFolders,
-    mutateBookmarkFolders, userBookmarks, mutateUserBookmarks, bookmarkInfo, mutateBookmarkInfo,
+    bookmarkFolder, isOpen: _isOpen = false, level, root, isUserHomePage,
+    onClickDeleteBookmarkHandler, bookmarkFolderTreeMutation,
   } = props;
 
-  const { t } = useTranslation();
   const {
     name, _id: folderId, children, parent, bookmarks,
   } = bookmarkFolder;
@@ -57,8 +49,6 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
   const [isRenameAction, setIsRenameAction] = useState<boolean>(false);
   const [isCreateAction, setIsCreateAction] = useState<boolean>(false);
 
-
-  const { open: openDeleteModal } = usePageDeleteModal();
   const { open: openDeleteBookmarkFolderModal } = useBookmarkFolderDeleteModal();
 
   const childrenExists = hasChildren(children);
@@ -70,17 +60,17 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
     setTargetFolder(folderId);
   }, [folderId, isOpen]);
 
-  // Rename  for bookmark folder handler
+  // Rename for bookmark folder handler
   const onPressEnterHandlerForRename = useCallback(async(folderName: string) => {
     try {
       await updateBookmarkFolder(folderId, folderName, parent);
-      mutateBookmarkFolders();
+      bookmarkFolderTreeMutation();
       setIsRenameAction(false);
     }
     catch (err) {
       toastError(err);
     }
-  }, [folderId, mutateBookmarkFolders, parent]);
+  }, [bookmarkFolderTreeMutation, folderId, parent]);
 
   // Create new folder / subfolder handler
   const onPressEnterHandlerForCreate = useCallback(async(folderName: string) => {
@@ -88,13 +78,12 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
       await addNewFolder(folderName, targetFolder);
       setIsOpen(true);
       setIsCreateAction(false);
-      mutateBookmarkFolders();
+      bookmarkFolderTreeMutation();
     }
     catch (err) {
       toastError(err);
     }
-  }, [mutateBookmarkFolders, targetFolder]);
-
+  }, [bookmarkFolderTreeMutation, targetFolder]);
 
   const onClickPlusButton = useCallback(async(e) => {
     e.stopPropagation();
@@ -104,37 +93,12 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
     setIsCreateAction(true);
   }, [childrenExists, isOpen]);
 
-  const onClickDeleteBookmarkHandler = useCallback((pageToDelete: IPageToDeleteWithMeta) => {
-    const pageDeletedHandler: OnDeletedFunction = (pathOrPathsToDelete, _isRecursively, isCompletely) => {
-      if (typeof pathOrPathsToDelete !== 'string') {
-        return;
-      }
-      const path = pathOrPathsToDelete;
-
-      if (isCompletely) {
-        toastSuccess(t('deleted_pages_completely', { path }));
-      }
-      else {
-        toastSuccess(t('deleted_pages', { path }));
-      }
-      mutateBookmarkFolders();
-      mutateBookmarkInfo();
-    };
-    openDeleteModal([pageToDelete], { onDeleted: pageDeletedHandler });
-  }, [mutateBookmarkInfo, mutateBookmarkFolders, openDeleteModal, t]);
-
-  const onUnbookmarkHandler = useCallback(() => {
-    mutateBookmarkFolders();
-    mutateBookmarkInfo();
-  }, [mutateBookmarkInfo, mutateBookmarkFolders]);
-
-
   const itemDropHandler = async(item: DragItemDataType, dragItemType: string | symbol | null) => {
     if (dragItemType === DRAG_ITEM_TYPE.FOLDER) {
       try {
         if (item.bookmarkFolder != null) {
           await updateBookmarkFolder(item.bookmarkFolder._id, item.bookmarkFolder.name, bookmarkFolder._id);
-          mutateBookmarkFolders();
+          bookmarkFolderTreeMutation();
         }
       }
       catch (err) {
@@ -145,8 +109,7 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
       try {
         if (item != null) {
           await addBookmarkToFolder(item._id, bookmarkFolder._id);
-          mutateBookmarkFolders();
-          await mutateUserBookmarks();
+          bookmarkFolderTreeMutation();
         }
       }
       catch (err) {
@@ -188,12 +151,8 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
             level={level + 1}
             root={root}
             isUserHomePage={isUserHomePage}
-            bookmarkFolders={bookmarkFolders}
-            mutateBookmarkFolders={mutateBookmarkFolders}
-            userBookmarks={userBookmarks}
-            mutateUserBookmarks={mutateUserBookmarks}
-            bookmarkInfo={bookmarkInfo}
-            mutateBookmarkInfo={mutateBookmarkInfo}
+            onClickDeleteBookmarkHandler={onClickDeleteBookmarkHandler}
+            bookmarkFolderTreeMutation={bookmarkFolderTreeMutation}
           />
         </div>
       );
@@ -204,17 +163,13 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
     return isOpen && bookmarks?.map((bookmark) => {
       return (
         <BookmarkItem
-          bookmarkedPage={bookmark.page}
           key={bookmark._id}
-          onUnbookmarked={onUnbookmarkHandler}
-          onRenamed={mutateBookmarkFolders}
-          onClickDeleteMenuItem={onClickDeleteBookmarkHandler}
-          parentFolder={bookmarkFolder}
+          bookmarkedPage={bookmark.page}
           level={level + 1}
-          bookmarkFolders={bookmarkFolders}
-          mutateBookmarkFolders={mutateBookmarkFolders}
-          userBookmarks={userBookmarks}
-          mutateUserBookmarks={mutateUserBookmarks}
+          parentFolder={bookmarkFolder}
+          isMoveToRoot={true}
+          onClickDeleteBookmarkHandler={onClickDeleteBookmarkHandler}
+          bookmarkFolderTreeMutation={bookmarkFolderTreeMutation}
         />
       );
     });
@@ -229,25 +184,24 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
       if (typeof folderId !== 'string') {
         return;
       }
-      mutateBookmarkInfo();
-      mutateBookmarkFolders();
+      bookmarkFolderTreeMutation();
     };
 
     if (bookmarkFolder == null) {
       return;
     }
     openDeleteBookmarkFolderModal(bookmarkFolder, { onDeleted: bookmarkFolderDeleteHandler });
-  }, [bookmarkFolder, mutateBookmarkFolders, mutateBookmarkInfo, openDeleteBookmarkFolderModal]);
+  }, [bookmarkFolder, bookmarkFolderTreeMutation, openDeleteBookmarkFolderModal]);
 
-  const onClickMoveToRootHandler = useCallback(async() => {
+  const onClickMoveToRootHandlerForBookmarkFolderItemControl = useCallback(async() => {
     try {
       await updateBookmarkFolder(bookmarkFolder._id, bookmarkFolder.name, null);
-      await mutateBookmarkFolders();
+      bookmarkFolderTreeMutation();
     }
     catch (err) {
       toastError(err);
     }
-  }, [bookmarkFolder._id, bookmarkFolder.name, mutateBookmarkFolders]);
+  }, [bookmarkFolder._id, bookmarkFolder.name, bookmarkFolderTreeMutation]);
 
   return (
     <div id={`grw-bookmark-folder-item-${folderId}`} className="grw-foldertree-item-container">
@@ -300,7 +254,7 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
             <BookmarkFolderItemControl
               onClickRename={onClickRenameHandler}
               onClickDelete={onClickDeleteHandler}
-              onClickMoveToRoot={onClickMoveToRootHandler}
+              onClickMoveToRoot={onClickMoveToRootHandlerForBookmarkFolderItemControl}
               isMoveToRoot={bookmarkFolder.parent != null}
             >
               <div onClick={e => e.stopPropagation()}>

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

@@ -3,9 +3,8 @@ import React, { useCallback } from 'react';
 
 import { useTranslation } from 'next-i18next';
 
-import { toastError, toastSuccess } from '~/client/util/toastr';
-import { BookmarkFolderItems, DragItemType, DRAG_ITEM_TYPE } from '~/interfaces/bookmark-info';
-import { IPageHasId, IPageToDeleteWithMeta } from '~/interfaces/page';
+import { toastSuccess } from '~/client/util/toastr';
+import { IPageToDeleteWithMeta } from '~/interfaces/page';
 import { OnDeletedFunction } from '~/interfaces/ui';
 import { useSWRxCurrentUserBookmarks, useSWRBookmarkInfo } from '~/stores/bookmark';
 import { useSWRxBookmarkFolderAndChild } from '~/stores/bookmark-folder';
@@ -28,15 +27,16 @@ export const BookmarkFolderTree: React.FC<{isUserHomePage?: boolean}> = ({ isUse
   const { t } = useTranslation();
 
   const { data: currentPage } = useSWRxCurrentPage();
-  const { data: bookmarkInfo, mutate: mutateBookmarkInfo } = useSWRBookmarkInfo(currentPage?._id);
+  const { mutate: mutateBookmarkInfo } = useSWRBookmarkInfo(currentPage?._id);
   const { data: bookmarkFolders, mutate: mutateBookmarkFolders } = useSWRxBookmarkFolderAndChild();
   const { data: userBookmarks, mutate: mutateUserBookmarks } = useSWRxCurrentUserBookmarks();
   const { open: openDeleteModal } = usePageDeleteModal();
 
-  const onUnbookmarkHandler = useCallback(() => {
+  const bookmarkFolderTreeMutation = useCallback(() => {
     mutateUserBookmarks();
     mutateBookmarkInfo();
-  }, [mutateBookmarkInfo, mutateUserBookmarks]);
+    mutateBookmarkFolders();
+  }, [mutateBookmarkFolders, mutateBookmarkInfo, mutateUserBookmarks]);
 
   const onClickDeleteBookmarkHandler = useCallback((pageToDelete: IPageToDeleteWithMeta) => {
     const pageDeletedHandler: OnDeletedFunction = (pathOrPathsToDelete, _isRecursively, isCompletely) => {
@@ -44,12 +44,10 @@ export const BookmarkFolderTree: React.FC<{isUserHomePage?: boolean}> = ({ isUse
 
       toastSuccess(isCompletely ? t('deleted_pages_completely', { pathOrPathsToDelete }) : t('deleted_pages', { pathOrPathsToDelete }));
 
-      mutateUserBookmarks();
-      mutateBookmarkInfo();
-      mutateBookmarkFolders();
+      bookmarkFolderTreeMutation();
     };
     openDeleteModal([pageToDelete], { onDeleted: pageDeletedHandler });
-  }, [openDeleteModal, mutateUserBookmarks, mutateBookmarkInfo, mutateBookmarkFolders, t]);
+  }, [openDeleteModal, t, bookmarkFolderTreeMutation]);
 
   /* TODO: update in bookmarks folder v2. */
   // const itemDropHandler = async(item: DragItemDataType, dragType: string | null | symbol) => {
@@ -85,10 +83,6 @@ export const BookmarkFolderTree: React.FC<{isUserHomePage?: boolean}> = ({ isUse
 
   // };
 
-  if (bookmarkFolders == null || userBookmarks == null || currentPage == null || bookmarkInfo == null) {
-    return <></>;
-  }
-
   return (
     <div className={`grw-folder-tree-container ${styles['grw-folder-tree-container']}` } >
       <ul className={`grw-foldertree ${styles['grw-foldertree']} list-group px-2 py-2`}>
@@ -101,29 +95,21 @@ export const BookmarkFolderTree: React.FC<{isUserHomePage?: boolean}> = ({ isUse
               level={0}
               root={bookmarkFolder._id}
               isUserHomePage={isUserHomePage}
-              bookmarkFolders={bookmarkFolders}
-              mutateBookmarkFolders={mutateBookmarkFolders}
-              userBookmarks={userBookmarks}
-              mutateUserBookmarks={mutateUserBookmarks}
-              bookmarkInfo={bookmarkInfo}
-              mutateBookmarkInfo={mutateBookmarkInfo}
+              onClickDeleteBookmarkHandler={onClickDeleteBookmarkHandler}
+              bookmarkFolderTreeMutation={bookmarkFolderTreeMutation}
             />
           );
         })}
         {userBookmarks?.map(userBookmark => (
           <div key={userBookmark._id} className="grw-foldertree-item-container grw-root-bookmarks">
             <BookmarkItem
-              bookmarkedPage={userBookmark}
               key={userBookmark._id}
-              onUnbookmarked={onUnbookmarkHandler}
-              onRenamed={mutateUserBookmarks}
-              onClickDeleteMenuItem={onClickDeleteBookmarkHandler}
-              parentFolder={null}
+              bookmarkedPage={userBookmark}
               level={0}
-              bookmarkFolders={bookmarkFolders}
-              mutateBookmarkFolders={mutateBookmarkFolders}
-              userBookmarks={userBookmarks}
-              mutateUserBookmarks={mutateUserBookmarks}
+              parentFolder={null}
+              isMoveToRoot={false}
+              onClickDeleteBookmarkHandler={onClickDeleteBookmarkHandler}
+              bookmarkFolderTreeMutation={bookmarkFolderTreeMutation}
             />
           </div>
         ))}

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

@@ -1,13 +1,10 @@
-import React, {
-  useCallback, useEffect, useState, useMemo,
-} from 'react';
+import React, { useCallback, useState } from 'react';
 
 import nodePath from 'path';
 
 import { DevidedPagePath, pathUtils } from '@growi/core';
 import { useTranslation } from 'react-i18next';
 import { UncontrolledTooltip, DropdownToggle } from 'reactstrap';
-import type { KeyedMutator } from 'swr';
 
 import { unbookmark } from '~/client/services/page-operation';
 import { addBookmarkToFolder, renamePage } from '~/client/util/bookmark-utils';
@@ -26,70 +23,55 @@ import { DragAndDropWrapper } from './DragAndDropWrapper';
 
 type Props = {
   bookmarkedPage: IPageHasId,
-  onUnbookmarked: () => void,
-  onRenamed: () => void,
-  onClickDeleteMenuItem: (pageToDelete: IPageToDeleteWithMeta) => void,
-  parentFolder: BookmarkFolderItems | null,
   level: number,
-  bookmarkFolders: BookmarkFolderItems[],
-  mutateBookmarkFolders: KeyedMutator<BookmarkFolderItems[]>,
-  userBookmarks: IPageHasId[],
-  mutateUserBookmarks: KeyedMutator<IPageHasId[]>,
+  parentFolder: BookmarkFolderItems | null,
+  isMoveToRoot: boolean,
+  onClickDeleteBookmarkHandler: (pageToDelete: IPageToDeleteWithMeta) => void,
+  bookmarkFolderTreeMutation: () => void
 }
 
 export const BookmarkItem = (props: Props): JSX.Element => {
   const BASE_FOLDER_PADDING = 15;
   const BASE_BOOKMARK_PADDING = 20;
+
   const { t } = useTranslation();
+
   const {
-    bookmarkedPage,
-    onUnbookmarked,
-    onRenamed,
-    onClickDeleteMenuItem, parentFolder, level,
-    mutateBookmarkFolders, userBookmarks, mutateUserBookmarks,
+    bookmarkedPage, onClickDeleteBookmarkHandler,
+    parentFolder, level, isMoveToRoot, bookmarkFolderTreeMutation,
   } = props;
+
   const [isRenameInputShown, setRenameInputShown] = useState(false);
+
+  const { data: fetchedPageInfo } = useSWRxPageInfo(bookmarkedPage._id);
+
   const dPagePath = new DevidedPagePath(bookmarkedPage.path, false, true);
   const { latter: pageTitle, former: formerPagePath } = dPagePath;
   const bookmarkItemId = `bookmark-item-${bookmarkedPage._id}`;
-  const { data: fetchedPageInfo } = useSWRxPageInfo(bookmarkedPage._id);
-
   const paddingLeft = BASE_BOOKMARK_PADDING + (BASE_FOLDER_PADDING * (level + 1));
-
   const dragItem: Partial<DragItemDataType> = {
     ...bookmarkedPage, parentFolder,
   };
 
-  useEffect(() => {
-    mutateBookmarkFolders();
-  }, [mutateBookmarkFolders]);
-
-  const pageId = bookmarkedPage._id;
-
-  const moveToRootClickedHandler = useCallback(async() => {
+  const onClickMoveToRootHandler = useCallback(async() => {
     try {
-      await addBookmarkToFolder(pageId, null);
-      await mutateUserBookmarks();
+      await addBookmarkToFolder(bookmarkedPage._id, null);
+      bookmarkFolderTreeMutation();
     }
     catch (err) {
       toastError(err);
     }
-  }, [mutateUserBookmarks, pageId]);
-
-  const isMoveToRoot = useMemo(() => {
-    return !userBookmarks?.map(userBookmark => userBookmark._id).includes(pageId);
-  }, [pageId, userBookmarks]);
+  }, [bookmarkFolderTreeMutation, bookmarkedPage._id]);
 
   const bookmarkMenuItemClickHandler = useCallback(async() => {
     await unbookmark(bookmarkedPage._id);
-    onUnbookmarked();
-  }, [onUnbookmarked, bookmarkedPage]);
+    bookmarkFolderTreeMutation();
+  }, [bookmarkedPage._id, bookmarkFolderTreeMutation]);
 
   const renameMenuItemClickHandler = useCallback(() => {
     setRenameInputShown(true);
   }, []);
 
-
   const pressEnterForRenameHandler = useCallback(async(inputText: string) => {
     const parentPath = pathUtils.addTrailingSlash(nodePath.dirname(bookmarkedPage.path ?? ''));
     const newPagePath = nodePath.resolve(parentPath, inputText);
@@ -101,13 +83,13 @@ export const BookmarkItem = (props: Props): JSX.Element => {
     try {
       setRenameInputShown(false);
       await renamePage(bookmarkedPage._id, bookmarkedPage.revision, newPagePath);
-      onRenamed();
+      bookmarkFolderTreeMutation();
     }
     catch (err) {
       setRenameInputShown(true);
       toastError(err);
     }
-  }, [bookmarkedPage, onRenamed]);
+  }, [bookmarkedPage, bookmarkFolderTreeMutation]);
 
   const deleteMenuItemClickHandler = useCallback(async(_pageId: string, pageInfo: IPageInfoAll | undefined): Promise<void> => {
     if (bookmarkedPage._id == null || bookmarkedPage.path == null) {
@@ -123,8 +105,8 @@ export const BookmarkItem = (props: Props): JSX.Element => {
       meta: pageInfo,
     };
 
-    onClickDeleteMenuItem(pageToDelete);
-  }, [bookmarkedPage, onClickDeleteMenuItem]);
+    onClickDeleteBookmarkHandler(pageToDelete);
+  }, [bookmarkedPage._id, bookmarkedPage.path, bookmarkedPage.revision, onClickDeleteBookmarkHandler]);
 
   return (
     <DragAndDropWrapper
@@ -156,7 +138,9 @@ export const BookmarkItem = (props: Props): JSX.Element => {
             onClickBookmarkMenuItem={bookmarkMenuItemClickHandler}
             onClickRenameMenuItem={renameMenuItemClickHandler}
             onClickDeleteMenuItem={deleteMenuItemClickHandler}
-            additionalMenuItemOnTopRenderer={isMoveToRoot ? (() => <BookmarkMoveToRootBtn moveToRootClickedHandler={moveToRootClickedHandler}/>) : undefined}
+            additionalMenuItemOnTopRenderer={isMoveToRoot
+              ? () => <BookmarkMoveToRootBtn pageId={bookmarkedPage._id} onClickMoveToRootHandler={onClickMoveToRootHandler}/>
+              : undefined}
           >
             <DropdownToggle color="transparent" className="border-0 rounded btn-page-item-control p-0 grw-visible-on-hover mr-1">
               <i className="icon-options fa fa-rotate-90 p-1"></i>

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

@@ -5,13 +5,13 @@ import { DropdownItem } from 'reactstrap';
 
 export const BookmarkMoveToRootBtn: React.FC<{
   pageId: string
-  moveToRootClickedHandler: (pageId: string) => Promise<void>
-}> = React.memo(({ pageId, moveToRootClickedHandler }) => {
+  onClickMoveToRootHandler: (pageId: string) => Promise<void>
+}> = React.memo(({ pageId, onClickMoveToRootHandler }) => {
   const { t } = useTranslation();
 
   return (
     <DropdownItem
-      onClick={() => moveToRootClickedHandler(pageId)}
+      onClick={() => onClickMoveToRootHandler(pageId)}
       className="grw-page-control-dropdown-item"
       data-testid="add-remove-bookmark-btn"
     >

apps/app/src/components/PageList/BookmarkList.tsx

@@ -46,7 +46,7 @@ export const BookmarkList = (props:Props): JSX.Element => {
     return !userBookmarks?.map(userBookmark => userBookmark._id).includes(pageId);
   }, [pageId, userBookmarks]);
 
-  const moveToRootClickedHandler = useCallback(async() => {
+  const onClickMoveToRootHandler = useCallback(async() => {
     try {
       await addBookmarkToFolder(pageId, null);
       await mutateUserBookmarks();
@@ -125,7 +125,7 @@ export const BookmarkList = (props:Props): JSX.Element => {
         onClickRenameMenuItem={() => setIsRenameInputShown(true)}
         onClickDeleteMenuItem={deleteMenuItemClickHandler}
         additionalMenuItemOnTopRenderer={isMoveToRoot
-          ? () => <BookmarkMoveToRootBtn pageId={pageId} moveToRootClickedHandler={moveToRootClickedHandler}/>
+          ? () => <BookmarkMoveToRootBtn pageId={pageId} onClickMoveToRootHandler={onClickMoveToRootHandler}/>
           : undefined
         }
       >