Load Bookshelf books per author as rows scroll into view

frontend/src/Bookshelf/BookshelfConnector.js

@@ -3,51 +3,37 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { setSelectedMediaType } from 'Store/Actions/appActions';
-import { clearBooks, fetchBooks } from 'Store/Actions/bookActions';
-import { saveBookshelf, setBookshelfFilter, setBookshelfSort } from 'Store/Actions/bookshelfActions';
+import { clearBookshelf, fetchBookshelfAuthors, saveBookshelf, setBookshelfFilter, setBookshelfSort } from 'Store/Actions/bookshelfActions';
 import createAuthorClientSideCollectionItemsSelector from 'Store/Selectors/createAuthorClientSideCollectionItemsSelector';
 import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
 import Bookshelf from './Bookshelf';
 
-function createBookFetchStateSelector() {
-  return createSelector(
-    (state) => state.books.items,
-    (state) => state.books.isFetching,
-    (state) => state.books.isPopulated,
-    (state) => state.app.selectedMediaType || 'audiobook',
-    (items, isFetching, isPopulated, selectedMediaType) => {
-      const scopedItems = items.filter((book) => book.mediaType === selectedMediaType);
-      return {
-        isFetching,
-        isPopulated,
-        items: scopedItems,
-        selectedMediaType
-      };
-    }
-  );
-}
-
 function createMapStateToProps() {
   return createSelector(
-    createBookFetchStateSelector(),
+    (state) => state.bookshelf,
+    (state) => state.app.selectedMediaType || 'audiobook',
     createAuthorClientSideCollectionItemsSelector('bookshelf'),
     createDimensionsSelector(),
-    (books, author, dimensionsState) => {
-      const isPopulated = books.isPopulated && author.isPopulated;
-      const isFetching = author.isFetching || books.isFetching;
-      const authorIds = new Set(books.items.map((book) => book.authorId));
-      const items = author.items.filter((item) => authorIds.has(item.id));
-      const visibleAuthorIds = new Set(items.map((item) => item.id));
-      const bookCount = books.items.filter((book) => visibleAuthorIds.has(book.authorId)).length;
+    (bookshelf, selectedMediaType, author, dimensionsState) => {
+      const { authorBookCounts } = bookshelf;
+      const isPopulated = bookshelf.isPopulated && author.isPopulated;
+      const isFetching = author.isFetching || bookshelf.isFetching;
+      const items = author.items.filter((item) => authorBookCounts.hasOwnProperty(item.id));
+
+      let bookCount = 0;
+      items.forEach((item) => {
+        bookCount += authorBookCounts[item.id];
+      });
 
       return {
         ...author,
         items,
-        totalItems: authorIds.size,
+        totalItems: Object.keys(authorBookCounts).length,
         isPopulated,
         isFetching,
+        error: author.error || bookshelf.error,
         bookCount,
-        selectedMediaType: books.selectedMediaType,
+        selectedMediaType,
         isSmallScreen: dimensionsState.isSmallScreen
       };
     }
@@ -58,8 +44,8 @@ const mapDispatchToProps = {
   setBookshelfSort,
   setBookshelfFilter,
   setSelectedMediaType,
-  clearBooks,
-  fetchBooks,
+  clearBookshelf,
+  fetchBookshelfAuthors,
   saveBookshelf
 };
 
@@ -69,24 +55,23 @@ class BookshelfConnector extends Component {
   // Lifecycle
 
   componentDidMount() {
-    this.fetchBooksForSelectedMediaType();
+    // Other pages can replace the books store, so rows reload their books on every visit.
+    this.props.clearBookshelf();
+    this.fetchAuthorBookCounts();
   }
 
   componentDidUpdate(prevProps) {
     if (prevProps.selectedMediaType !== this.props.selectedMediaType) {
-      this.fetchBooksForSelectedMediaType();
+      this.fetchAuthorBookCounts();
     }
   }
 
   componentWillUnmount() {
-    if (this.abortBooksFetch) {
-      this.abortBooksFetch();
-      this.abortBooksFetch = null;
-    }
+    this.props.clearBookshelf();
   }
 
-  fetchBooksForSelectedMediaType() {
-    this.abortBooksFetch = this.props.fetchBooks({
+  fetchAuthorBookCounts() {
+    this.props.fetchBookshelfAuthors({
       mediaType: this.props.selectedMediaType
     });
   }
@@ -104,7 +89,6 @@ class BookshelfConnector extends Component {
 
   onMediaTypeChange = (mediaType) => {
     this.props.setSelectedMediaType({ mediaType });
-    this.props.clearBooks();
   };
 
   onUpdateSelectedPress = (payload) => {
@@ -132,8 +116,8 @@ BookshelfConnector.propTypes = {
   setBookshelfSort: PropTypes.func.isRequired,
   setBookshelfFilter: PropTypes.func.isRequired,
   setSelectedMediaType: PropTypes.func.isRequired,
-  clearBooks: PropTypes.func.isRequired,
-  fetchBooks: PropTypes.func.isRequired,
+  clearBookshelf: PropTypes.func.isRequired,
+  fetchBookshelfAuthors: PropTypes.func.isRequired,
   saveBookshelf: PropTypes.func.isRequired
 };
 

frontend/src/Bookshelf/BookshelfRow.css

@@ -42,3 +42,7 @@
   flex-wrap: wrap;
   min-width: 400px;
 }
+
+.booksLoading {
+  margin: 0;
+}

frontend/src/Bookshelf/BookshelfRow.css.d.ts

@@ -2,6 +2,7 @@
 // Please do not change this file!
 interface CssExports {
   'books': string;
+  'booksLoading': string;
   'cell': string;
   'selectCell': string;
   'status': string;

frontend/src/Bookshelf/BookshelfRow.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import AuthorNameLink from 'Author/AuthorNameLink';
 import { getAuthorStatusDetails } from 'Author/AuthorStatus';
 import Icon from 'Components/Icon';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
 import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
 import BookshelfBook from './BookshelfBook';
@@ -20,6 +21,7 @@ class BookshelfRow extends Component {
       titleSlug,
       authorName,
       books,
+      isBooksLoaded,
       isSelected,
       onSelectedChange,
       onBookMonitoredPress
@@ -54,6 +56,14 @@ class BookshelfRow extends Component {
         </VirtualTableRowCell>
 
         <VirtualTableRowCell className={styles.books}>
+          {
+            !isBooksLoaded && !books.length &&
+              <LoadingIndicator
+                className={styles.booksLoading}
+                size={20}
+              />
+          }
+
           {
             books.map((book) => {
               return (
@@ -77,6 +87,7 @@ BookshelfRow.propTypes = {
   titleSlug: PropTypes.string.isRequired,
   authorName: PropTypes.string.isRequired,
   books: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isBooksLoaded: PropTypes.bool.isRequired,
   isSelected: PropTypes.bool,
   onSelectedChange: PropTypes.func.isRequired,
   onBookMonitoredPress: PropTypes.func.isRequired

frontend/src/Bookshelf/BookshelfRowConnector.js

@@ -4,6 +4,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { toggleBooksMonitored } from 'Store/Actions/bookActions';
+import { fetchBookshelfBooks, getBookshelfBookKey } from 'Store/Actions/bookshelfActions';
 import createAuthorSelector from 'Store/Selectors/createAuthorSelector';
 import BookshelfRow from './BookshelfRow';
 
@@ -23,7 +24,8 @@ function createMapStateToProps() {
     createAuthorSelector(),
     getBookMap,
     (state, props) => props.selectedMediaType,
-    (author, bookMap, selectedMediaType) => {
+    (state, props) => state.bookshelf.loadedBookKeys[getBookshelfBookKey(props.selectedMediaType, props.authorId)] === true,
+    (author, bookMap, selectedMediaType, isBooksLoaded) => {
       const booksInAuthor = bookMap.hasOwnProperty(author.id) ? bookMap[author.id] : [];
       const sortedBooks = _.orderBy(
         booksInAuthor.filter((book) => book.mediaType === selectedMediaType),
@@ -36,18 +38,47 @@ function createMapStateToProps() {
         authorId: author.id,
         authorName: author.authorName,
         status: author.status,
-        books: sortedBooks
+        books: sortedBooks,
+        isBooksLoaded
       };
     }
   );
 }
 
 const mapDispatchToProps = {
-  toggleBooksMonitored
+  toggleBooksMonitored,
+  fetchBookshelfBooks
 };
 
 class BookshelfRowConnector extends Component {
 
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    this.fetchBooksIfNeeded();
+  }
+
+  componentDidUpdate() {
+    this.fetchBooksIfNeeded();
+  }
+
+  fetchBooksIfNeeded() {
+    const {
+      authorId,
+      selectedMediaType,
+      isBooksLoaded
+    } = this.props;
+
+    // Repeat calls are ignored until the author's books arrive.
+    if (!isBooksLoaded) {
+      this.props.fetchBookshelfBooks({
+        authorId,
+        mediaType: selectedMediaType
+      });
+    }
+  }
+
   //
   // Listeners
 
@@ -75,7 +106,9 @@ class BookshelfRowConnector extends Component {
 BookshelfRowConnector.propTypes = {
   authorId: PropTypes.number.isRequired,
   selectedMediaType: PropTypes.oneOf(['audiobook', 'ebook']).isRequired,
-  toggleBooksMonitored: PropTypes.func.isRequired
+  isBooksLoaded: PropTypes.bool.isRequired,
+  toggleBooksMonitored: PropTypes.func.isRequired,
+  fetchBookshelfBooks: PropTypes.func.isRequired
 };
 
 export default connect(createMapStateToProps, mapDispatchToProps)(BookshelfRowConnector);