diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js index f734bce0b..1bc44459b 100644 --- a/client/coral-embed-stream/src/Comment.js +++ b/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 {
replyButtonHandler(comment.id)} parentCommentId={parentId || comment.id} currentUserId={currentUser && currentUser.id} banned={false} /> @@ -130,11 +128,10 @@ class Comment extends React.Component {
{ - this.state.replyBoxVisible + activeReplyBox === comment.id ? { - 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 ; }) diff --git a/client/coral-embed-stream/src/Stream.js b/client/coral-embed-stream/src/Stream.js index 73842a947..55e23902c 100644 --- a/client/coral-embed-stream/src/Stream.js +++ b/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 ( -
- { - comments.map(comment => { - return ; - }) - } -
- ); -}; +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 ( +
+ { + comments.map(comment => { + return 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} />; + }) + } +
+ ); + } +} export default Stream;