Merge pull request #1166 from weseek/switching-editor

Switching editor

src/client/js/components/PageComment/Comment.jsx

@@ -16,6 +16,7 @@ import { createSubscribedElement } from '../UnstatedUtils';
 import RevisionBody from '../Page/RevisionBody';
 import UserPicture from '../User/UserPicture';
 import Username from '../User/Username';
+import CommentEditor from './CommentEditor';
 
 /**
  *
@@ -33,16 +34,19 @@ class Comment extends React.Component {
     this.state = {
       html: '',
       isOlderRepliesShown: false,
+      showReEditorIds: new Set(),
     };
 
+    this.growiRenderer = this.props.appContainer.getRenderer('comment');
+
     this.isCurrentUserIsAuthor = this.isCurrentUserEqualsToAuthor.bind(this);
     this.isCurrentRevision = this.isCurrentRevision.bind(this);
     this.getRootClassName = this.getRootClassName.bind(this);
     this.getRevisionLabelClassName = this.getRevisionLabelClassName.bind(this);
-    this.editBtnClickedHandler = this.editBtnClickedHandler.bind(this);
     this.deleteBtnClickedHandler = this.deleteBtnClickedHandler.bind(this);
     this.renderText = this.renderText.bind(this);
     this.renderHtml = this.renderHtml.bind(this);
+    this.commentButtonClickedHandler = this.commentButtonClickedHandler.bind(this);
   }
 
   componentWillMount() {
@@ -92,8 +96,18 @@ class Comment extends React.Component {
       this.isCurrentRevision() ? 'label-primary' : 'label-default'}`;
   }
 
-  editBtnClickedHandler() {
-    this.props.editBtnClicked(this.props.comment);
+  editBtnClickedHandler(commentId) {
+    const ids = this.state.showReEditorIds.add(commentId);
+    this.setState({ showReEditorIds: ids });
+  }
+
+  commentButtonClickedHandler(commentId) {
+    this.setState((prevState) => {
+      prevState.showReEditorIds.delete(commentId);
+      return {
+        showReEditorIds: prevState.showReEditorIds,
+      };
+    });
   }
 
   deleteBtnClickedHandler() {
@@ -161,7 +175,6 @@ class Comment extends React.Component {
       <div key={reply._id} className="page-comment-reply">
         <CommentWrapper
           comment={reply}
-          editBtnClicked={this.props.editBtnClicked}
           deleteBtnClicked={this.props.deleteBtnClicked}
           growiRenderer={this.props.growiRenderer}
         />
@@ -223,9 +236,12 @@ class Comment extends React.Component {
 
   render() {
     const comment = this.props.comment;
+    const commentId = comment._id;
     const creator = comment.creator;
     const isMarkdown = comment.isMarkdown;
 
+    const showReEditor = this.state.showReEditorIds.has(commentId);
+
     const rootClassName = this.getRootClassName(comment);
     const commentDate = distanceInWordsStrict(comment.createdAt, new Date());
     const commentBody = isMarkdown ? this.renderRevisionBody() : this.renderText(comment.comment);
@@ -242,31 +258,41 @@ class Comment extends React.Component {
     return (
       <React.Fragment>
 
-        <div className={rootClassName}>
-          <UserPicture user={creator} />
-          <div className="page-comment-main">
-            <div className="page-comment-creator">
-              <Username user={creator} />
-            </div>
-            <div className="page-comment-body">{commentBody}</div>
-            <div className="page-comment-meta">
-              <OverlayTrigger overlay={commentDateTooltip} placement="bottom">
-                <span>{commentDate}</span>
-              </OverlayTrigger>
-              <span className="ml-2"><a className={revisionLavelClassName} href={revHref}>{revFirst8Letters}</a></span>
-            </div>
-            <div className="page-comment-control">
-              {/* TODO GW-63 adjust layout */}
-              <button type="button" className="btn btn-link" onClick={this.editBtnClickedHandler}>
-                <i className="ti-pencil"></i>
-              </button>
-              <button type="button" className="btn btn-link" onClick={this.deleteBtnClickedHandler}>
-                <i className="ti-close"></i>
-              </button>
+        {showReEditor ? (
+          <CommentEditor
+            growiRenderer={this.growiRenderer}
+            currentCommentId={commentId}
+            commentBody={comment.comment}
+            replyTo={undefined}
+            commentButtonClickedHandler={this.commentButtonClickedHandler}
+          />
+        ) : (
+          <div className={rootClassName}>
+            <UserPicture user={creator} />
+            <div className="page-comment-main">
+              <div className="page-comment-creator">
+                <Username user={creator} />
+              </div>
+              <div className="page-comment-body">{commentBody}</div>
+              <div className="page-comment-meta">
+                <OverlayTrigger overlay={commentDateTooltip} placement="bottom">
+                  <span>{commentDate}</span>
+                </OverlayTrigger>
+                <span className="ml-2"><a className={revisionLavelClassName} href={revHref}>{revFirst8Letters}</a></span>
+              </div>
+              <div className="page-comment-control">
+                {/* TODO GW-63 adjust layout */}
+                <button type="button" className="btn btn-link" onClick={() => { this.editBtnClickedHandler(commentId) }}>
+                  <i className="ti-pencil"></i>
+                </button>
+                <button type="button" className="btn btn-link" onClick={this.deleteBtnClickedHandler}>
+                  <i className="ti-close"></i>
+                </button>
+              </div>
             </div>
           </div>
-        </div>
-
+        )
+      }
         {this.renderReplies()}
 
       </React.Fragment>
