Stream now tracks what reply box is open

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,
+    replyButtonHandler: 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,
+      replyButtonHandler,
+      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={() => replyButtonHandler(comment.id)}
                 parentCommentId={parentId || comment.id}
                 currentUserId={currentUser && currentUser.id}
                 banned={false} />
@@ -130,11 +128,10 @@ 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});
+                replyButtonHandler('');
                 refetch();
               }}
               parentId={parentId || comment.id}
@@ -149,6 +146,8 @@ class Comment extends React.Component {
           comment.replies.map(reply => {
             return <Comment
               refetch={refetch}
+              replyButtonHandler={replyButtonHandler}
+              activeReplyBox={activeReplyBox}
               addNotification={addNotification}
               parentId={comment.id}
               postItem={postItem}
@@ -158,6 +157,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,76 @@
 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: ''};
+  }
+
+  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 () {
+    const {
+      comments,
+      currentUser,
+      asset,
+      postItem,
+      addNotification,
+      postAction,
+      deleteAction,
+      showSignInDialog,
+      refetch
+    } = this.props;
+
+    return (
+      <div>
+        {
+          comments.map(comment => {
+            return <Comment
+              refetch={refetch}
+              replyButtonHandler={() => this.setActiveReplyBox(comment.id)}
+              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;