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;