add a cancel button to the reply box

client/coral-embed-stream/src/Comment.js

@@ -30,7 +30,7 @@ class Comment extends React.Component {
 
     // id of currently opened ReplyBox. tracked in Stream.js
     activeReplyBox: PropTypes.string.isRequired,
-    replyButtonHandler: PropTypes.func.isRequired,
+    setActiveReplyBox: PropTypes.func.isRequired,
     refetch: PropTypes.func.isRequired,
     showSignInDialog: PropTypes.func.isRequired,
     postAction: PropTypes.func.isRequired,
@@ -77,7 +77,7 @@ class Comment extends React.Component {
       addNotification,
       showSignInDialog,
       postAction,
-      replyButtonHandler,
+      setActiveReplyBox,
       activeReplyBox,
       deleteAction
     } = this.props;
@@ -104,7 +104,7 @@ class Comment extends React.Component {
         <Content body={comment.body} />
           <div className="commentActionsLeft">
               <ReplyButton
-                onClick={() => replyButtonHandler(comment.id)}
+                onClick={() => setActiveReplyBox(comment.id)}
                 parentCommentId={parentId || comment.id}
                 currentUserId={currentUser && currentUser.id}
                 banned={false} />
@@ -131,9 +131,10 @@ class Comment extends React.Component {
           activeReplyBox === comment.id
           ? <ReplyBox
               commentPostedHandler={() => {
-                replyButtonHandler('');
+                setActiveReplyBox('');
                 refetch();
               }}
+              setActiveReplyBox={setActiveReplyBox}
               parentId={parentId || comment.id}
               addNotification={addNotification}
               authorId={currentUser.id}
@@ -146,7 +147,7 @@ class Comment extends React.Component {
           comment.replies.map(reply => {
             return <Comment
               refetch={refetch}
-              replyButtonHandler={replyButtonHandler}
+              setActiveReplyBox={setActiveReplyBox}
               activeReplyBox={activeReplyBox}
               addNotification={addNotification}
               parentId={comment.id}

client/coral-embed-stream/src/Stream.js

@@ -18,20 +18,16 @@ class Stream extends React.Component {
   constructor(props) {
     super(props);
     this.state = {activeReplyBox: ''};
+    this.setActiveReplyBox = this.setActiveReplyBox.bind(this);
   }
 
   setActiveReplyBox (reactKey) {
     if (!this.props.currentUser) {
       const offset = document.getElementById(`c_${reactKey}`).getBoundingClientRect().top - 75;
       this.props.showSignInDialog(offset);
-    } else if (this.state.activeReplyBox === reactKey) {
-
-      // if the button is clicked again, close the reply box
-      this.setState({activeReplyBox: ''});
     } else {
       this.setState({activeReplyBox: reactKey});
     }
-
   }
 
   render () {
@@ -53,7 +49,7 @@ class Stream extends React.Component {
           comments.map(comment => {
             return <Comment
               refetch={refetch}
-              replyButtonHandler={() => this.setActiveReplyBox(comment.id)}
+              setActiveReplyBox={this.setActiveReplyBox}
               activeReplyBox={this.state.activeReplyBox}
               addNotification={addNotification}
               depth={0}

client/coral-plugin-commentbox/CommentBox.js

@@ -13,6 +13,7 @@ class CommentBox extends Component {
     // comments: PropTypes.array,
     commentPostedHandler: PropTypes.func,
     postItem: PropTypes.func.isRequired,
+    cancelButtonClicked: PropTypes.func,
     assetId: PropTypes.string.isRequired,
     parentId: PropTypes.string,
     authorId: PropTypes.string.isRequired,
@@ -89,7 +90,14 @@ class CommentBox extends Component {
 
   render () {
     const {styles, isReply, authorId, charCount} = this.props;
+    let {cancelButtonClicked} = this.props;
     const length = this.state.body.length;
+
+    if (isReply && typeof cancelButtonClicked !== 'function') {
+      console.warn('the CommentBox component should have a cancelButtonClicked callback defined if it lives in a Reply');
+      cancelButtonClicked = () => {};
+    }
+
     return <div>
       <div
         className={`${name}-container`}>
@@ -115,6 +123,19 @@ class CommentBox extends Component {
           }
         </div>
         <div className={`${name}-button-container`}>
+          {
+            isReply && (
+              <Button
+                cStyle='darkGrey'
+                className={`${name}-cancel-button`}
+                onClick={() => {
+                  console.log('cancel button in comment box');
+                  cancelButtonClicked('');
+                }}>
+                {lang.t('cancel')}
+              </Button>
+            )
+          }
           { authorId && (
               <Button
                 cStyle={!length || (charCount && length > charCount) ? 'lightGrey' : 'darkGrey'}

client/coral-plugin-commentbox/translations.json

@@ -1,6 +1,7 @@
 {
   "en": {
     "post": "Post",
+    "cancel": "Cancel",
     "reply": "Reply",
     "comment": "Comment",
     "name": "Name",
@@ -11,6 +12,7 @@
   },
   "es": {
     "post": "Publicar",
+    "cancel": "Cancelar",
     "reply": "Respuesta",
     "comment": "Comentario",
     "name": "Nombre",

client/coral-plugin-replies/ReplyBox.js

@@ -3,11 +3,12 @@ import CommentBox from '../coral-plugin-commentbox/CommentBox';
 
 const name = 'coral-plugin-replies';
 
-const ReplyBox = ({styles, postItem, assetId, authorId, addNotification, parentId, commentPostedHandler}) => (
+const ReplyBox = ({styles, postItem, assetId, authorId, addNotification, parentId, commentPostedHandler, setActiveReplyBox}) => (
   <div className={`${name}-textarea`} style={styles && styles.container}>
     <CommentBox
       commentPostedHandler={commentPostedHandler}
       parentId={parentId}
+      cancelButtonClicked={setActiveReplyBox}
       addNotification={addNotification}
       authorId={authorId}
       assetId={assetId}
@@ -17,6 +18,7 @@ const ReplyBox = ({styles, postItem, assetId, authorId, addNotification, parentI
 );
 
 ReplyBox.propTypes = {
+  setActiveReplyBox: PropTypes.func.isRequired,
   commentPostedHandler: PropTypes.func,
   parentId: PropTypes.string,
   addNotification: PropTypes.func.isRequired,