Fix Put back modal not showing

https://youtrack.weseek.co.jp/issue/GW-7957
- Add and pass onPagePutBacked props to BookmarkItem in BookmarkFolderItem
- Remove pagePutBackedHandler method in BookmarkFolderItem
- Create putBackClickHandler method in BookmarkFolderTree
- Modify putBackClickHandler method in BookmarkItem
- Redirect page if deleted or reverted page is equal to bookmarked page
- Add mutation of users bookmarks after put back a page from trash page list and TrashPageAlert
- Import PutbackPageModal to BasicLayout component
- Mutate bookmark folders and users bookmarks on delete page from SubNavigation

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

@@ -7,7 +7,7 @@ import { DropdownToggle } from 'reactstrap';
 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 {
@@ -21,7 +21,6 @@ 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
@@ -32,6 +31,7 @@ type BookmarkFolderItemProps = {
   isUserHomePage?: boolean
   onClickDeleteBookmarkHandler: (pageToDelete: IPageToDeleteWithMeta) => void
   bookmarkFolderTreeMutation: () => void
+  onPagePutBacked?: OnPutBackedFunction
 }
 
 export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderItemProps) => {
@@ -39,10 +39,9 @@ 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, onPagePutBacked
   } = props;
 
-  const {t} = useTranslation();
   const {
     name, _id: folderId, children, parent, bookmarks,
   } = bookmarkFolder;
@@ -143,10 +142,6 @@ 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) => {
@@ -161,6 +156,7 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
             isUserHomePage={isUserHomePage}
             onClickDeleteBookmarkHandler={onClickDeleteBookmarkHandler}
             bookmarkFolderTreeMutation={bookmarkFolderTreeMutation}
+            onPagePutBacked={onPagePutBacked}
           />
         </div>
       );
@@ -179,7 +175,7 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
           canMoveToRoot={true}
           onClickDeleteBookmarkHandler={onClickDeleteBookmarkHandler}
           bookmarkFolderTreeMutation={bookmarkFolderTreeMutation}
-          onPagePutBacked={pagePutBackedHandler}
+          onPagePutBacked={onPagePutBacked}
         />
       );
     });

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

@@ -3,19 +3,22 @@ import React, { useCallback } from 'react';
 
 import { useTranslation } from 'next-i18next';
 
-import { toastSuccess } from '~/client/util/toastr';
+import { toastError, toastSuccess } from '~/client/util/toastr';
 import { IPageToDeleteWithMeta } from '~/interfaces/page';
 import { OnDeletedFunction } from '~/interfaces/ui';
 import { useSWRxUserBookmarks, useSWRBookmarkInfo } from '~/stores/bookmark';
 import { useSWRxBookmarkFolderAndChild } from '~/stores/bookmark-folder';
 import { useIsReadOnlyUser } from '~/stores/context';
-import { usePageDeleteModal } from '~/stores/modal';
+import { usePageDeleteModal, usePutBackPageModal } from '~/stores/modal';
 import { useSWRxCurrentPage } from '~/stores/page';
 
 import { BookmarkFolderItem } from './BookmarkFolderItem';
 import { BookmarkItem } from './BookmarkItem';
 
 import styles from './BookmarkFolderTree.module.scss';
+import { unlink } from '~/client/services/page-operation';
+import { mutateAllPageInfo } from '~/stores/page';
+import { useRouter } from 'next/router';
 
 // type DragItemDataType = {
 //   bookmarkFolder: BookmarkFolderItems
