From 520018ee5063eee46ac3c1ebf9d7d17e8263b9db Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Wed, 24 Oct 2018 10:23:28 -0400
Subject: [PATCH 1/3] View single thread of comments by URL hash

---
 src/redux/preview.js                          | 29 +++++++++++++++++++
 src/views/preview/comment/comment.jsx         | 21 ++++++++++++--
 src/views/preview/comment/comment.scss        | 11 +++++++
 .../preview/comment/top-level-comment.jsx     | 11 ++++++-
 src/views/preview/presentation.jsx            |  4 +++
 src/views/preview/preview.jsx                 | 27 +++++++++++++++--
 6 files changed, 96 insertions(+), 7 deletions(-)

diff --git a/src/redux/preview.js b/src/redux/preview.js
index 5492b51d3..18d4f7712 100644
--- a/src/redux/preview.js
+++ b/src/redux/preview.js
@@ -399,6 +399,35 @@ module.exports.getTopLevelComments = (id, offset, isAdmin, token) => (dispatch =
     });
 });
 
+module.exports.getCommentById = (projectId, commentId, isAdmin, token) => (dispatch => {
+    dispatch(module.exports.setFetchStatus('comments', module.exports.Status.FETCHING));
+    api({
+        uri: `${isAdmin ? '/admin' : ''}/projects/comments/${commentId}`,
+        authentication: isAdmin ? token : null
+    }, (err, body) => {
+        if (err) {
+            dispatch(module.exports.setFetchStatus('comments', module.exports.Status.ERROR));
+            dispatch(module.exports.setError(err));
+            return;
+        }
+        if (!body) {
+            dispatch(module.exports.setFetchStatus('comments', module.exports.Status.ERROR));
+            dispatch(module.exports.setError('No comment info'));
+            return;
+        }
+
+        if (body.parent_id) {
+            // If the comment is a reply, load the parent
+            return dispatch(module.exports.getCommentById(projectId, body.parent_id, isAdmin, token));
+        }
+
+        // If the comment is not a reply, show it as top level and load replies
+        dispatch(module.exports.setFetchStatus('comments', module.exports.Status.FETCHED));
+        dispatch(module.exports.setComments([body]));
+        dispatch(module.exports.getReplies(projectId, [body.id], isAdmin, token));
+    });
+});
+
 module.exports.getReplies = (projectId, commentIds, isAdmin, token) => (dispatch => {
     dispatch(module.exports.setFetchStatus('replies', module.exports.Status.FETCHING));
     const fetchedReplies = {};
diff --git a/src/views/preview/comment/comment.jsx b/src/views/preview/comment/comment.jsx
index c6785e99d..3d4c75fb8 100644
--- a/src/views/preview/comment/comment.jsx
+++ b/src/views/preview/comment/comment.jsx
@@ -26,7 +26,8 @@ class Comment extends React.Component {
             'handleCancelReport',
             'handlePostReply',
             'handleToggleReplying',
-            'handleRestore'
+            'handleRestore',
+            'setRef'
         ]);
         this.state = {
             deleting: false,
@@ -36,6 +37,12 @@ class Comment extends React.Component {
         };
     }
 
+    componentDidMount () {
+        if (this.props.highlighted) {
+            this.ref.scrollIntoView({behavior: 'smooth'});
+        }
+    }
+
     handlePostReply (comment) {
         this.setState({replying: false});
         this.props.onAddComment(comment);
@@ -82,6 +89,9 @@ class Comment extends React.Component {
             reportConfirmed: false
         });
     }
