Merge pull request #2207 from paulkaplan/show-replying-to

Show the username of the parent comment in replies

src/views/preview/comment/comment.jsx

@@ -5,6 +5,7 @@ const classNames = require('classnames');
 
 const FlexRow = require('../../../components/flex-row/flex-row.jsx');
 const Avatar = require('../../../components/avatar/avatar.jsx');
+const EmojiText = require('../../../components/emoji-text/emoji-text.jsx');
 const FormattedRelative = require('react-intl').FormattedRelative;
 const FormattedMessage = require('react-intl').FormattedMessage;
 const ComposeComment = require('./compose-comment.jsx');
@@ -93,6 +94,7 @@ class Comment extends React.Component {
             datetimeCreated,
             id,
             projectId,
+            replyUsername,
             visibility
         } = this.props;
 
@@ -160,7 +162,16 @@ class Comment extends React.Component {
                           * @user links in replies
                           * links to scratch.mit.edu pages
                           */}
-                        <span className="comment-content">{content}</span>
+
+                        <span className="comment-content">
+                            {replyUsername && (
+                                <a href={`/users/${replyUsername}`}>@{replyUsername}&nbsp;</a>
+                            )}
+                            <EmojiText
+                                as="span"
+                                text={content}
+                            />
+                        </span>
                         <FlexRow className="comment-bottom-row">
                             <span className="comment-time">
                                 <FormattedRelative value={new Date(datetimeCreated)} />
@@ -228,6 +239,7 @@ Comment.propTypes = {
     onReport: PropTypes.func,
     onRestore: PropTypes.func,
     projectId: PropTypes.string,
+    replyUsername: PropTypes.string,
     visibility: PropTypes.string
 };
 

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}