Fixed: RootFolders may not load when adding collections

Fixes #5753

frontend/src/Components/Form/RootFolderSelectInputConnector.js

@@ -151,7 +151,8 @@ RootFolderSelectInputConnector.propTypes = {
 };
 
 RootFolderSelectInputConnector.defaultProps = {
-  includeNoChange: false
+  includeNoChange: false,
+  value: ''
 };
 
 export default connect(createMapStateToProps, createMapDispatchToProps)(RootFolderSelectInputConnector);

frontend/src/Movie/Details/Credits/Cast/MovieCastPostersConnector.js

@@ -1,9 +1,7 @@
 import _ from 'lodash';
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
 import MovieCreditPosters from '../MovieCreditPosters';
 import MovieCastPoster from './MovieCastPoster';
 
@@ -26,19 +24,8 @@ function createMapStateToProps() {
   );
 }
 
-const mapDispatchToProps = {
-  fetchRootFolders
-};
-
 class MovieCastPostersConnector extends Component {
 
-  //
-  // Lifecycle
-
-  componentDidMount() {
-    this.props.fetchRootFolders();
-  }
-
   //
   // Render
 
@@ -53,8 +40,4 @@ class MovieCastPostersConnector extends Component {
   }
 }
 
-MovieCastPostersConnector.propTypes = {
+export default connect(createMapStateToProps)(MovieCastPostersConnector);
-  fetchRootFolders: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(MovieCastPostersConnector);

frontend/src/Movie/Details/Credits/Crew/MovieCrewPostersConnector.js

@@ -1,9 +1,7 @@
 import _ from 'lodash';
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
 import MovieCreditPosters from '../MovieCreditPosters';
 import MovieCrewPoster from './MovieCrewPoster';
 
@@ -26,19 +24,8 @@ function createMapStateToProps() {
   );
 }
 
-const mapDispatchToProps = {
-  fetchRootFolders
-};
-
 class MovieCrewPostersConnector extends Component {
 
-  //
-  // Lifecycle
-
-  componentDidMount() {
-    this.props.fetchRootFolders();
-  }
-
   //
   // Render
 
@@ -53,8 +40,4 @@ class MovieCrewPostersConnector extends Component {
   }
 }
 
-MovieCrewPostersConnector.propTypes = {
+export default connect(createMapStateToProps)(MovieCrewPostersConnector);
-  fetchRootFolders: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(MovieCrewPostersConnector);

frontend/src/Movie/Details/MovieDetailsPageConnector.js

@@ -8,6 +8,7 @@ import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import NotFound from 'Components/NotFound';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
+import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
 import getErrorMessage from 'Utilities/Object/getErrorMessage';
 import translate from 'Utilities/String/translate';
 import MovieDetailsConnector from './MovieDetailsConnector';
@@ -46,7 +47,8 @@ function createMapStateToProps() {
 }
 
 const mapDispatchToProps = {
-  push
+  push,
+  fetchRootFolders
 };
 
 class MovieDetailsPageConnector extends Component {
@@ -54,6 +56,10 @@ class MovieDetailsPageConnector extends Component {
   //
   // Lifecycle
 
+  componentDidMount() {
+    this.props.fetchRootFolders();
+  }
+
   componentDidUpdate(prevProps) {
     if (!this.props.titleSlug) {
       this.props.push(`${window.Radarr.urlBase}/`);
@@ -112,7 +118,8 @@ MovieDetailsPageConnector.propTypes = {
   isPopulated: PropTypes.bool.isRequired,
   error: PropTypes.object,
   match: PropTypes.shape({ params: PropTypes.shape({ titleSlug: PropTypes.string.isRequired }).isRequired }).isRequired,
-  push: PropTypes.func.isRequired
+  push: PropTypes.func.isRequired,
+  fetchRootFolders: PropTypes.func.isRequired
 };
 
 export default connect(createMapStateToProps, mapDispatchToProps)(MovieDetailsPageConnector);

frontend/src/Settings/ImportLists/ImportLists/EditImportListModalContent.js

@@ -21,6 +21,7 @@ function EditImportListModalContent(props) {
     advancedSettings,
     isFetching,
     error,
+    rootFolderError,
     isSaving,
     isTesting,
     saveError,
@@ -62,14 +63,14 @@ function EditImportListModalContent(props) {
         }
 
         {
-          !isFetching && !!error &&
+          !isFetching && (!!error || !!rootFolderError) &&
             <div>
               {translate('UnableToAddANewListPleaseTryAgain')}
             </div>
         }
 
         {
-          !isFetching && !error &&
+          !isFetching && !error && !rootFolderError &&
             <Form
               {...otherProps}
             >
@@ -239,6 +240,7 @@ EditImportListModalContent.propTypes = {
   advancedSettings: PropTypes.bool.isRequired,
   isFetching: PropTypes.bool.isRequired,
   error: PropTypes.object,
+  rootFolderError: PropTypes.object,
   isSaving: PropTypes.bool.isRequired,
   isTesting: PropTypes.bool.isRequired,
   saveError: PropTypes.object,

frontend/src/Settings/ImportLists/ImportLists/EditImportListModalContentConnector.js

@@ -9,11 +9,21 @@ import EditImportListModalContent from './EditImportListModalContent';
 function createMapStateToProps() {
   return createSelector(
     (state) => state.settings.advancedSettings,
+    (state) => state.rootFolders,
     createProviderSettingsSelector('importLists'),
-    (advancedSettings, importList) => {
+    (advancedSettings, rootFolders, importList) => {
+      const {
+        isFetching,
+        isPopulated,
+        ...otherProps
+      } = importList;
+
       return {
         advancedSettings,
-        ...importList
+        isFetching: rootFolders.isFetching || isFetching,
+        isPopulated: rootFolders.isPopulated && isPopulated,
+        rootFolderError: rootFolders.error,
+        ...otherProps
       };
     }
   );