+    setRef (ref) {
+        this.ref = ref;
+    }
 
     render () {
         const {
@@ -92,6 +102,7 @@ class Comment extends React.Component {
             canRestore,
             content,
             datetimeCreated,
+            highlighted,
             id,
             parentId,
             projectId,
@@ -103,8 +114,11 @@ class Comment extends React.Component {
 
         return (
             <div
-                className="flex-row comment"
-                id={`comments-${id}`}
+                className={classNames('flex-row', 'comment', {
+                    'highlighted-comment': highlighted
+                })}
+                id={`comment-${id}`}
+                ref={this.setRef}
             >
                 <a href={`/users/${author.username}`}>
                     <Avatar src={author.image} />
@@ -238,6 +252,7 @@ Comment.propTypes = {
     canRestore: PropTypes.bool,
     content: PropTypes.string,
     datetimeCreated: PropTypes.string,
+    highlighted: PropTypes.bool,
     id: PropTypes.number,
     onAddComment: PropTypes.func,
     onDelete: PropTypes.func,
diff --git a/src/views/preview/comment/comment.scss b/src/views/preview/comment/comment.scss
index d3181f28a..8e3bdff40 100644
--- a/src/views/preview/comment/comment.scss
+++ b/src/views/preview/comment/comment.scss
@@ -69,6 +69,17 @@
     justify-content: space-between;
     align-items: flex-start;
 
+    &.highlighted-comment:before {
+        position: absolute;
+        top: -0.5rem;
+        left: -0.5rem;
+        border-radius: 0.5rem;
+        background: $ui-blue-10percent;
+        width: calc(100% + 1rem);
+        height: 100%;
+        content: "";
+    }
+
     .comment-top-row {
         margin-bottom: 8px;
         width: 100%;
diff --git a/src/views/preview/comment/top-level-comment.jsx b/src/views/preview/comment/top-level-comment.jsx
index deef7d4c6..22f732b12 100644
--- a/src/views/preview/comment/top-level-comment.jsx
+++ b/src/views/preview/comment/top-level-comment.jsx
@@ -20,7 +20,7 @@ class TopLevelComment extends React.Component {
             'handleRestoreReply'
         ]);
         this.state = {
-            expanded: false
+            expanded: this.props.defaultExpanded
         };
 
         // A cache of {userId: username, ...} in order to show reply usernames
@@ -77,6 +77,7 @@ class TopLevelComment extends React.Component {
             canRestore,
             content,
             datetimeCreated,
+            highlightedCommentId,
             id,
             onDelete,
             onReport,
@@ -91,6 +92,7 @@ class TopLevelComment extends React.Component {
         return (
             <FlexRow className="comment-container">
                 <Comment
+                    highlighted={highlightedCommentId === id}
                     projectId={projectId}
                     onAddComment={this.handleAddComment}
                     {...{
@@ -126,6 +128,7 @@ class TopLevelComment extends React.Component {
                                 canRestore={canRestore && parentVisible}
                                 content={reply.content}
                                 datetimeCreated={reply.datetime_created}
+                                highlighted={highlightedCommentId === reply.id}
                                 id={reply.id}
                                 key={reply.id}
                                 parentId={id}
@@ -171,7 +174,9 @@ TopLevelComment.propTypes = {
     canRestore: PropTypes.bool,
     content: PropTypes.string,
     datetimeCreated: PropTypes.string,
+    defaultExpanded: PropTypes.bool,
     deletable: PropTypes.bool,
+    highlightedCommentId: PropTypes.number,
     id: PropTypes.number,
     onAddComment: PropTypes.func,
     onDelete: PropTypes.func,
@@ -183,4 +188,8 @@ TopLevelComment.propTypes = {
     visibility: PropTypes.string
 };
 
+TopLevelComment.defaultProps = {
+    defaultExpanded: false
+};
+
 module.exports = TopLevelComment;
diff --git a/src/views/preview/presentation.jsx b/src/views/preview/presentation.jsx
index de421d13e..65ea8bdef 100644
--- a/src/views/preview/presentation.jsx
+++ b/src/views/preview/presentation.jsx
@@ -69,6 +69,7 @@ const PreviewPresentation = ({
     replies,
     addToStudioOpen,
     projectStudios,
+    singleCommentId,
     userOwnsProject,
     onAddComment,
     onDeleteComment,
@@ -369,6 +370,8 @@ const PreviewPresentation = ({
                                                 canRestore={canRestoreComments}
                                                 content={comment.content}
                                                 datetimeCreated={comment.datetime_created}
+                                                defaultExpanded={!!singleCommentId}
+                                                highlightedCommentId={singleCommentId}
                                                 id={comment.id}
                                                 key={comment.id}
                                                 parentId={comment.parent_id}
@@ -452,6 +455,7 @@ PreviewPresentation.propTypes = {
     remixes: PropTypes.arrayOf(PropTypes.object),
     replies: PropTypes.objectOf(PropTypes.array),
     reportOpen: PropTypes.bool,
+    singleCommentId: PropTypes.number,
     userOwnsProject: PropTypes.bool
 };
 
diff --git a/src/views/preview/preview.jsx b/src/views/preview/preview.jsx
index e8d5dc6e2..6a82e7e6a 100644
--- a/src/views/preview/preview.jsx
+++ b/src/views/preview/preview.jsx
@@ -65,11 +65,18 @@ class Preview extends React.Component {
         // parts[0]: 'preview'
         // parts[1]: either :id or 'editor'
         // parts[2]: undefined if no :id, otherwise either 'editor' or 'fullscreen'
+
+        // Get single-comment id from url hash, using the #comment-{id} scheme from scratch2
+        const commentHashPrefix = '#comment-';
+        const singleCommentId = window.location.hash.indexOf(commentHashPrefix) !== -1 &&
+            parseInt(window.location.hash.replace(commentHashPrefix, ''), 10);
+
         this.state = {
             extensions: [],
             favoriteCount: 0,
             loveCount: 0,
             projectId: parts[1] === 'editor' ? '0' : parts[1],
+            singleCommentId: singleCommentId,
             addToStudioOpen: false,
             reportOpen: false
         };
@@ -123,8 +130,13 @@ class Preview extends React.Component {
         if (this.props.userPresent) {
             const username = this.props.user.username;
             const token = this.props.user.token;
-            this.props.getTopLevelComments(this.state.projectId, this.props.comments.length,
-                this.props.isAdmin, token);
+            if (this.state.singleCommentId) {
+                this.props.getCommentById(this.state.projectId, this.state.singleCommentId,
+                    this.props.isAdmin, token);
+            } else {
+                this.props.getTopLevelComments(this.state.projectId, this.props.comments.length,
+                    this.props.isAdmin, token);
+            }
             this.props.getProjectInfo(this.state.projectId, token);
             this.props.getRemixes(this.state.projectId, token);
             this.props.getProjectStudios(this.state.projectId, token);
@@ -132,7 +144,11 @@ class Preview extends React.Component {
             this.props.getFavedStatus(this.state.projectId, username, token);
             this.props.getLovedStatus(this.state.projectId, username, token);
         } else {
-            this.props.getTopLevelComments(this.state.projectId, this.props.comments.length);
+            if (this.state.singleCommentId) {
+                this.props.getCommentById(this.state.projectId, this.state.singleCommentId);
+            } else {
+                this.props.getTopLevelComments(this.state.projectId, this.props.comments.length);
+            }
             this.props.getProjectInfo(this.state.projectId);
             this.props.getRemixes(this.state.projectId);
             this.props.getProjectStudios(this.state.projectId);
@@ -409,6 +425,7 @@ class Preview extends React.Component {
                         remixes={this.props.remixes}
                         replies={this.props.replies}
                         reportOpen={this.state.reportOpen}
+                        singleCommentId={this.state.singleCommentId}
                         userOwnsProject={this.props.userOwnsProject}
                         onAddComment={this.handleAddComment}
                         onAddToStudioClicked={this.handleAddToStudioClick}
@@ -479,6 +496,7 @@ Preview.propTypes = {
     enableCommunity: PropTypes.bool,
     faved: PropTypes.bool,
     fullScreen: PropTypes.bool,
+    getCommentById: PropTypes.func.isRequired,
     getCuratedStudios: PropTypes.func.isRequired,
     getFavedStatus: PropTypes.func.isRequired,
     getLovedStatus: PropTypes.func.isRequired,
@@ -649,6 +667,9 @@ const mapDispatchToProps = dispatch => ({
     getTopLevelComments: (id, offset, isAdmin, token) => {
         dispatch(previewActions.getTopLevelComments(id, offset, isAdmin, token));
     },
+    getCommentById: (projectId, commentId, isAdmin, token) => {
+        dispatch(previewActions.getCommentById(projectId, commentId, isAdmin, token));
+    },
     getFavedStatus: (id, username, token) => {
         dispatch(previewActions.getFavedStatus(id, username, token));
     },

From faf3f49c503585b4e10c2acd8faaf368876cf158 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Wed, 24 Oct 2018 10:43:21 -0400
Subject: [PATCH 2/3] Fix proptypes

---
 src/views/preview/comment/top-level-comment.jsx | 2 +-
 src/views/preview/presentation.jsx              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/preview/comment/top-level-comment.jsx b/src/views/preview/comment/top-level-comment.jsx
index 22f732b12..188150d7b 100644
--- a/src/views/preview/comment/top-level-comment.jsx
+++ b/src/views/preview/comment/top-level-comment.jsx
@@ -176,7 +176,7 @@ TopLevelComment.propTypes = {
     datetimeCreated: PropTypes.string,
     defaultExpanded: PropTypes.bool,
     deletable: PropTypes.bool,
-    highlightedCommentId: PropTypes.number,
+    highlightedCommentId: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
     id: PropTypes.number,
     onAddComment: PropTypes.func,
     onDelete: PropTypes.func,
diff --git a/src/views/preview/presentation.jsx b/src/views/preview/presentation.jsx
index 65ea8bdef..4df88a523 100644
--- a/src/views/preview/presentation.jsx
+++ b/src/views/preview/presentation.jsx
@@ -455,7 +455,7 @@ PreviewPresentation.propTypes = {
     remixes: PropTypes.arrayOf(PropTypes.object),
     replies: PropTypes.objectOf(PropTypes.array),
     reportOpen: PropTypes.bool,
-    singleCommentId: PropTypes.number,
+    singleCommentId: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
     userOwnsProject: PropTypes.bool
 };
 

From 2c5efbda502a64c64d21341c5b00a80f5058cd48 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Wed, 24 Oct 2018 11:45:17 -0400
Subject: [PATCH 3/3] Fix scss linting

---
 src/views/preview/comment/comment.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/preview/comment/comment.scss b/src/views/preview/comment/comment.scss
index 8e3bdff40..7e242a684 100644
--- a/src/views/preview/comment/comment.scss
+++ b/src/views/preview/comment/comment.scss
@@ -71,9 +71,9 @@
 
     &.highlighted-comment:before {
         position: absolute;
-        top: -0.5rem;
-        left: -0.5rem;
-        border-radius: 0.5rem;
+        top: -.5rem;
+        left: -.5rem;
+        border-radius: .5rem;
         background: $ui-blue-10percent;
         width: calc(100% + 1rem);
         height: 100%;