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(); + }); +});