Stop passing around admin/token info in studio comment component.

Instead of getting data out of redux just to pass it back to a dispatch,
use getState in the thunk to get the data we need. This allows the
component to not care about admin/token info, since it is not related
to rendering.

src/redux/comments.js

@@ -186,3 +186,6 @@ module.exports.setMoreCommentsToLoad = moreCommentsToLoad => ({
 module.exports.resetComments = () => ({
     type: 'RESET_COMMENTS'
 });
+
+// Selectors
+module.exports.selectCommentCount = state => state.comments.comments.length;

src/redux/studio-comment-actions.js

@@ -18,9 +18,19 @@ const {
     setError,
     setReplies,
     setRepliesDeleted,
-    setRepliesRestored
+    setRepliesRestored,
+    selectCommentCount
 } = require('../redux/comments.js');
 
+const {
+    selectIsAdmin,
+    selectToken
+} = require('./session');
+
+const {
+    selectStudioId
+} = require('./studio');
+
 const getReplies = (studioId, commentIds, offset, isAdmin, token) => (dispatch => {
     dispatch(setFetchStatus('replies', Status.FETCHING));
     const fetchedReplies = {};
@@ -50,8 +60,13 @@ const getReplies = (studioId, commentIds, offset, isAdmin, token) => (dispatch =
     });
 });
 
-const getTopLevelComments = (id, offset, isAdmin, token) => (dispatch => {
+const getTopLevelComments = () => ((dispatch, getState) => {
     dispatch(setFetchStatus('comments', Status.FETCHING));
+    const state = getState();
+    const id = selectStudioId(state);
+    const offset = selectCommentCount(state);
+    const isAdmin = selectIsAdmin(state);
+    const token = selectToken(state);
     api({
         uri: `${isAdmin ? '/admin' : ''}/studios/${id}/comments`,
         authentication: token ? token : null,

src/views/studio/studio-comments.jsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useCallback} from 'react';
+import React, {useEffect} from 'react';
 import PropTypes from 'prop-types';
 import {useParams} from 'react-router-dom';
 import {connect} from 'react-redux';
@@ -13,7 +13,7 @@ import {selectShowCommentComposer} from '../../redux/studio.js';
 
 const StudioComments = ({
     comments,
-    getTopLevelComments,
+    handleLoadMoreComments,
     handleNewComment,
     moreCommentsToLoad,
     replies,
@@ -21,13 +21,9 @@ const StudioComments = ({
 }) => {
     const {studioId} = useParams();
 
-    const handleLoadComments = useCallback(() => {
-        getTopLevelComments(studioId, comments.length);
-    }, [studioId, comments.length]);
-
     useEffect(() => {
-        if (comments.length === 0) getTopLevelComments(studioId, 0);
-    }, [studioId]);
+        if (comments.length === 0) handleLoadMoreComments();
+    }, []); // Only runs once after the first render
 
     return (
         <div>
@@ -58,7 +54,7 @@ const StudioComments = ({
                 {moreCommentsToLoad &&
                     <Button
                         className="button load-more-button"
-                        onClick={handleLoadComments}
+                        onClick={handleLoadMoreComments}
                     >
                         <FormattedMessage id="general.loadMore" />
                     </Button>
@@ -70,7 +66,7 @@ const StudioComments = ({
 
 StudioComments.propTypes = {
     comments: PropTypes.arrayOf(PropTypes.shape({})),
-    getTopLevelComments: PropTypes.func,
+    handleLoadMoreComments: PropTypes.func,
     handleNewComment: PropTypes.func,
     moreCommentsToLoad: PropTypes.bool,
     replies: PropTypes.shape({}),
@@ -86,7 +82,7 @@ export default connect(
         shouldShowCommentComposer: selectShowCommentComposer(state)
     }),
     {
-        getTopLevelComments: studioCommentActions.getTopLevelComments,
+        handleLoadMoreComments: studioCommentActions.getTopLevelComments,
         handleNewComment: studioCommentActions.addNewComment
     }
 )(StudioComments);