Comments: Add undo functionality for comment editing. (Automattic#17884)

mdno · Sep 8, 2017 · 3850861 · 3850861
1 parent b21de3c
commit 3850861
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 7 deletions.
diff --git a/client/blocks/comment-detail/comment-detail-edit.jsx b/client/blocks/comment-detail/comment-detail-edit.jsx
@@ -50,7 +50,8 @@ export class CommentDetailEdit extends Component {
 	setCommentContentValue = event => this.setState( { commentContent: event.target.value } );
 
 	editCommentAndCloseEditMode = () => {
-		this.props.editComment( this.props.commentId, this.props.postId, this.state );
+		const { authorDisplayName, authorUrl, commentContent } = this.props;
+		this.props.editComment( this.props.commentId, this.props.postId, this.state, { authorDisplayName, authorUrl, commentContent } );
 		this.props.closeEditMode();
 	};
 

diff --git a/client/my-sites/comments/comment-list/index.jsx b/client/my-sites/comments/comment-list/index.jsx
@@ -92,13 +92,11 @@ export class CommentList extends Component {
 		this.props.deleteComment( commentId, postId );
 	}
 
-	editComment = ( commentId, postId, commentData ) => {
+	editComment = ( commentId, postId, commentData, undoCommentData, showNotice = true ) => {
 		this.props.editComment( commentId, postId, commentData );
-		this.props.successNotice( this.props.translate( 'Comment updated.' ), {
-			duration: 5000,
-			id: `comment-notice-${ commentId }`,
-			isPersistent: true,
-		} );
+		if ( showNotice ) {
+			this.showEditNotice( commentId, postId, undoCommentData );
+		}
 	}
 
 	getComments = () => uniq( [ ...this.state.persistedComments, ...this.props.comments ] ).sort( ( a, b ) => b - a );
@@ -235,6 +233,25 @@ export class CommentList extends Component {
 		}
 	}
 
+	showEditNotice = ( commentId, postId, undoCommentData ) => {
+		const { translate } = this.props;
+
+		const message = translate( 'Your comment has been updated.' );
+
+		const noticeOptions = {
+			button: translate( 'Undo' ),
+			duration: 5000,
+			id: `comment-notice-${ commentId }`,
+			isPersistent: true,
+			onClick: () => {
+				this.editComment( commentId, postId, undoCommentData, false );
+				this.props.removeNotice( `comment-notice-${ commentId }` );
+			},
+		};
+
+		this.props.successNotice( message, noticeOptions );
+	};
+
 	showBulkNotice = newStatus => {
 		const { translate } = this.props;