From d982d2d723a21f475929159ba2d1ce2b97630317 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Thu, 18 Oct 2018 10:11:51 -0400
Subject: [PATCH 1/2] Show the username of the person being replied to in a
 comment on preview

---
 src/views/preview/comment/comment.jsx           | 10 +++++++++-
 src/views/preview/comment/top-level-comment.jsx | 17 +++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)

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
                           */}
-                        <span className="comment-content">{content}</span>
+
+                        <span className="comment-content">
+                            {replyUsername && (
+                                <a href={`/users/${replyUsername}`}>@{replyUsername}&nbsp;</a>
+                            )}
+                            {content}
+                        </span>
                         <FlexRow className="comment-bottom-row">
                             <span className="comment-time">
                                 <FormattedRelative value={new Date(datetimeCreated)} />
@@ -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}

From 1d3c3ff4313ed5256d668b9b3ae7994d85017622 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Thu, 18 Oct 2018 10:18:00 -0400
Subject: [PATCH 2/2] Use EmojiText component to allow emoji display when API
 includes them

---
 src/views/preview/comment/comment.jsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/views/preview/comment/comment.jsx b/src/views/preview/comment/comment.jsx
index 7d473a21b..a50c7e713 100644
--- a/src/views/preview/comment/comment.jsx
+++ b/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');
@@ -166,7 +167,10 @@ class Comment extends React.Component {
                             {replyUsername && (
                                 <a href={`/users/${replyUsername}`}>@{replyUsername}&nbsp;</a>
                             )}
-                            {content}
+                            <EmojiText
+                                as="span"
+                                text={content}
+                            />
                         </span>
                         <FlexRow className="comment-bottom-row">
                             <span className="comment-time">