Merge pull request #5436 from paulkaplan/fix-admin-studio-comments

Wait for session to be fetched before loading comments

src/redux/session.js

@@ -128,6 +128,7 @@ module.exports.selectToken = state => get(state, ['session', 'session', 'user',
 module.exports.selectIsAdmin = state => get(state, ['session', 'session', 'permissions', 'admin'], false);
 module.exports.selectIsSocial = state => get(state, ['session', 'session', 'permissions', 'social'], false);
 module.exports.selectIsEducator = state => get(state, ['session', 'session', 'permissions', 'educator'], false);
+module.exports.selectHasFetchedSession = state => state.session.status === module.exports.Status.FETCHED;
 
 // NB logged out user id as NaN so that it can never be used in equality testing since NaN !== NaN
 module.exports.selectUserId = state => get(state, ['session', 'session', 'user', 'id'], NaN);

src/views/studio/studio-comments.jsx

@@ -9,7 +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 {selectIsAdmin, selectHasFetchedSession} from '../../redux/session';
 import {
     selectShowCommentComposer,
     selectCanDeleteComment,
@@ -24,6 +24,7 @@ const StudioComments = ({
     comments,
     commentsAllowed,
     isAdmin,
+    hasFetchedSession,
     handleLoadMoreComments,
     handleNewComment,
     moreCommentsToLoad,
@@ -42,8 +43,8 @@ const StudioComments = ({
     handleLoadMoreReplies
 }) => {
     useEffect(() => {
-        if (comments.length === 0) handleLoadMoreComments();
-    }, [comments.length === 0]);
+        if (comments.length === 0 && hasFetchedSession) handleLoadMoreComments();
+    }, [comments.length === 0, hasFetchedSession]);
 
     // The comments you see depend on your admin status
     // so reset them if isAdmin changes.
@@ -108,6 +109,7 @@ StudioComments.propTypes = {
     comments: PropTypes.arrayOf(PropTypes.shape({})),
     commentsAllowed: PropTypes.bool,
     isAdmin: PropTypes.bool,
+    hasFetchedSession: PropTypes.bool,
     handleLoadMoreComments: PropTypes.func,
     handleNewComment: PropTypes.func,
     moreCommentsToLoad: PropTypes.bool,
@@ -133,6 +135,7 @@ export {
 export default connect(
     state => ({
         comments: state.comments.comments,
+        hasFetchedSession: selectHasFetchedSession(state),
         isAdmin: selectIsAdmin(state),
         moreCommentsToLoad: state.comments.moreCommentsToLoad,
         replies: state.comments.replies,

test/unit/components/studio-comments.test.jsx

@@ -7,10 +7,14 @@ describe('Studio comments', () => {
         const loadComments = jest.fn();
         const component = mountWithIntl(
             <StudioComments
+                hasFetchedSession={false}
                 comments={[]}
                 handleLoadMoreComments={loadComments}
             />
         );
+        expect(loadComments).not.toHaveBeenCalled();
+        component.setProps({hasFetchedSession: true});
+        component.update();
         expect(loadComments).toHaveBeenCalled();
 
         // When updated to have comments, load is not called again
@@ -30,6 +34,7 @@ describe('Studio comments', () => {
         const resetComments = jest.fn();
         const component = mountWithIntl(
             <StudioComments
+                hasFetchedSession
                 isAdmin={false}
                 comments={[{id: 123, author: {}}]}
                 handleResetComments={resetComments}
@@ -57,6 +62,7 @@ describe('Studio comments', () => {
         mountWithIntl(
             <StudioComments
                 isAdmin
+                hasFetchedSession
                 comments={[{id: 123, author: {}}]}
                 handleResetComments={resetComments}
             />