Update comment count on comment added

https://youtrack.weseek.co.jp/issue/GW-7961
- Add onCommentUpdated props to Comments component
- Add onCommentButtonClickHandler for onCommentButtonClicked props
- Call comment mutation and onCommentUpdated from CommentButtonClickHandler
- Implement useSWRMUTxCurrentPage in PageView component
- Apply onCommentUpdated props to Comment component in PageView

apps/app/src/components/Comments.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 
 import { type IRevisionHasId, pagePathUtils } from '@growi/core';
 import dynamic from 'next/dynamic';
@@ -23,12 +23,13 @@ export type CommentsProps = {
   pagePath: string,
   revision: IRevisionHasId,
   onLoaded?: () => void,
+  onCommentUpdated?: () => void,
 }
 
 export const Comments = (props: CommentsProps): JSX.Element => {
 
   const {
-    pageId, pagePath, revision, onLoaded,
+    pageId, pagePath, revision, onLoaded, onCommentUpdated,
   } = props;
 
   const { mutate } = useSWRxPageComment(pageId);
@@ -41,8 +42,8 @@ export const Comments = (props: CommentsProps): JSX.Element => {
     const parent = pageCommentParentRef.current;
     if (parent == null) return;
 
-    const observerCallback = (mutationRecords:MutationRecord[]) => {
-      mutationRecords.forEach((record:MutationRecord) => {
+    const observerCallback = (mutationRecords: MutationRecord[]) => {
+      mutationRecords.forEach((record: MutationRecord) => {
         const target = record.target as HTMLElement;
 
         for (const child of Array.from(target.children)) {
@@ -69,6 +70,13 @@ export const Comments = (props: CommentsProps): JSX.Element => {
     return <></>;
   }
 
+  const onCommentButtonClickHandler = useCallback(() => {
+    mutate();
+    if (onCommentUpdated != null) {
+      onCommentUpdated()
+    }
+  }, [mutate, onCommentUpdated]);
+
   return (
     <div className="page-comments-row mt-5 py-4 d-edit-none d-print-none">
       <div className="container-lg">
@@ -83,12 +91,12 @@ export const Comments = (props: CommentsProps): JSX.Element => {
             hideIfEmpty={false}
           />
         </div>
-        { !isDeleted && (
+        {!isDeleted && (
           <div id="page-comment-write">
             <CommentEditor
               pageId={pageId}
               isForNewComment
-              onCommentButtonClicked={mutate}
+              onCommentButtonClicked={onCommentButtonClickHandler}
               revisionId={revision._id}
             />
           </div>

apps/app/src/components/Page/PageView.tsx

@@ -11,7 +11,7 @@ import { generateSSRViewOptions } from '~/services/renderer/renderer';
 import {
   useIsForbidden, useIsIdenticalPath, useIsNotCreatable,
 } from '~/stores/context';
-import { useSWRxCurrentPage, useIsNotFound } from '~/stores/page';
+import { useSWRxCurrentPage, useIsNotFound, useSWRMUTxCurrentPage } from '~/stores/page';
 import { useViewOptions } from '~/stores/renderer';
 import { useIsMobile } from '~/stores/ui';
 
@@ -67,6 +67,7 @@ export const PageView = (props: Props): JSX.Element => {
 
   const { data: pageBySWR } = useSWRxCurrentPage();
   const { data: viewOptions } = useViewOptions();
+  const { trigger: mutateCurrentPage } = useSWRMUTxCurrentPage();
 
   const page = pageBySWR ?? initialPage;
   const isNotFound = isNotFoundMeta || page?.revision == null;
@@ -111,11 +112,11 @@ export const PageView = (props: Props): JSX.Element => {
     ? (
       <>
         <div id="comments-container" ref={commentsContainerRef}>
-          <Comments pageId={page._id} pagePath={pagePath} revision={page.revision} onLoaded={() => setCommentsLoaded(true)} />
+          <Comments pageId={page._id} pagePath={pagePath} revision={page.revision} onLoaded={() => setCommentsLoaded(true)} onCommentUpdated={mutateCurrentPage} />
         </div>
-        { (isUsersHomePagePath && page.creator != null) && (
-          <UsersHomePageFooter creatorId={page.creator._id}/>
-        ) }
+        {(isUsersHomePagePath && page.creator != null) && (
+          <UsersHomePageFooter creatorId={page.creator._id} />
+        )}
         <PageContentFooter page={page} />
       </>
     )
@@ -144,15 +145,15 @@ export const PageView = (props: Props): JSX.Element => {
     >
       <PageAlerts />
 
-      { specialContents }
-      { specialContents == null && (
+      {specialContents}
+      {specialContents == null && (
         <>
-          { (isUsersHomePagePath && page?.creator != null) && <UserInfo author={page.creator} /> }
+          {(isUsersHomePagePath && page?.creator != null) && <UserInfo author={page.creator} />}
           <div className={`mb-5 ${isMobile ? `page-mobile ${styles['page-mobile']}` : ''}`}>
             <Contents />
           </div>
         </>
-      ) }
+      )}
 
     </MainPane>
   );