From 48c3032f5418dbb718c7543c13ce5ee3deb9400a Mon Sep 17 00:00:00 2001
From: Eric Rosenbaum <eric.rosenbaum@gmail.com>
Date: Wed, 16 Jun 2021 17:42:40 -0400
Subject: [PATCH] load single comment

---
 src/redux/studio-comment-actions.js  |  2 +-
 src/views/studio/studio-comments.jsx | 32 ++++++++++++++++++++++++++--
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/redux/studio-comment-actions.js b/src/redux/studio-comment-actions.js
index b3513dd01..961881621 100644
--- a/src/redux/studio-comment-actions.js
+++ b/src/redux/studio-comment-actions.js
@@ -3,7 +3,7 @@ const eachLimit = require('async/eachLimit');
 const api = require('../lib/api');
 const log = require('../lib/log');
 
-const COMMENT_LIMIT = 20;
+const COMMENT_LIMIT = 25;
 
 const {
     addNewComment,
diff --git a/src/views/studio/studio-comments.jsx b/src/views/studio/studio-comments.jsx
index 22cda114c..5fa0120cd 100644
--- a/src/views/studio/studio-comments.jsx
+++ b/src/views/studio/studio-comments.jsx
@@ -41,11 +41,27 @@ 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 (singleCommentId) {
+            handleLoadSingleComment(singleCommentId);
+            return;
+        }
         if (comments.length === 0 && hasFetchedSession) handleLoadMoreComments();
-    }, [comments.length === 0, hasFetchedSession]);
+    }, [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.
@@ -95,6 +111,7 @@ const StudioComments = ({
                         canRestore={canRestoreComment}
                         content={comment.content}
                         datetimeCreated={comment.datetime_created}
+                        highlightedCommentId={singleCommentId}
                         id={comment.id}
                         key={comment.id}
                         moreRepliesToLoad={comment.moreRepliesToLoad}
@@ -113,6 +130,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"
@@ -146,6 +172,7 @@ StudioComments.propTypes = {
     handleReportComment: PropTypes.func,
     handleResetComments: PropTypes.func,
     handleLoadMoreReplies: PropTypes.func,
+    handleLoadSingleComment: PropTypes.func,
     postURI: PropTypes.string
 };
 
@@ -171,6 +198,7 @@ export default connect(
     }),
     {
         handleLoadMoreComments: studioCommentActions.getTopLevelComments,
+        handleLoadSingleComment: studioCommentActions.getCommentById,
         handleNewComment: studioCommentActions.addNewComment,
         handleDeleteComment: studioCommentActions.deleteComment,
         handleRestoreComment: studioCommentActions.restoreComment,