Displaying comments and replies appropriately.

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

@@ -111,7 +111,8 @@ class CommentStream extends Component {
                 postItem={this.props.postItem}
                 appendItemArray={this.props.appendItemArray}
                 updateItem={this.props.updateItem}
-                id={rootItemId}/>
+                id={rootItemId}
+                reply={false}/>
             </div>
             {
               rootItem.comments.map((commentId) => {
@@ -137,7 +138,8 @@ class CommentStream extends Component {
                       postItem={this.props.postItem}
                       appendItemArray={this.props.appendItemArray}
                       updateItem={this.props.updateItem}
-                      id={commentId}
+                      id={rootItemId}
+                      parent_id={commentId}
                       showReply={comment.showReply}/>
                     {
                       comment.children &&

client/coral-plugin-commentbox/CommentBox.js

@@ -19,26 +19,26 @@ class CommentBox extends Component {
   }
 
   postComment = () => {
-    const {postItem, updateItem, id, reply, addNotification, appendItemArray} = this.props
+    const {postItem, updateItem, id, parent_id, addNotification, appendItemArray} = this.props
     let comment = {
       body: this.state.body,
       asset_id: id,
       username: this.state.username
     }
     let related
-    if (reply) {
-      comment.parent_id = id
+    if (parent_id) {
+      comment.parent_id = parent_id
       related = 'children'
     } else {
       related = 'comments'
     }
-    updateItem(id, 'showReply', false)
+    updateItem(parent_id, 'showReply', false)
     postItem(comment, 'comments')
     .then((comment_id) => {
-      appendItemArray(id, related, comment_id)
+      appendItemArray(parent_id || id, related, comment_id)
       addNotification('success', 'Your comment has been posted.')
     }).catch((err) => console.error(err))
-    this.setState({content: ''})
+    this.setState({body: ''})
   }
 
   render () {
@@ -49,7 +49,7 @@ class CommentBox extends Component {
         <input type='text'
           className={name + '-username'}
           style={styles && styles.textarea}
-          value={this.state.content}
+          value={this.state.username}
           id={reply ? 'replyUser' : 'commentUser'}
           placeholder='Name'
           onChange={(e) => this.setState({username: e.target.value})}/>
@@ -65,7 +65,7 @@ class CommentBox extends Component {
           <textarea
             className={name + '-textarea'}
             style={styles && styles.textarea}
-            value={this.state.content}
+            value={this.state.body}
             placeholder='Comment'
             id={reply ? 'replyText' : 'commentText'}
             onChange={(e) => this.setState({body: e.target.value})}

client/coral-plugin-replies/ReplyBox.js

@@ -8,7 +8,8 @@ const ReplyBox = (props) => <div
    style={props.styles && props.styles.container}>
      {
        props.showReply && <CommentBox
-         item_id = {props.item_id}
+         id = {props.id}
+         parent_id = {props.parent_id}
          postItem = {props.postItem}
          addNotification = {props.addNotification}
          appendItemArray = {props.appendItemArray}

client/coral-plugin-replies/ReplyButton.js

@@ -5,7 +5,7 @@ const name = 'coral-plugin-replies'
 
 const ReplyButton = (props) => <button
     className={name + '-reply-button'}
-    onClick={(e) => props.updateItem(props.item_id || props.parent_id, 'showReply', true)}>
+    onClick={(e) => props.updateItem(props.id || props.parent_id, 'showReply', true)}>
     <i className={name + '-icon material-icons'}
       aria-hidden={true}>reply</i>
     {lang.t('reply')}

routes/api/comments/index.js

@@ -46,6 +46,7 @@ router.post('/:comment_id', (req, res, next) => {
     comment.asset_id = req.body.asset_id;
     comment.parent_id = req.body.parent_id;
     comment.status = req.body.status;
+    comment.username = req.body.username;
 
     comment.save().then((comment) => {
       res.status(200).send(comment);

routes/api/stream/index.js

@@ -17,6 +17,7 @@ router.get('/', (req, res, next) => {
       Action.findByItemIdArray(comments.map((comment) => comment.id))
     ]);
   }).then(([comments, users, actions]) => {
+    console.log(comments.length);
     res.json([...comments,...users,...actions]);
   }).catch(error => {
     next(error);