Merge pull request #5626 from ericrosenbaum/studio-single-comment

Studio single comment view

src/views/studio/studio-comments.jsx

@@ -44,11 +44,29 @@ const StudioComments = ({
     handleRestoreComment,
     handleResetComments,
     handleReportComment,
-    handleLoadMoreReplies
+    handleLoadMoreReplies,
+    handleLoadSingleComment
 }) => {
+    const commentHashPrefix = '#comments-';
+    const [singleCommentId, setSingleCommentId] = useState(
+        window.location.hash.indexOf(commentHashPrefix) !== -1 &&
+        parseInt(window.location.hash.replace(commentHashPrefix, ''), 10));
+
     useEffect(() => {
-        if (comments.length === 0 && hasFetchedSession) handleLoadMoreComments();
+        if (comments.length === 0 && hasFetchedSession) {
-    }, [comments.length === 0, hasFetchedSession]);
+            if (singleCommentId) {
+                handleLoadSingleComment(singleCommentId);
+            } else {
+                handleLoadMoreComments();
+            }
+        }
+    }, [comments.length === 0, hasFetchedSession, singleCommentId]);
+
+    const handleSeeAllComments = () => {
+        setSingleCommentId(false);
+        history.pushState('', document.title, window.location.pathname + window.location.search);
+        handleResetComments();
+    };
 
     // The comments you see depend on your admin status
     // so reset them if isAdmin changes.
@@ -98,6 +116,8 @@ const StudioComments = ({
                         canRestore={canRestoreComment}
                         content={comment.content}
                         datetimeCreated={comment.datetime_created}
+                        defaultExpanded={singleCommentId}
+                        highlightedCommentId={singleCommentId}
                         id={comment.id}
                         key={comment.id}
                         moreRepliesToLoad={comment.moreRepliesToLoad}
@@ -116,6 +136,15 @@ const StudioComments = ({
                         onLoadMoreReplies={handleLoadMoreReplies}
                     />
                 ))}
+                {!!singleCommentId &&
+                    <Button
+                        className="button load-more-button"
+                        // eslint-disable-next-line react/jsx-no-bind
+                        onClick={handleSeeAllComments}
+                    >
+                        <FormattedMessage id="general.seeAllComments" />
+                    </Button>
+                }
                 {moreCommentsToLoad &&
                     <Button
                         className="button load-more-button"
@@ -151,6 +180,7 @@ StudioComments.propTypes = {
     handleReportComment: PropTypes.func,
     handleResetComments: PropTypes.func,
     handleLoadMoreReplies: PropTypes.func,
+    handleLoadSingleComment: PropTypes.func,
     postURI: PropTypes.string
 };
 
@@ -178,6 +208,7 @@ export default connect(
     }),
     {
         handleLoadMoreComments: studioCommentActions.getTopLevelComments,
+        handleLoadSingleComment: studioCommentActions.getCommentById,
         handleNewComment: studioCommentActions.addNewComment,
         handleDeleteComment: studioCommentActions.deleteComment,
         handleRestoreComment: studioCommentActions.restoreComment,

src/views/studio/studio.scss

@@ -478,6 +478,10 @@ $radius: 8px;
 
 .studio-compose-container {
     padding-top: 8px;
+
+    .load-more-button {
+        width: 100%;
+    }
 }
 
 .studio-comments-not-allowed {