@@ -288,7 +314,6 @@ Comment.propTypes = {
 
   comment: PropTypes.object.isRequired,
   growiRenderer: PropTypes.object.isRequired,
-  editBtnClicked: PropTypes.func.isRequired,
   deleteBtnClicked: PropTypes.func.isRequired,
   replyList: PropTypes.array,
 };

src/client/js/components/PageComment/CommentEditor.jsx

@@ -36,7 +36,7 @@ class CommentEditor extends React.Component {
     const isUploadableFile = config.upload.file;
 
     this.state = {
-      comment: '',
+      comment: this.props.commentBody || '',
       isMarkdown: true,
       html: '',
       key: 1,
@@ -84,13 +84,15 @@ class CommentEditor extends React.Component {
   }
 
   toggleEditor() {
-    this.props.commentButtonClickedHandler(this.props.replyTo);
+    const targetId = this.props.replyTo || this.props.currentCommentId;
+    this.props.commentButtonClickedHandler(targetId);
   }
 
   /**
    * Post comment with CommentContainer and update state
    */
   postHandler(event) {
+    // TODO GW-61 implementation for reEdit comment
     if (event != null) {
       event.preventDefault();
     }
@@ -321,6 +323,8 @@ CommentEditor.propTypes = {
 
   growiRenderer: PropTypes.instanceOf(GrowiRenderer).isRequired,
   replyTo: PropTypes.string,
+  currentCommentId: PropTypes.string,
+  commentBody: PropTypes.string,
   commentButtonClickedHandler: PropTypes.func.isRequired,
 };
 

src/client/js/components/PageComments.jsx

@@ -42,7 +42,6 @@ class PageComments extends React.Component {
     this.growiRenderer = this.props.appContainer.getRenderer('comment');
 
     this.init = this.init.bind(this);
-    this.confirmToEditComment = this.confirmToEditComment.bind(this);
     this.confirmToDeleteComment = this.confirmToDeleteComment.bind(this);
     this.deleteComment = this.deleteComment.bind(this);
     this.showDeleteConfirmModal = this.showDeleteConfirmModal.bind(this);
@@ -63,11 +62,6 @@ class PageComments extends React.Component {
     this.props.commentContainer.retrieveComments();
   }
 
-  confirmToEditComment(comment) {
-    // TODO GW-141 show editor
-    console.log("Pushed Edit button");
-  }
-
   confirmToDeleteComment(comment) {
     this.setState({ commentToDelete: comment });
     this.showDeleteConfirmModal();