diff --git a/src/views/preview/comment/comment.jsx b/src/views/preview/comment/comment.jsx index bcd5a6e33..7d473a21b 100644 --- a/src/views/preview/comment/comment.jsx +++ b/src/views/preview/comment/comment.jsx @@ -93,6 +93,7 @@ class Comment extends React.Component { datetimeCreated, id, projectId, + replyUsername, visibility } = this.props; @@ -160,7 +161,13 @@ class Comment extends React.Component { * @user links in replies * links to scratch.mit.edu pages */} - {content} + + + {replyUsername && ( + @{replyUsername}  + )} + {content} + @@ -228,6 +235,7 @@ Comment.propTypes = { onReport: PropTypes.func, onRestore: PropTypes.func, projectId: PropTypes.string, + replyUsername: PropTypes.string, visibility: PropTypes.string }; diff --git a/src/views/preview/comment/top-level-comment.jsx b/src/views/preview/comment/top-level-comment.jsx index ad09eabbe..fceb24ddf 100644 --- a/src/views/preview/comment/top-level-comment.jsx +++ b/src/views/preview/comment/top-level-comment.jsx @@ -22,6 +22,9 @@ class TopLevelComment extends React.Component { this.state = { expanded: false }; + + // A cache of {commentId: username, ...} in order to show reply usernames + this.commentUsernameCache = {}; } handleExpandThread () { @@ -50,6 +53,19 @@ class TopLevelComment extends React.Component { this.props.onAddComment(comment, this.props.id); } + commentUsername (parentId) { + if (this.commentUsernameCache[parentId]) return this.commentUsernameCache[parentId]; + + // If the cache misses, rebuild it. Every reply has a parent id that is + // either a reply to this top level comment or to one of the replies. + this.commentUsernameCache[this.props.id] = this.props.author.username; + const replies = this.props.replies; + for (let i = 0; i < replies.length; i++) { + this.commentUsernameCache[replies[i].id] = replies[i].author.username; + } + return this.commentUsernameCache[parentId]; + } + render () { const { author, @@ -111,6 +127,7 @@ class TopLevelComment extends React.Component { id={reply.id} key={reply.id} projectId={projectId} + replyUsername={this.commentUsername(reply.parent_id)} visibility={reply.visibility} onAddComment={this.handleAddComment} onDelete={this.handleDeleteReply}