@@ -33,13 +36,14 @@ export const BookmarkFolderTree: React.FC<Props> = (props: Props) => {
 
   // const acceptedTypes: DragItemType[] = [DRAG_ITEM_TYPE.FOLDER, DRAG_ITEM_TYPE.BOOKMARK];
   const { t } = useTranslation();
-
+  const router = useRouter();
   const { data: isReadOnlyUser } = useIsReadOnlyUser();
   const { data: currentPage } = useSWRxCurrentPage();
   const { mutate: mutateBookmarkInfo } = useSWRBookmarkInfo(currentPage?._id);
   const { data: bookmarkFolders, mutate: mutateBookmarkFolders } = useSWRxBookmarkFolderAndChild(userId);
   const { data: userBookmarks, mutate: mutateUserBookmarks } = useSWRxUserBookmarks(userId);
   const { open: openDeleteModal } = usePageDeleteModal();
+  const { open: openPutBackPageModal } = usePutBackPageModal();
 
   const bookmarkFolderTreeMutation = useCallback(() => {
     mutateUserBookmarks();
@@ -48,14 +52,18 @@ export const BookmarkFolderTree: React.FC<Props> = (props: Props) => {
   }, [mutateBookmarkFolders, mutateBookmarkInfo, mutateUserBookmarks]);
 
   const onClickDeleteBookmarkHandler = useCallback((pageToDelete: IPageToDeleteWithMeta) => {
+
     const pageDeletedHandler: OnDeletedFunction = (pathOrPathsToDelete, _isRecursively, isCompletely) => {
       if (typeof pathOrPathsToDelete !== 'string') return;
-
       toastSuccess(isCompletely ? t('deleted_pages_completely', { path: pathOrPathsToDelete }) : t('deleted_pages', { path: pathOrPathsToDelete }));
       bookmarkFolderTreeMutation();
+      mutateAllPageInfo();
+      if(pageToDelete.data._id === currentPage?._id && _isRecursively){
+        router.push(`/trash${currentPage.path}`);
+      }
     };
     openDeleteModal([pageToDelete], { onDeleted: pageDeletedHandler });
-  }, [openDeleteModal, t, bookmarkFolderTreeMutation]);
+  }, [openDeleteModal, t, bookmarkFolderTreeMutation, router, mutateAllPageInfo]);
 
   /* TODO: update in bookmarks folder v2. */
   // const itemDropHandler = async(item: DragItemDataType, dragType: string | null | symbol) => {
@@ -90,6 +98,30 @@ export const BookmarkFolderTree: React.FC<Props> = (props: Props) => {
   //   return !isRootBookmark;
 
   // };
+  const putBackClickHandler = useCallback(async(pagePath: string) => {
+    const bookmarkedPage = userBookmarks?.filter(userBookmark => userBookmark._id === pagePath)[0];
+    if(bookmarkedPage != null){
+      const { _id: pageId, path } = bookmarkedPage
+      const putBackedHandler = async() => {
+        try {
+          await unlink(path);
+          mutateAllPageInfo();
+          bookmarkFolderTreeMutation();
+          // Redirect to original page if current page id equal to bookmarked page
+          if(bookmarkedPage._id === currentPage?._id){
+            router.push(`/${pageId}`);
+          }
+          toastSuccess(t('page_has_been_reverted', { path }));
+        }
+        catch (err) {
+          toastError(err);
+        }
+
+      };
+      openPutBackPageModal({ pageId, path }, { onPutBacked: putBackedHandler });
+    }
+  }, [userBookmarks, openPutBackPageModal, mutateAllPageInfo]);
+
 
   return (
     <div className={`grw-folder-tree-container ${styles['grw-folder-tree-container']}` } >
@@ -120,6 +152,7 @@ export const BookmarkFolderTree: React.FC<Props> = (props: Props) => {
               canMoveToRoot={false}
               onClickDeleteBookmarkHandler={onClickDeleteBookmarkHandler}
               bookmarkFolderTreeMutation={bookmarkFolderTreeMutation}
+              onPagePutBacked={putBackClickHandler}
             />
           </div>
         ))}

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

@@ -9,10 +9,10 @@ import { UncontrolledTooltip, DropdownToggle } from 'reactstrap';
 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';
+import { toastError, toastSuccess } from '~/client/util/toastr';
 import { BookmarkFolderItems, DragItemDataType, DRAG_ITEM_TYPE } from '~/interfaces/bookmark-info';
 import { IPageHasId, IPageInfoAll, IPageToDeleteWithMeta } from '~/interfaces/page';
-import { useSWRxPageInfo } from '~/stores/page';
+import { mutateAllPageInfo, useSWRxCurrentPage, useSWRxPageInfo } from '~/stores/page';
 
 import ClosableTextInput from '../Common/ClosableTextInput';
 import { MenuItemType, PageItemControl } from '../Common/Dropdown/PageItemControl';
@@ -22,6 +22,7 @@ import { BookmarkMoveToRootBtn } from './BookmarkMoveToRootBtn';
 import { DragAndDropWrapper } from './DragAndDropWrapper';
 import { OnPutBackedFunction } from '~/interfaces/ui';
 import { usePutBackPageModal } from '~/stores/modal';
