diff --git a/src/views/studio/studio-comments.jsx b/src/views/studio/studio-comments.jsx
index 78907e560..2cd1495dd 100644
--- a/src/views/studio/studio-comments.jsx
+++ b/src/views/studio/studio-comments.jsx
@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useRef} from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {FormattedMessage} from 'react-intl';
@@ -9,6 +9,7 @@ import TopLevelComment from '../preview/comment/top-level-comment.jsx';
import studioCommentActions from '../../redux/studio-comment-actions.js';
import StudioCommentsAllowed from './studio-comments-allowed.jsx';
+import {selectIsAdmin} from '../../redux/session';
import {
selectShowCommentComposer,
selectCanDeleteComment,
@@ -22,6 +23,7 @@ import {selectStudioCommentsAllowed} from '../../redux/studio.js';
const StudioComments = ({
comments,
commentsAllowed,
+ isAdmin,
handleLoadMoreComments,
handleNewComment,
moreCommentsToLoad,
@@ -35,12 +37,22 @@ const StudioComments = ({
canRestoreComment,
handleDeleteComment,
handleRestoreComment,
+ handleResetComments,
handleReportComment,
handleLoadMoreReplies
}) => {
useEffect(() => {
if (comments.length === 0) handleLoadMoreComments();
- }, []); // Only runs once after the first render
+ }, [comments.length === 0]);
+
+ // The comments you see depend on your admin status
+ // so reset them if isAdmin changes.
+ const adminRef = useRef(isAdmin);
+ useEffect(() => {
+ const wasAdmin = adminRef.current;
+ adminRef.current = isAdmin;
+ if (isAdmin !== wasAdmin) handleResetComments();
+ }, [isAdmin]);
return (
@@ -93,6 +105,7 @@ const StudioComments = ({
StudioComments.propTypes = {
comments: PropTypes.arrayOf(PropTypes.shape({})),
commentsAllowed: PropTypes.bool,
+ isAdmin: PropTypes.bool,
handleLoadMoreComments: PropTypes.func,
handleNewComment: PropTypes.func,
moreCommentsToLoad: PropTypes.bool,
@@ -106,13 +119,19 @@ StudioComments.propTypes = {
handleDeleteComment: PropTypes.func,
handleRestoreComment: PropTypes.func,
handleReportComment: PropTypes.func,
+ handleResetComments: PropTypes.func,
handleLoadMoreReplies: PropTypes.func,
postURI: PropTypes.string
};
+export {
+ StudioComments
+};
+
export default connect(
state => ({
comments: state.comments.comments,
+ isAdmin: selectIsAdmin(state),
moreCommentsToLoad: state.comments.moreCommentsToLoad,
replies: state.comments.replies,
commentsAllowed: selectStudioCommentsAllowed(state),
@@ -130,7 +149,7 @@ export default connect(
handleDeleteComment: studioCommentActions.deleteComment,
handleRestoreComment: studioCommentActions.restoreComment,
handleReportComment: studioCommentActions.reportComment,
- handleLoadMoreReplies: studioCommentActions.getReplies
-
+ handleLoadMoreReplies: studioCommentActions.getReplies,
+ handleResetComments: studioCommentActions.resetComments
}
)(StudioComments);
diff --git a/test/unit/components/studio-comments.test.jsx b/test/unit/components/studio-comments.test.jsx
new file mode 100644
index 000000000..1f628fc66
--- /dev/null
+++ b/test/unit/components/studio-comments.test.jsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import {mountWithIntl} from '../../helpers/intl-helpers.jsx';
+import {StudioComments} from '../../../src/views/studio/studio-comments.jsx';
+
+describe('Studio comments', () => {
+ test('if there are no comments, they get loaded', () => {
+ const loadComments = jest.fn();
+ const component = mountWithIntl(
+
+ );
+ expect(loadComments).toHaveBeenCalled();
+
+ // When updated to have comments, load is not called again
+ loadComments.mockClear();
+ component.setProps({comments: [{id: 123, author: {}}]});
+ component.update();
+ expect(loadComments).not.toHaveBeenCalled();
+
+ // When reset to have no comments again, load is called again
+ loadComments.mockClear();
+ component.setProps({comments: []});
+ component.update();
+ expect(loadComments).toHaveBeenCalled();
+ });
+
+ test('becoming an admin resets the comments', () => {
+ const resetComments = jest.fn();
+ const component = mountWithIntl(
+
+ );
+ expect(resetComments).not.toHaveBeenCalled();
+
+ // When updated to isAdmin=true, reset is called
+ resetComments.mockClear();
+ component.setProps({isAdmin: true});
+ component.update();
+ expect(resetComments).toHaveBeenCalled();
+
+ // If updated back to isAdmin=false, reset is also called
+ // not currently possible in the UI, but if it was, we'd want to clear comments
+ resetComments.mockClear();
+ component.setProps({isAdmin: false});
+ component.update();
+ expect(resetComments).toHaveBeenCalled();
+ });
+
+ test('being an admin on initial render doesnt reset comments', () => {
+ // This ensures that comments don't get reloaded when changing tabs
+ const resetComments = jest.fn();
+ mountWithIntl(
+
+ );
+ expect(resetComments).not.toHaveBeenCalled();
+ });
+});