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>
+              isFetching &&
-                {translate('Edition')}
+                <LoadingIndicator />
-              </FormLabel>
+            }
 
-              <FormInputGroup
+            {
-                type={inputTypes.BOOK_EDITION_SELECT}
+              error &&
-                name="editions"
+                <div>{errorMessage}</div>
-                helpText={translate('EditionsHelpText')}
+            }
-                isDisabled={anyEditionOk.value && hasFile}
+
-                bookEditions={editions}
+            {
-                onChange={onInputChange}
+              isPopulated && !isFetching && !!editions.value.length &&
-              />
+                <FormGroup>
-            </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,

src/NzbDrone.Core/Books/Repositories/EditionRepository.cs

@@ -9,6 +9,7 @@ namespace NzbDrone.Core.Books
 {
     public interface IEditionRepository : IBasicRepository<Edition>
     {
+        List<Edition> GetAllMonitoredEditions();
         Edition FindByForeignEditionId(string foreignEditionId);
         List<Edition> FindByBook(int id);
         List<Edition> FindByAuthor(int id);
@@ -25,6 +26,11 @@ namespace NzbDrone.Core.Books
         {
         }
 
+        public List<Edition> GetAllMonitoredEditions()
+        {
+            return Query(x => x.Monitored == true);
+        }
+
         public Edition FindByForeignEditionId(string foreignEditionId)
         {
             var edition = Query(x => x.ForeignEditionId == foreignEditionId).SingleOrDefault();

src/NzbDrone.Core/Books/Services/EditionService.cs

@@ -12,7 +12,7 @@ namespace NzbDrone.Core.Books
     {
         Edition GetEdition(int id);
         Edition GetEditionByForeignEditionId(string foreignEditionId);
-        List<Edition> GetAllEditions();
+        List<Edition> GetAllMonitoredEditions();
         void InsertMany(List<Edition> editions);
         void UpdateMany(List<Edition> editions);
         void DeleteMany(List<Edition> editions);
@@ -48,9 +48,9 @@ namespace NzbDrone.Core.Books
             return _editionRepository.FindByForeignEditionId(foreignEditionId);
         }
 
-        public List<Edition> GetAllEditions()
+        public List<Edition> GetAllMonitoredEditions()
         {
-            return _editionRepository.All().ToList();
+            return _editionRepository.GetAllMonitoredEditions();
         }
 
         public void InsertMany(List<Edition> editions)

src/Readarr.Api.V1/Books/BookController.cs

@@ -73,7 +73,7 @@ namespace Readarr.Api.V1.Books
                 var books = _bookService.GetAllBooks();
 
                 var authors = _authorService.GetAllAuthors().ToDictionary(x => x.AuthorMetadataId);
-                var editions = _editionService.GetAllEditions().GroupBy(x => x.BookId).ToDictionary(x => x.Key, y => y.ToList());
+                var editions = _editionService.GetAllMonitoredEditions().GroupBy(x => x.BookId).ToDictionary(x => x.Key, y => y.ToList());
 
                 foreach (var book in books)
                 {

src/Readarr.Api.V1/Editions/EditionController.cs

@@ -0,0 +1,27 @@
+using System.Collections.Generic;
+using Microsoft.AspNetCore.Mvc;
+using NzbDrone.Core.Books;
+using Readarr.Api.V1.Books;
+using Readarr.Http;
+
+namespace NzbDrone.Api.V1.Editions
+{
+    [V1ApiController]
+    public class EditionController : Controller
+    {
+        private readonly IEditionService _editionService;
+
+        public EditionController(IEditionService editionService)
+        {
+            _editionService = editionService;
+        }
+
+        [HttpGet]
+        public List<EditionResource> GetEditions(int bookId)
+        {
+            var editions = _editionService.GetEditionsByBook(bookId);
+
+            return editions.ToResource();
+        }
+    }
+}