+import { useRouter } from 'next/router';
 
 type Props = {
   isReadOnlyUser: boolean
@@ -39,6 +40,7 @@ export const BookmarkItem = (props: Props): JSX.Element => {
   const BASE_BOOKMARK_PADDING = 20;
 
   const { t } = useTranslation();
+  const router = useRouter();
 
   const {
     isReadOnlyUser, bookmarkedPage, onClickDeleteBookmarkHandler,
@@ -48,6 +50,7 @@ export const BookmarkItem = (props: Props): JSX.Element => {
   const [isRenameInputShown, setRenameInputShown] = useState(false);
 
   const { data: fetchedPageInfo } = useSWRxPageInfo(bookmarkedPage._id);
+  const { data: currentPage } = useSWRxCurrentPage();
 
   const dPagePath = new DevidedPagePath(bookmarkedPage.path, false, true);
   const { latter: pageTitle, former: formerPagePath } = dPagePath;
@@ -112,23 +115,28 @@ 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]);
+  const putBackClickHandler = useCallback(async() => {
+      const { _id: pageId, path } = bookmarkedPage
+      const putBackedHandler = async() => {
+        try {
+          await unlink(path);
+          mutateAllPageInfo();
+          bookmarkFolderTreeMutation();
+          if(pageId === currentPage?._id){
+            router.push(`/${pageId}`);
+          }
+          toastSuccess(t('page_has_been_reverted', { path }))
+        }
+        catch (err) {
+          toastError(err);
+        }
+        if(onPagePutBacked != null){
+          onPagePutBacked(path)
+        }
+      };
+      openPutBackPageModal({ pageId, path }, { onPutBacked: putBackedHandler });
+
+  }, [bookmarkedPage, openPutBackPageModal, mutateAllPageInfo, bookmarkFolderTreeMutation, router]);
 
   return (
     <DragAndDropWrapper
@@ -161,7 +169,7 @@ export const BookmarkItem = (props: Props): JSX.Element => {
             onClickBookmarkMenuItem={bookmarkMenuItemClickHandler}
             onClickRenameMenuItem={renameMenuItemClickHandler}
             onClickDeleteMenuItem={deleteMenuItemClickHandler}
-            onClickRevertMenuItem={revertMenuItemClickHandler}
+            onClickRevertMenuItem={putBackClickHandler}
             additionalMenuItemOnTopRenderer={canMoveToRoot
               ? () => <BookmarkMoveToRootBtn pageId={bookmarkedPage._id} onClickMoveToRootHandler={onClickMoveToRootHandler}/>
               : undefined}

apps/app/src/components/DescendantsPageList.tsx

@@ -23,6 +23,7 @@ import { ForceHideMenuItems } from './Common/Dropdown/PageItemControl';
 import PageList from './PageList/PageList';
 import PaginationWrapper from './PaginationWrapper';
 import { useSWRxBookmarkFolderAndChild } from '~/stores/bookmark-folder';
+import { useSWRxUserBookmarks } from '~/stores/bookmark';
 
 
 type SubstanceProps = {
@@ -50,6 +51,7 @@ const DescendantsPageListSubstance = (props: SubstanceProps): JSX.Element => {
   const { data: isReadOnlyUser } = useIsReadOnlyUser();
   const { data: currentUser } = useCurrentUser();
   const { mutate: mutateBookmarkFolders } = useSWRxBookmarkFolderAndChild(currentUser?._id);
+  const {  mutate: mutateUserBookmarks } = useSWRxUserBookmarks(currentUser?._id);
   const pageIds = pagingResult?.items?.map(page => page._id);
   const { injectTo } = useSWRxPageInfoForList(pageIds, null, true, true);
 
@@ -84,7 +86,8 @@ const DescendantsPageListSubstance = (props: SubstanceProps): JSX.Element => {
     toastSuccess(t('page_has_been_reverted', { path }));
 
     mutatePageTree();
-    mutateBookmarkFolders()
+    mutateBookmarkFolders();
+    mutateUserBookmarks();
     if (onPagePutBacked != null) {
       onPagePutBacked(path);
     }

apps/app/src/components/Layout/BasicLayout.tsx

@@ -25,7 +25,7 @@ const PageAccessoriesModal = dynamic(() => import('../PageAccessoriesModal'), {
 const DeleteBookmarkFolderModal = dynamic(() => import('../DeleteBookmarkFolderModal').then(mod => mod.DeleteBookmarkFolderModal), { ssr: false });
 // Fab
 const Fab = dynamic(() => import('../Fab').then(mod => mod.Fab), { ssr: false });
-
+const PutbackPageModal = dynamic(() => import('../PutbackPageModal'), { ssr: false });
 
 type Props = {
   children?: ReactNode
@@ -57,6 +57,7 @@ export const BasicLayout = ({ children, className }: Props): JSX.Element => {
         <PageRenameModal />
         <PageAccessoriesModal />
         <DeleteBookmarkFolderModal />
+        <PutbackPageModal />
       </DndProvider>
 
       <PagePresentationModal />

apps/app/src/components/Navbar/GrowiContextualSubNavigation.tsx

@@ -46,6 +46,8 @@ import type { SubNavButtonsProps } from './SubNavButtons';
 
 import AuthorInfoStyles from './AuthorInfo.module.scss';
 import PageEditorModeManagerStyles from './PageEditorModeManager.module.scss';
+import { useSWRxBookmarkFolderAndChild } from '~/stores/bookmark-folder';
+import { useSWRxUserBookmarks } from '~/stores/bookmark';
 
 const { isUsersHomePage } = pagePathUtils;
 
@@ -223,6 +225,8 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
   const { data: isAbleToShowPageAuthors } = useIsAbleToShowPageAuthors();
 
   const { mutate: mutateSWRTagsInfo, data: tagsInfoData } = useSWRxTagsInfo(currentPage?._id);
+  const { mutate: mutateBookmarkFolders } = useSWRxBookmarkFolderAndChild(currentUser?._id);
+  const { mutate: mutateUserBookmarks } = useSWRxUserBookmarks(currentUser?._id);
 
   // eslint-disable-next-line max-len
   const { data: tagsForEditors, mutate: mutatePageTagsForEditors, sync: syncPageTagsForEditors } = usePageTagsForEditors(!isSharedPage ? currentPage?._id : undefined);
@@ -318,10 +322,12 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
       else if (currentPathname != null) {
         router.push(currentPathname);
       }
-      mutatePageInfo()
+      mutatePageInfo();
+      mutateBookmarkFolders();
+      mutateUserBookmarks();
     };
     openDeleteModal([pageWithMeta], { onDeleted: deletedHandler });
-  }, [currentPathname, openDeleteModal, router, mutatePageInfo]);
+  }, [currentPathname, openDeleteModal, router, mutatePageInfo, mutateBookmarkFolders, mutateUserBookmarks]);
 
   const switchContentWidthHandler = useCallback(async(pageId: string, value: boolean) => {
     if (!isSharedPage) {

apps/app/src/components/PageAlert/TrashPageAlert.tsx

@@ -14,6 +14,7 @@ import {
 import { useIsAbleToShowTrashPageManagementButtons } from '~/stores/ui';
 import { useCurrentUser } from '~/stores/context';
 import { useSWRxBookmarkFolderAndChild } from '~/stores/bookmark-folder';
+import { useSWRxUserBookmarks } from '~/stores/bookmark';
 
 
 const onDeletedHandler = (pathOrPathsToDelete) => {
@@ -41,6 +42,7 @@ export const TrashPageAlert = (): JSX.Element => {
   const { data: currentPagePath } = useCurrentPagePath();
   const { data: currentUser } = useCurrentUser();
   const { mutate: mutateBookmarkFolders } = useSWRxBookmarkFolderAndChild(currentUser?._id);
+  const { mutate: mutateUserBookmarks } = useSWRxUserBookmarks(currentUser?._id);
   const deleteUser = pageData?.deleteUser;
   const deletedAt = pageData?.deletedAt ? format(new Date(pageData?.deletedAt), 'yyyy/MM/dd HH:mm') : '';
   const revisionId = pageData?.revision?._id;
@@ -57,6 +59,7 @@ export const TrashPageAlert = (): JSX.Element => {
       try {
         unlink(currentPagePath);
         mutateBookmarkFolders();
+        mutateUserBookmarks();
         router.push(`/${pageId}`);
       }
       catch (err) {
@@ -64,7 +67,7 @@ export const TrashPageAlert = (): JSX.Element => {
       }
     };
     openPutBackPageModal({ pageId, path: pagePath }, { onPutBacked: putBackedHandler });
-  }, [currentPagePath, openPutBackPageModal, pageId, pagePath, router, mutateBookmarkFolders]);
+  }, [currentPagePath, openPutBackPageModal, pageId, pagePath, router, mutateBookmarkFolders, mutateUserBookmarks]);
 
   const openPageDeleteModalHandler = useCallback(() => {
     if (pageId === undefined || revisionId === undefined || pagePath === undefined) {