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}