Stop passing around studio id and user info for getting studio data

Insteaad of passing in the studio id and user data into the component
just to have it used for fetching data, get that data directly from
the redux store from within the thunk. This simplifies the components
and lets them be concerned more with what they render.

src/redux/studio.js

@@ -3,7 +3,7 @@ const keyMirror = require('keymirror');
 const api = require('../lib/api');
 const log = require('../lib/log');
 
-const {selectUserId, selectIsAdmin, selectIsSocial} = require('./session');
+const {selectUserId, selectIsAdmin, selectIsSocial, selectUsername, selectToken} = require('./session');
 
 const Status = keyMirror({
     FETCHED: null,
@@ -99,8 +99,9 @@ const selectStudioId = state => state.studio.id;
 
 
 // Thunks
-const getInfo = studioId => (dispatch => {
+const getInfo = () => ((dispatch, getState) => {
     dispatch(setFetchStatus('infoStatus', Status.FETCHING));
+    const studioId = selectStudioId(getState());
     api({uri: `/studios/${studioId}`}, (err, body, res) => {
         if (err || typeof body === 'undefined' || res.statusCode !== 200) {
             dispatch(setFetchStatus('infoStatus', Status.ERROR, err));
@@ -119,8 +120,12 @@ const getInfo = studioId => (dispatch => {
     });
 });
 
-const getRoles = (studioId, username, token) => (dispatch => {
+const getRoles = () => ((dispatch, getState) => {
     dispatch(setFetchStatus('rolesStatus', Status.FETCHING));
+    const state = getState();
+    const studioId = selectStudioId(state);
+    const username = selectUsername(state);
+    const token = selectToken(state);
     api({
         uri: `/studios/${studioId}/users/${username}`,
         authentication: token

src/views/studio/studio-info.jsx

 import React, {useEffect} from 'react';
 import PropTypes from 'prop-types';
-import {useParams} from 'react-router-dom';
 import {connect} from 'react-redux';
 import Debug from './debug.jsx';
 
-import {selectUsername, selectToken} from '../../redux/session';
+import {selectIsLoggedIn} from '../../redux/session';
 import {getInfo, getRoles, selectCanEditInfo} from '../../redux/studio';
 
-const StudioInfo = ({username, studio, token, canEditInfo, onLoadInfo, onLoadRoles}) => {
-    const {studioId} = useParams();
-    
+const StudioInfo = ({isLoggedIn, studio, canEditInfo, onLoadInfo, onLoadRoles}) => {
     useEffect(() => { // Load studio info after first render
-        if (studioId) onLoadInfo(studioId);
-    }, [studioId]);
+        onLoadInfo();
+    }, []);
 
-    useEffect(() => { // Load roles info once the username is available
-        if (studioId && username && token) onLoadRoles(studioId, username, token);
-    }, [studioId, username, token]);
+    useEffect(() => { // Load roles info once the user is logged in is available
+        if (isLoggedIn) onLoadRoles();
+    }, [isLoggedIn]);
 
     return (
         <div>
@@ -35,8 +32,7 @@ const StudioInfo = ({username, studio, token, canEditInfo, onLoadInfo, onLoadRol
 
 StudioInfo.propTypes = {
     canEditInfo: PropTypes.bool,
-    username: PropTypes.string,
-    token: PropTypes.string,
+    isLoggedIn: PropTypes.bool,
     studio: PropTypes.shape({
         // Fill this in as the data is used, just for demo now
     }),
@@ -47,13 +43,11 @@ StudioInfo.propTypes = {
 export default connect(
     state => ({
         studio: state.studio,
-        username: selectUsername(state),
-        token: selectToken(state),
+        isLoggedIn: selectIsLoggedIn(state),
         canEditInfo: selectCanEditInfo(state)
     }),
-    dispatch => ({
-        onLoadInfo: studioId => dispatch(getInfo(studioId)),
-        onLoadRoles: (studioId, username, token) => dispatch(
-            getRoles(studioId, username, token))
-    })
+    {
+        onLoadInfo: getInfo,
+        onLoadRoles: getRoles
+    }
 )(StudioInfo);