use use swr x page info

apps/app/src/components/Comments.tsx

@@ -5,7 +5,7 @@ import dynamic from 'next/dynamic';
 
 import { ROOT_ELEM_ID as PageCommentRootElemId, type PageCommentProps } from '~/components/PageComment';
 import { useSWRxPageComment } from '~/stores/comment';
-import { useIsTrashPage, useSWRMUTxCurrentPage } from '~/stores/page';
+import { useIsTrashPage, useSWRxPageInfo } from '~/stores/page';
 
 import { useCurrentUser } from '../stores/context';
 
@@ -32,9 +32,9 @@ export const Comments = (props: CommentsProps): JSX.Element => {
   } = props;
 
   const { mutate } = useSWRxPageComment(pageId);
+  const { mutate: mutatePageInfo } = useSWRxPageInfo(pageId);
   const { data: isDeleted } = useIsTrashPage();
   const { data: currentUser } = useCurrentUser();
-  const { trigger: mutateCurrentPage } = useSWRMUTxCurrentPage();
 
   const pageCommentParentRef = useRef<HTMLDivElement>(null);
 
@@ -72,7 +72,7 @@ export const Comments = (props: CommentsProps): JSX.Element => {
 
   const onCommentButtonClickHandler = () => {
     mutate();
-    mutateCurrentPage();
+    mutatePageInfo();
   };
 
   return (

apps/app/src/components/PageComment.tsx

@@ -9,7 +9,7 @@ import { Button } from 'reactstrap';
 import { apiPost } from '~/client/util/apiv1-client';
 import { toastError } from '~/client/util/toastr';
 import { RendererOptions } from '~/interfaces/renderer-options';
-import { useSWRMUTxCurrentPage } from '~/stores/page';
+import { useSWRxPageInfo } from '~/stores/page';
 import { useCommentForCurrentPageOptions } from '~/stores/renderer';
 
 import { ICommentHasId, ICommentHasIdList } from '../interfaces/comment';
@@ -57,7 +57,7 @@ export const PageComment: FC<PageCommentProps> = memo((props: PageCommentProps):
   const [isDeleteConfirmModalShown, setIsDeleteConfirmModalShown] = useState<boolean>(false);
   const [showEditorIds, setShowEditorIds] = useState<Set<string>>(new Set());
   const [errorMessageOnDelete, setErrorMessageOnDelete] = useState<string>('');
-  const { trigger: mutateCurrentPage } = useSWRMUTxCurrentPage();
+  const { mutate: mutatePageInfo } = useSWRxPageInfo(pageId);
 
   const commentsFromOldest = useMemo(() => (comments != null ? [...comments].reverse() : null), [comments]);
   const commentsExceptReply: ICommentHasIdList | undefined = useMemo(
@@ -86,8 +86,8 @@ export const PageComment: FC<PageCommentProps> = memo((props: PageCommentProps):
   const onDeleteCommentAfterOperation = useCallback(() => {
     onCancelDeleteComment();
     mutate();
-    mutateCurrentPage();
-  }, [mutate, onCancelDeleteComment, mutateCurrentPage]);
+    mutatePageInfo();
+  }, [mutate, onCancelDeleteComment, mutatePageInfo]);
 
   const onDeleteComment = useCallback(async() => {
     if (commentToBeDeleted == null) return;
@@ -114,8 +114,8 @@ export const PageComment: FC<PageCommentProps> = memo((props: PageCommentProps):
   const onCommentButtonClickHandler = useCallback((commentId: string) => {
     removeShowEditorId(commentId);
     mutate();
-    mutateCurrentPage();
-  }, [removeShowEditorId, mutate, mutateCurrentPage]);
+    mutatePageInfo();
+  }, [removeShowEditorId, mutate, mutatePageInfo]);
 
   if (hideIfEmpty && comments?.length === 0) {
     return <PageCommentRoot />;

apps/app/src/components/PageSideContents.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'next-i18next';
 import { Link } from 'react-scroll';
 
 import { useDescendantsPageListModal } from '~/stores/modal';
+import { useSWRxPageInfo } from '~/stores/page';
 
 import CountBadge from './Common/CountBadge';
 import { ContentLinkButtons } from './ContentLinkButtons';
@@ -29,6 +30,8 @@ export const PageSideContents = (props: PageSideContentsProps): JSX.Element => {
 
   const { page, isSharedUser } = props;
 
+  const { data: pageInfo } = useSWRxPageInfo(page.id);
+
   const pagePath = page.path;
   const isTopPagePath = isTopPage(pagePath);
   const isUsersHomePagePath = isUsersHomePage(pagePath);
@@ -51,7 +54,7 @@ export const PageSideContents = (props: PageSideContentsProps): JSX.Element => {
             {t('page_list')}
 
             {/* Do not display CountBadge if '/trash/*': https://github.com/weseek/growi/pull/7600 */}
-            { !isTrash ? <CountBadge count={page?.descendantCount} offset={1} /> : <div className='px-2'></div>}
+            { !isTrash ? <CountBadge count={pageInfo.descendantCount} offset={1} /> : <div className='px-2'></div>}
           </button>
         )}
       </div>
@@ -67,7 +70,7 @@ export const PageSideContents = (props: PageSideContentsProps): JSX.Element => {
             >
               <i className="icon-fw icon-bubbles grw-page-accessories-control-icon"></i>
               <span>Comments</span>
-              <CountBadge count={page.commentCount} />
+              <CountBadge count={pageInfo.commentCount} />
             </button>
           </Link>
         </div>

apps/app/src/server/service/page.ts

@@ -2319,6 +2319,8 @@ class PageService {
       isAbleToDeleteCompletely: false,
       isRevertible: isTrashPage(page.path),
       contentAge: page.getContentAge(),
+      descendantCount: page.descendantCount,
+      commentCount: page.commentCount,
     };
 
   }

packages/core/src/interfaces/page.ts

@@ -87,6 +87,8 @@ export type IPageInfoForEntity = IPageInfo & {
   sumOfSeenUsers: number,
   seenUserIds: string[],
   contentAge: number,
+  descendantCount: number,
+  commentCount: number,
 }
 
 export type IPageInfoForOperation = IPageInfoForEntity & {