Reset comments when admin logs in

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 (
         <div>
@@ -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);

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(
+            <StudioComments
+                comments={[]}
+                handleLoadMoreComments={loadComments}
+            />
+        );
+        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(
+            <StudioComments
+                isAdmin={false}
+                comments={[{id: 123, author: {}}]}
+                handleResetComments={resetComments}
+            />
+        );
+        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(
+            <StudioComments
+                isAdmin
+                comments={[{id: 123, author: {}}]}
+                handleResetComments={resetComments}
+            />
+        );
+        expect(resetComments).not.toHaveBeenCalled();
+    });
+});