revalidate when remove page from ItemsTree

packages/app/src/components/Sidebar/PageTree/Item.tsx

@@ -30,8 +30,7 @@ interface ItemProps {
   isEnabledAttachTitleHeader?: boolean
   onClickDuplicateMenuItem?(pageId: string, path: string): void
   onClickRenameMenuItem?(pageId: string, revisionId: string, path: string): void
-  onClickDeleteMenuItem?(pageToDelete: IPageForPageDeleteModal, callback?: VoidFunction): void
-  onSelfDeleted?: VoidFunction
+  onClickDeleteMenuItem?(pageToDelete: IPageForPageDeleteModal): void
 }
 
 // Utility to mark target
@@ -73,7 +72,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
   const { t } = useTranslation();
   const {
     itemNode, targetPathOrId, isOpen: _isOpen = false, isEnabledAttachTitleHeader,
-    onClickDuplicateMenuItem, onClickRenameMenuItem, onClickDeleteMenuItem, isEnableActions, onSelfDeleted,
+    onClickDuplicateMenuItem, onClickRenameMenuItem, onClickDeleteMenuItem, isEnableActions,
   } = props;
 
   const { page, children } = itemNode;
@@ -242,10 +241,6 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
   }, [onClickRenameMenuItem, page]);
 
   const deleteMenuItemClickHandler = useCallback(async(_pageId: string, pageInfo): Promise<void> => {
-    if (onClickDeleteMenuItem == null) {
-      return;
-    }
-
     const { _id: pageId, revision: revisionId, path } = page;
 
     if (pageId == null || revisionId == null || path == null) {
@@ -259,10 +254,10 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
       isAbleToDeleteCompletely: pageInfo?.isAbleToDeleteCompletely,
     };
 
-    onClickDeleteMenuItem(pageToDelete, async() => {
-      if (onSelfDeleted != null) await onSelfDeleted();
-    });
-  }, [onClickDeleteMenuItem, page, onSelfDeleted]);
+    if (onClickDeleteMenuItem != null) {
+      onClickDeleteMenuItem(pageToDelete);
+    }
+  }, [onClickDeleteMenuItem, page]);
 
   const onPressEnterForCreateHandler = async(inputText: string) => {
     setNewPageInputShown(false);
@@ -424,7 +419,6 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
               onClickDuplicateMenuItem={onClickDuplicateMenuItem}
               onClickRenameMenuItem={onClickRenameMenuItem}
               onClickDeleteMenuItem={onClickDeleteMenuItem}
-              onSelfDeleted={async() => { await mutateChildren() }}
             />
           </div>
         ))

packages/app/src/components/Sidebar/PageTree/ItemsTree.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { IPageHasId } from '../../../interfaces/page';
 import { ItemNode } from './ItemNode';
 import Item from './Item';
-import { useSWRxPageAncestorsChildren, useSWRxRootPage } from '~/stores/page-listing';
+import { usePageTreeTermManager, useSWRxPageAncestorsChildren, useSWRxRootPage } from '~/stores/page-listing';
 import { TargetAndAncestors } from '~/interfaces/page-listing-results';
 import { OnDeletedFunction } from '~/interfaces/ui';
 import { toastError, toastSuccess } from '~/client/util/apiNotification';
@@ -14,6 +14,8 @@ import {
 import { smoothScrollIntoView } from '~/client/util/smooth-scroll';
 
 import { useIsEnabledAttachTitleHeader } from '~/stores/context';
+import { useFullTextSearchTermManager } from '~/stores/search';
+import { useDescendantsPageListForCurrentPathTermManager } from '~/stores/page';
 
 /*
  * Utility to generate initial node
@@ -68,7 +70,7 @@ const renderByInitialNode = (
     isEnabledAttachTitleHeader?: boolean,
     onClickDuplicateMenuItem?: (pageId: string, path: string) => void,
     onClickRenameMenuItem?: (pageId: string, revisionId: string, path: string) => void,
-    onClickDeleteMenuItem?: (pageToDelete: IPageForPageDeleteModal, onItemDeleted: VoidFunction) => void,
+    onClickDeleteMenuItem?: (pageToDelete: IPageForPageDeleteModal) => void,
 ): JSX.Element => {
 
   return (
@@ -106,6 +108,11 @@ const ItemsTree: FC<ItemsTreeProps> = (props: ItemsTreeProps) => {
   const { open: openRenameModal } = usePageRenameModal();
   const { open: openDeleteModal } = usePageDeleteModal();
 
+  // for mutation
+  const { advance: advancePt } = usePageTreeTermManager();
+  const { advance: advanceFts } = useFullTextSearchTermManager();
+  const { advance: advanceDpl } = useDescendantsPageListForCurrentPathTermManager();
+
   useEffect(() => {
     const startFrom = document.getElementById('grw-sidebar-contents-scroll-target');
     const targetElem = document.getElementsByClassName('grw-pagetree-is-target');
@@ -123,14 +130,12 @@ const ItemsTree: FC<ItemsTreeProps> = (props: ItemsTreeProps) => {
     openRenameModal(pageId, revisionId, path);
   };
 
-  const onClickDeleteMenuItem = (pageToDelete: IPageForPageDeleteModal, onItemDeleted: VoidFunction) => {
+  const onClickDeleteMenuItem = (pageToDelete: IPageForPageDeleteModal) => {
     const onDeletedHandler: OnDeletedFunction = (pathOrPathsToDelete, isRecursively, isCompletely) => {
       if (typeof pathOrPathsToDelete !== 'string') {
         return;
       }
 
-      onItemDeleted();
-
       const path = pathOrPathsToDelete;
 
       if (isCompletely) {
@@ -139,6 +144,12 @@ const ItemsTree: FC<ItemsTreeProps> = (props: ItemsTreeProps) => {
       else {
         toastSuccess(t('deleted_pages', { path }));
       }
+
+      setTimeout(() => {
+        advancePt();
+        advanceFts();
+        advanceDpl();
+      }, 800);
     };
 
     openDeleteModal([pageToDelete], { onDeleted: onDeletedHandler });

packages/app/src/stores/page-listing.tsx

@@ -5,8 +5,13 @@ import { apiv3Get } from '../client/util/apiv3-client';
 import {
   AncestorsChildrenResult, ChildrenResult, V5MigrationStatus, RootPageResult,
 } from '../interfaces/page-listing-results';
+import { ITermNumberManagerUtil, useTermNumberManager } from './use-static-swr';
 
 
+export const usePageTreeTermManager = (isDisabled?: boolean) : SWRResponse<number, Error> & ITermNumberManagerUtil => {
+  return useTermNumberManager(isDisabled === true ? null : 'fullTextSearchTermNumber');
+};
+
 export const useSWRxRootPage = (): SWRResponse<RootPageResult, Error> => {
   return useSWR(
     '/page-listing/root',
@@ -36,8 +41,10 @@ export const useSWRxPageAncestorsChildren = (
 export const useSWRxPageChildren = (
     id?: string | null,
 ): SWRResponse<ChildrenResult, Error> => {
+  const { data: termNumber } = usePageTreeTermManager();
+
   return useSWR(
-    id ? `/page-listing/children?id=${id}` : null,
+    id ? [`/page-listing/children?id=${id}`, termNumber] : null,
     endpoint => apiv3Get(endpoint).then((response) => {
       return {
         children: response.data.children,