Merge pull request #8741 from weseek/fix/close-comment-editor

fix: Close the comment editor after the post

apps/app/src/components/Comments.tsx

@@ -83,7 +83,7 @@ export const Comments = (props: CommentsProps): JSX.Element => {
         <div id="page-comment-write">
           <CommentEditorPre
             pageId={pageId}
-            onCommentButtonClicked={onCommentButtonClickHandler}
+            onCommented={onCommentButtonClickHandler}
             revisionId={revision._id}
           />
         </div>

apps/app/src/components/PageComment.tsx

@@ -168,8 +168,11 @@ export const PageComment: FC<PageCommentProps> = memo((props: PageCommentProps):
 
             return (
               <div key={comment._id} className={commentThreadClasses}>
+                {/* Comment */}
                 {commentElement(comment)}
+                {/* Reply comments */}
                 {hasReply && replyCommentsElement(allReplies[comment._id])}
+
                 {(!isReadOnly && !showEditorIds.has(comment._id)) && (
                   <div className="d-flex flex-row-reverse">
                     <NotAvailableForGuest>
@@ -187,14 +190,16 @@ export const PageComment: FC<PageCommentProps> = memo((props: PageCommentProps):
                     </NotAvailableForGuest>
                   </div>
                 )}
+
+                {/* Editor to reply */}
                 {(!isReadOnly && showEditorIds.has(comment._id)) && (
                   <CommentEditor
                     pageId={pageId}
                     replyTo={comment._id}
-                    onCancelButtonClicked={() => {
+                    onCanceled={() => {
                       removeShowEditorId(comment._id);
                     }}
-                    onCommentButtonClicked={() => onCommentButtonClickHandler(comment._id)}
+                    onCommented={() => onCommentButtonClickHandler(comment._id)}
                     revisionId={revisionId}
                   />
                 )}

apps/app/src/components/PageComment/Comment.tsx

@@ -138,10 +138,10 @@ export const Comment = (props: CommentProps): JSX.Element => {
           replyTo={undefined}
           currentCommentId={commentId}
           commentBody={comment.comment}
-          onCancelButtonClicked={() => setIsReEdit(false)}
-          onCommentButtonClicked={() => {
+          onCanceled={() => setIsReEdit(false)}
+          onCommented={() => {
             setIsReEdit(false);
-            if (onComment != null) onComment();
+            onComment();
           }}
           revisionId={revisionId}
         />

apps/app/src/components/PageComment/CommentEditor.tsx

@@ -64,15 +64,15 @@ type CommentEditorProps = {
   revisionId: string,
   currentCommentId?: string,
   commentBody?: string,
-  onCancelButtonClicked?: () => void,
-  onCommentButtonClicked?: () => void,
+  onCanceled?: () => void,
+  onCommented?: () => void,
 }
 
 export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
 
   const {
     pageId, replyTo, revisionId,
-    currentCommentId, commentBody, onCancelButtonClicked, onCommentButtonClicked,
+    currentCommentId, commentBody, onCanceled, onCommented,
   } = props;
 
   const { data: currentUser } = useCurrentUser();
@@ -146,8 +146,8 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
 
   const cancelButtonClickedHandler = useCallback(() => {
     initializeEditor();
-    onCancelButtonClicked?.();
-  }, [onCancelButtonClicked, initializeEditor]);
+    onCanceled?.();
+  }, [onCanceled, initializeEditor]);
 
   const postCommentHandler = useCallback(async() => {
     const commentBodyToPost = codeMirrorEditor?.getDoc() ?? '';
@@ -175,7 +175,7 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
 
       initializeEditor();
 
-      onCommentButtonClicked?.();
+      onCommented?.();
 
       // Insert empty string as new comment editor is opened after comment
       codeMirrorEditor?.initDoc('');
@@ -185,7 +185,7 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
       setError(errorMessage);
     }
   // eslint-disable-next-line max-len
-  }, [currentCommentId, initializeEditor, onCommentButtonClicked, codeMirrorEditor, updateComment, revisionId, replyTo, isSlackEnabled, slackChannels, postComment]);
+  }, [currentCommentId, initializeEditor, onCommented, codeMirrorEditor, updateComment, revisionId, replyTo, isSlackEnabled, slackChannels, postComment]);
 
   // the upload event handler
   const uploadHandler = useCallback((files: File[]) => {
@@ -309,6 +309,8 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
 
 export const CommentEditorPre = (props: CommentEditorProps): JSX.Element => {
 
+  const { onCommented, onCanceled, ...rest } = props;
+
   const { data: currentUser } = useCurrentUser();
   const { mutate: mutateResolvedTheme } = useResolvedThemeForEditor();
   const { resolvedTheme } = useNextThemes();
@@ -342,9 +344,15 @@ export const CommentEditorPre = (props: CommentEditorProps): JSX.Element => {
   return isReadyToUse
     ? (
       <CommentEditor
-        onCommentButtonClicked={() => setIsReadyToUse(false)}
-        onCancelButtonClicked={() => setIsReadyToUse(false)}
-        {...props}
+        onCommented={() => {
+          onCommented?.();
+          setIsReadyToUse(false);
+        }}
+        onCanceled={() => {
+          onCanceled?.();
+          setIsReadyToUse(false);
+        }}
+        {...rest}
       />
     )
     : render();