Fixed: Prevent frontend errors when many books added to Readarr

frontend/src/Book/Edit/EditBookModalContent.js

@@ -6,11 +6,13 @@ import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import Button from 'Components/Link/Button';
 import SpinnerButton from 'Components/Link/SpinnerButton';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import ModalBody from 'Components/Modal/ModalBody';
 import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { inputTypes } from 'Helpers/Props';
+import getErrorMessage from 'Utilities/Object/getErrorMessage';
 import translate from 'Utilities/String/translate';
 
 class EditBookModalContent extends Component {
@@ -36,6 +38,9 @@ class EditBookModalContent extends Component {
       authorName,
       statistics,
       item,
+      isFetching,
+      isPopulated,
+      error,
       isSaving,
       onInputChange,
       onModalClose,
@@ -49,6 +54,7 @@ class EditBookModalContent extends Component {
     } = item;
 
     const hasFile = statistics ? statistics.bookFileCount : 0;
+    const errorMessage = getErrorMessage(error, 'Unable to load editions');
 
     return (
       <ModalContent onModalClose={onModalClose}>
@@ -88,20 +94,33 @@ class EditBookModalContent extends Component {
               />
             </FormGroup>
 
-            <FormGroup>
-              <FormLabel>
-                {translate('Edition')}
-              </FormLabel>
+            {
+              isFetching &&
+                <LoadingIndicator />
+            }
 
-              <FormInputGroup
-                type={inputTypes.BOOK_EDITION_SELECT}
-                name="editions"
-                helpText={translate('EditionsHelpText')}
-                isDisabled={anyEditionOk.value && hasFile}
-                bookEditions={editions}
-                onChange={onInputChange}
-              />
-            </FormGroup>
+            {
+              error &&
+                <div>{errorMessage}</div>
+            }
+
+            {
+              isPopulated && !isFetching && !!editions.value.length &&
+                <FormGroup>
+                  <FormLabel>
+                    {translate('Edition')}
+                  </FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.BOOK_EDITION_SELECT}
+                    name="editions"
+                    helpText={translate('EditionsHelpText')}
+                    isDisabled={anyEditionOk.value && hasFile}
+                    bookEditions={editions}
+                    onChange={onInputChange}
+                  />
+                </FormGroup>
+            }
 
           </Form>
         </ModalBody>
@@ -131,6 +150,9 @@ EditBookModalContent.propTypes = {
   authorName: PropTypes.string.isRequired,
   statistics: PropTypes.object.isRequired,
   item: PropTypes.object.isRequired,
+  isFetching: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  isPopulated: PropTypes.bool.isRequired,
   isSaving: PropTypes.bool.isRequired,
   onInputChange: PropTypes.func.isRequired,
   onSavePress: PropTypes.func.isRequired,

frontend/src/Book/Edit/EditBookModalContentConnector.js

@@ -4,6 +4,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { saveBook, setBookValue } from 'Store/Actions/bookActions';
+import { clearEditions, fetchEditions } from 'Store/Actions/editionActions';
 import createAuthorSelector from 'Store/Selectors/createAuthorSelector';
 import createBookSelector from 'Store/Selectors/createBookSelector';
 import selectSettings from 'Store/Selectors/selectSettings';
@@ -12,15 +13,25 @@ import EditBookModalContent from './EditBookModalContent';
 function createMapStateToProps() {
   return createSelector(
     (state) => state.books,
+    (state) => state.editions,
     createBookSelector(),
     createAuthorSelector(),
-    (bookState, book, author) => {
+    (bookState, editionState, book, author) => {
       const {
         isSaving,
         saveError,
         pendingChanges
       } = bookState;
 
+      const {
+        isFetching,
+        isPopulated,
+        error,
+        items
+      } = editionState;
+
+      book.editions = items;
+
       const bookSettings = _.pick(book, [
         'monitored',
         'anyEditionOk',
@@ -34,6 +45,9 @@ function createMapStateToProps() {
         authorName: author.authorName,
         bookType: book.bookType,
         statistics: book.statistics,
+        isFetching,
+        isPopulated,
+        error,
         isSaving,
         saveError,
         item: settings.settings,
@@ -44,6 +58,8 @@ function createMapStateToProps() {
 }
 
 const mapDispatchToProps = {
+  dispatchFetchEditions: fetchEditions,
+  dispatchClearEditions: clearEditions,
   dispatchSetBookValue: setBookValue,
   dispatchSaveBook: saveBook
 };
@@ -53,12 +69,20 @@ class EditBookModalContentConnector extends Component {
   //
   // Lifecycle
 
+  componentDidMount() {
+    this.props.dispatchFetchEditions({ bookId: this.props.bookId });
+  }
+
   componentDidUpdate(prevProps, prevState) {
     if (prevProps.isSaving && !this.props.isSaving && !this.props.saveError) {
       this.props.onModalClose();
     }
   }
 
+  componentWillUnmount() {
+    this.props.dispatchClearEditions();
+  }
+
   //
   // Listeners
 
@@ -90,6 +114,8 @@ EditBookModalContentConnector.propTypes = {
   bookId: PropTypes.number,
   isSaving: PropTypes.bool.isRequired,
   saveError: PropTypes.object,
+  dispatchFetchEditions: PropTypes.func.isRequired,
+  dispatchClearEditions: PropTypes.func.isRequired,
   dispatchSetBookValue: PropTypes.func.isRequired,
   dispatchSaveBook: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired

frontend/src/Store/Actions/editionActions.js

@@ -0,0 +1,54 @@
+import { createAction } from 'redux-actions';
+import { createThunk, handleThunks } from 'Store/thunks';
+import createFetchHandler from './Creators/createFetchHandler';
+import createHandleActions from './Creators/createHandleActions';
+import createClearReducer from './Creators/Reducers/createClearReducer';
+
+//
+// Variables
+
+export const section = 'editions';
+
+//
+// State
+
+export const defaultState = {
+  isFetching: false,
+  isPopulated: false,
+  error: null,
+  items: [],
+  itemMap: {}
+};
+
+//
+// Actions Types
+
+export const FETCH_EDITIONS = 'editions/fetchEditions';
+export const CLEAR_EDITIONS = 'editions/clearEditions';
+
+//
+// Action Creators
+
+export const fetchEditions = createThunk(FETCH_EDITIONS);
+export const clearEditions = createAction(CLEAR_EDITIONS);
+
+//
+// Action Handlers
+
+export const actionHandlers = handleThunks({
+  [FETCH_EDITIONS]: createFetchHandler(section, '/edition')
+});
+
+//
+// Reducers
+export const reducers = createHandleActions({
+
+  [CLEAR_EDITIONS]: createClearReducer(section, {
+    isFetching: false,
+    isPopulated: false,
+    error: null,
+    items: [],
+    itemMap: {}
+  })
+
+}, defaultState, section);

frontend/src/Store/Actions/index.js

@@ -14,6 +14,7 @@ import * as calendar from './calendarActions';
 import * as captcha from './captchaActions';
 import * as commands from './commandActions';
 import * as customFilters from './customFilterActions';
+import * as editions from './editionActions';
 import * as history from './historyActions';
 import * as interactiveImportActions from './interactiveImportActions';
 import * as oAuth from './oAuthActions';
@@ -47,6 +48,7 @@ export default [
   captcha,
   commands,
   customFilters,
+  editions,
   history,
   interactiveImportActions,
   oAuth,