Update comment count when comment / reply added or deleted

https://youtrack.weseek.co.jp/issue/GW-7961
- Rename onCommentUpdated to onCommentCountUpdated
- Add onCommentCountUpdated props to PageComment component
- Rename handleReplyButtonClick to onReplyButtonClickHandler
- Add onCommentButtonClickHandler method and call onCommentCountUpdated
- Implement onCommentButtonClickHandler to onCommentButtonClicked props of CommentEditor

apps/app/src/components/Comments.tsx

@@ -23,13 +23,13 @@ export type CommentsProps = {
   pagePath: string,
   revision: IRevisionHasId,
   onLoaded?: () => void,
-  onCommentUpdated?: () => void,
+  onCommentCountUpdated?: () => void,
 }
 
 export const Comments = (props: CommentsProps): JSX.Element => {
 
   const {
-    pageId, pagePath, revision, onLoaded, onCommentUpdated,
+    pageId, pagePath, revision, onLoaded, onCommentCountUpdated,
   } = props;
 
   const { mutate } = useSWRxPageComment(pageId);
@@ -72,10 +72,10 @@ export const Comments = (props: CommentsProps): JSX.Element => {
 
   const onCommentButtonClickHandler = useCallback(() => {
     mutate();
-    if (onCommentUpdated != null) {
-      onCommentUpdated()
+    if (onCommentCountUpdated != null) {
+      onCommentCountUpdated()
     }
-  }, [mutate, onCommentUpdated]);
+  }, [mutate, onCommentCountUpdated]);
 
   return (
     <div className="page-comments-row mt-5 py-4 d-edit-none d-print-none">
@@ -89,6 +89,7 @@ export const Comments = (props: CommentsProps): JSX.Element => {
             isReadOnly={false}
             titleAlign="left"
             hideIfEmpty={false}
+            onCommentCountUpdated={onCommentCountUpdated}
           />
         </div>
         {!isDeleted && (

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

@@ -112,7 +112,7 @@ 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)} onCommentUpdated={mutateCurrentPage} />
+          <Comments pageId={page._id} pagePath={pagePath} revision={page.revision} onLoaded={() => setCommentsLoaded(true)} onCommentCountUpdated={mutateCurrentPage} />
         </div>
         {(isUsersHomePagePath && page.creator != null) && (
           <UsersHomePageFooter creatorId={page.creator._id} />

apps/app/src/components/PageComment.tsx

@@ -40,13 +40,14 @@ export type PageCommentProps = {
   isReadOnly: boolean,
   titleAlign?: 'center' | 'left' | 'right',
   hideIfEmpty?: boolean,
+  onCommentCountUpdated?: () => void,
 }
 
-export const PageComment: FC<PageCommentProps> = memo((props:PageCommentProps): JSX.Element => {
+export const PageComment: FC<PageCommentProps> = memo((props: PageCommentProps): JSX.Element => {
 
   const {
     rendererOptions: rendererOptionsByProps,
-    pageId, pagePath, revision, currentUser, isReadOnly, titleAlign, hideIfEmpty,
+    pageId, pagePath, revision, currentUser, isReadOnly, titleAlign, hideIfEmpty, onCommentCountUpdated,
   } = props;
 
   const { data: comments, mutate } = useSWRxPageComment(pageId);
@@ -84,15 +85,18 @@ export const PageComment: FC<PageCommentProps> = memo((props:PageCommentProps):
   const onDeleteCommentAfterOperation = useCallback(() => {
     onCancelDeleteComment();
     mutate();
-  }, [mutate, onCancelDeleteComment]);
+    if (onCommentCountUpdated != null) {
+      onCommentCountUpdated();
+    }
+  }, [mutate, onCancelDeleteComment, onCommentCountUpdated]);
 
-  const onDeleteComment = useCallback(async() => {
+  const onDeleteComment = useCallback(async () => {
     if (commentToBeDeleted == null) return;
     try {
       await apiPost('/comments.remove', { comment_id: commentToBeDeleted._id });
       onDeleteCommentAfterOperation();
     }
-    catch (error:unknown) {
+    catch (error: unknown) {
       setErrorMessageOnDelete(error as string);
       toastError(`error: ${error}`);
     }
@@ -107,10 +111,18 @@ export const PageComment: FC<PageCommentProps> = memo((props:PageCommentProps):
     });
   }, []);
 
-  const handleReplyButtonClick = useCallback((commentId: string) => {
+  const onReplyButtonClickHandler = useCallback((commentId: string) => {
     setShowEditorIds((previousState) => new Set(previousState.add(commentId)));
   }, []);
 
+  const onCommentButtonClickHandler = useCallback((commentId: string) => {
+    removeShowEditorId(commentId);
+    mutate();
+    if (onCommentCountUpdated != null) {
+      onCommentCountUpdated();
+    }
+  }, [removeShowEditorId, mutate, onCommentCountUpdated])
+
   if (hideIfEmpty && comments?.length === 0) {
     return <PageCommentRoot />;
   }
@@ -168,7 +180,7 @@ export const PageComment: FC<PageCommentProps> = memo((props:PageCommentProps):
         <div className="page-comments">
           <h2 className={commentTitleClasses}><i className="icon-fw icon-bubbles"></i>Comments</h2>
           <div className="page-comments-list" id="page-comments-list">
-            { commentsExceptReply.map((comment) => {
+            {commentsExceptReply.map((comment) => {
 
               const defaultCommentThreadClasses = 'page-comment-thread pb-5';
               const hasReply: boolean = Object.keys(allReplies).includes(comment._id);
@@ -189,7 +201,7 @@ export const PageComment: FC<PageCommentProps> = memo((props:PageCommentProps):
                             color="secondary"
                             size="sm"
                             className="btn-comment-reply"
-                            onClick={() => handleReplyButtonClick(comment._id)}
+                            onClick={() => onReplyButtonClickHandler(comment._id)}
                           >
                             <i className="icon-fw icon-action-undo"></i> Reply
                           </Button>
@@ -204,10 +216,7 @@ export const PageComment: FC<PageCommentProps> = memo((props:PageCommentProps):
                       onCancelButtonClicked={() => {
                         removeShowEditorId(comment._id);
                       }}
-                      onCommentButtonClicked={() => {
-                        removeShowEditorId(comment._id);
-                        mutate();
-                      }}
+                      onCommentButtonClicked={() => onCommentButtonClickHandler(comment._id)}
                       revisionId={revisionId}
                     />
                   )}