Merge pull request #261 from coralproject/collapse-replies

Collapse replies

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

@@ -26,6 +26,11 @@ class Comment extends React.Component {
   }
 
   static propTypes = {
+    reactKey: PropTypes.string.isRequired,
+
+    // id of currently opened ReplyBox. tracked in Stream.js
+    activeReplyBox: PropTypes.string.isRequired,
+    setActiveReplyBox: PropTypes.func.isRequired,
     refetch: PropTypes.func.isRequired,
     showSignInDialog: PropTypes.func.isRequired,
     postAction: PropTypes.func.isRequired,
@@ -60,15 +65,6 @@ class Comment extends React.Component {
     }).isRequired
   }
 
-  onReplyBoxClick = () => {
-    if (this.props.currentUser) {
-      this.setState({replyBoxVisible: !this.state.replyBoxVisible});
-    } else {
-      const offset = document.getElementById(`c_${this.props.comment.id}`).getBoundingClientRect().top - 75;
-      this.props.showSignInDialog(offset);
-    }
-  }
-
   render () {
     const {
       comment,
@@ -81,6 +77,8 @@ class Comment extends React.Component {
       addNotification,
       showSignInDialog,
       postAction,
+      setActiveReplyBox,
+      activeReplyBox,
       deleteAction
     } = this.props;
 
@@ -106,7 +104,7 @@ class Comment extends React.Component {
         <Content body={comment.body} />
           <div className="commentActionsLeft">
               <ReplyButton
-                onClick={this.onReplyBoxClick}
+                onClick={() => setActiveReplyBox(comment.id)}
                 parentCommentId={parentId || comment.id}
                 currentUserId={currentUser && currentUser.id}
                 banned={false} />
@@ -130,13 +128,13 @@ class Comment extends React.Component {
           <PermalinkButton articleURL={asset.url} commentId={comment.id} />
         </div>
         {
-          this.state.replyBoxVisible
+          activeReplyBox === comment.id
           ? <ReplyBox
               commentPostedHandler={() => {
-                console.log('replyPostedHandler');
-                this.setState({replyBoxVisible: false});
+                setActiveReplyBox('');
                 refetch();
               }}
+              setActiveReplyBox={setActiveReplyBox}
               parentId={parentId || comment.id}
               addNotification={addNotification}
               authorId={currentUser.id}
@@ -149,6 +147,8 @@ class Comment extends React.Component {
           comment.replies.map(reply => {
             return <Comment
               refetch={refetch}
+              setActiveReplyBox={setActiveReplyBox}
+              activeReplyBox={activeReplyBox}
               addNotification={addNotification}
               parentId={comment.id}
               postItem={postItem}
@@ -158,6 +158,7 @@ class Comment extends React.Component {
               postAction={postAction}
               deleteAction={deleteAction}
               showSignInDialog={showSignInDialog}
+              reactKey={reply.id}
               key={reply.id}
               comment={reply} />;
           })

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

@@ -1,49 +1,72 @@
 import React, {PropTypes} from 'react';
 import Comment from './Comment';
 
-const Stream = ({
-  comments,
-  currentUser,
-  asset,
-  postItem,
-  addNotification,
-  postAction,
-  deleteAction,
-  showSignInDialog,
-  refetch
-}) => {
-  return (
-    <div>
-      {
-        comments.map(comment => {
-          return <Comment
-            refetch={refetch}
-            addNotification={addNotification}
-            depth={0}
-            postItem={postItem}
-            asset={asset}
-            currentUser={currentUser}
-            postAction={postAction}
-            deleteAction={deleteAction}
-            showSignInDialog={showSignInDialog}
-            key={comment.id}
-            comment={comment} />;
-        })
-      }
-    </div>
-  );
-};
+class Stream extends React.Component {
 
-Stream.propTypes = {
-  refetch: PropTypes.func.isRequired,
-  addNotification: PropTypes.func.isRequired,
-  postItem: PropTypes.func.isRequired,
-  asset: PropTypes.object.isRequired,
-  comments: PropTypes.array.isRequired,
-  currentUser: PropTypes.shape({
-    displayName: PropTypes.string,
-    id: PropTypes.string
-  })
-};
+  static propTypes = {
+    refetch: PropTypes.func.isRequired,
+    addNotification: PropTypes.func.isRequired,
+    postItem: PropTypes.func.isRequired,
+    asset: PropTypes.object.isRequired,
+    comments: PropTypes.array.isRequired,
+    currentUser: PropTypes.shape({
+      displayName: PropTypes.string,
+      id: PropTypes.string
+    })
+  }
+
+  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 {
+      this.setState({activeReplyBox: reactKey});
+    }
+  }
+
+  render () {
+    const {
+      comments,
+      currentUser,
+      asset,
+      postItem,
+      addNotification,
+      postAction,
+      deleteAction,
+      showSignInDialog,
+      refetch
+    } = this.props;
+
+    return (
+      <div>
+        {
+          comments.map(comment => {
+            return <Comment
+              refetch={refetch}
+              setActiveReplyBox={this.setActiveReplyBox}
+              activeReplyBox={this.state.activeReplyBox}
+              addNotification={addNotification}
+              depth={0}
+              postItem={postItem}
+              asset={asset}
+              currentUser={currentUser}
+              postAction={postAction}
+              deleteAction={deleteAction}
+              showSignInDialog={showSignInDialog}
+              key={comment.id}
+              reactKey={comment.id}
+              comment={comment} />;
+          })
+        }
+      </div>
+    );
+  }
+}
 
 export default Stream;

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,