Fixed: Error refreshing page on Activity/Wanted

4 years ago · bb409b9929
parent cc0fea2aab
commit bb409b9929
10 changed files with 65 additions and 21 deletions
--- a/frontend/src/Activity/Blacklist/Blacklist.js
+++ b/frontend/src/Activity/Blacklist/Blacklist.js
@ -22,6 +22,8 @@ class Blacklist extends Component {
    const {
      isFetching,
      isPopulated,
+      isAuthorFetching,
+      isAuthorPopulated,
      error,
      items,
      columns,
@ -31,6 +33,9 @@ class Blacklist extends Component {
      ...otherProps
    } = this.props;

+    const isAllPopulated = isPopulated && isAuthorPopulated;
+    const isAnyFetching = isFetching || isAuthorFetching;
+
    return (
      <PageContent title="Blacklist">
        <PageToolbar>
@ -58,24 +63,24 @@ class Blacklist extends Component {

        <PageContentBodyConnector>
          {
-            isFetching && !isPopulated &&
+            isAnyFetching && !isAllPopulated &&
              <LoadingIndicator />
          }

          {
-            !isFetching && !!error &&
+            !isAnyFetching && !!error &&
              <div>Unable to load blacklist</div>
          }

          {
-            isPopulated && !error && !items.length &&
+            isAllPopulated && !error && !items.length &&
              <div>
                No history blacklist
              </div>
          }

          {
-            isPopulated && !error && !!items.length &&
+            isAllPopulated && !error && !!items.length &&
              <div>
                <Table
                  columns={columns}
@ -110,6 +115,8 @@ class Blacklist extends Component {
 }

 Blacklist.propTypes = {
+  isAuthorFetching: PropTypes.bool.isRequired,
+  isAuthorPopulated: PropTypes.bool.isRequired,
  isFetching: PropTypes.bool.isRequired,
  isPopulated: PropTypes.bool.isRequired,
  error: PropTypes.object,
--- a/frontend/src/Activity/Blacklist/BlacklistConnector.js
+++ b/frontend/src/Activity/Blacklist/BlacklistConnector.js
@ -13,9 +13,12 @@ import Blacklist from './Blacklist';
 function createMapStateToProps() {
  return createSelector(
    (state) => state.blacklist,
+    (state) => state.authors,
    createCommandExecutingSelector(commandNames.CLEAR_BLACKLIST),
-    (blacklist, isClearingBlacklistExecuting) => {
+    (blacklist, authors, isClearingBlacklistExecuting) => {
      return {
+        isAuthorFetching: authors.isFetching,
+        isAuthorPopulated: authors.isPopulated,
        isClearingBlacklistExecuting,
        ...blacklist
      };
--- a/frontend/src/Activity/History/History.js
+++ b/frontend/src/Activity/History/History.js
@ -51,6 +51,8 @@ class History extends Component {
      selectedFilterKey,
      filters,
      totalRecords,
+      isAuthorFetching,
+      isAuthorPopulated,
      isBooksFetching,
      isBooksPopulated,
      booksError,
@ -59,8 +61,8 @@ class History extends Component {
      ...otherProps
    } = this.props;

-    const isFetchingAny = isFetching || isBooksFetching;
-    const isAllPopulated = isPopulated && (isBooksPopulated || !items.length);
+    const isFetchingAny = isFetching || isAuthorFetching || isBooksFetching;
+    const isAllPopulated = isPopulated && ((isAuthorPopulated && isBooksPopulated) || !items.length);
    const hasError = error || booksError;

    return (
@ -162,6 +164,8 @@ History.propTypes = {
  selectedFilterKey: PropTypes.string.isRequired,
  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
  totalRecords: PropTypes.number,
+  isAuthorFetching: PropTypes.bool.isRequired,
+  isAuthorPopulated: PropTypes.bool.isRequired,
  isBooksFetching: PropTypes.bool.isRequired,
  isBooksPopulated: PropTypes.bool.isRequired,
  booksError: PropTypes.object,
--- a/frontend/src/Activity/History/HistoryConnector.js
+++ b/frontend/src/Activity/History/HistoryConnector.js
@ -13,9 +13,12 @@ import History from './History';
 function createMapStateToProps() {
  return createSelector(
    (state) => state.history,
+    (state) => state.authors,
    (state) => state.books,
-    (history, books) => {
+    (history, authors, books) => {
      return {
+        isAuthorFetching: authors.isFetching,
+        isAuthorPopulated: authors.isPopulated,
        isBooksFetching: books.isFetching,
        isBooksPopulated: books.isPopulated,
        booksError: books.error,
--- a/frontend/src/Activity/Queue/Queue.js
+++ b/frontend/src/Activity/Queue/Queue.js
@ -125,6 +125,8 @@ class Queue extends Component {
      isPopulated,
      error,
      items,
+      isAuthorFetching,
+      isAuthorPopulated,
      isBooksFetching,
      isBooksPopulated,
      booksError,
@ -145,8 +147,8 @@ class Queue extends Component {
      isPendingSelected
    } = this.state;

-    const isRefreshing = isFetching || isBooksFetching || isRefreshMonitoredDownloadsExecuting;
-    const isAllPopulated = isPopulated && (isBooksPopulated || !items.length || items.every((e) => !e.bookId));
+    const isRefreshing = isFetching || isAuthorFetching || isBooksFetching || isRefreshMonitoredDownloadsExecuting;
+    const isAllPopulated = isPopulated && ((isAuthorPopulated && isBooksPopulated) || !items.length || items.every((e) => !e.bookId));
    const hasError = error || booksError;
    const selectedIds = this.getSelectedIds();
    const selectedCount = selectedIds.length;
@ -280,6 +282,8 @@ Queue.propTypes = {
  isPopulated: PropTypes.bool.isRequired,
  error: PropTypes.object,
  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isAuthorFetching: PropTypes.bool.isRequired,
+  isAuthorPopulated: PropTypes.bool.isRequired,
  isBooksFetching: PropTypes.bool.isRequired,
  isBooksPopulated: PropTypes.bool.isRequired,
  booksError: PropTypes.object,
--- a/frontend/src/Activity/Queue/QueueConnector.js
+++ b/frontend/src/Activity/Queue/QueueConnector.js
@ -15,12 +15,15 @@ import Queue from './Queue';

 function createMapStateToProps() {
  return createSelector(
+    (state) => state.authors,
    (state) => state.books,
    (state) => state.queue.options,
    (state) => state.queue.paged,
    createCommandExecutingSelector(commandNames.REFRESH_MONITORED_DOWNLOADS),
-    (books, options, queue, isRefreshMonitoredDownloadsExecuting) => {
+    (authors, books, options, queue, isRefreshMonitoredDownloadsExecuting) => {
      return {
+        isAuthorFetching: authors.isFetching,
+        isAuthorPopulated: authors.isPopulated,
        isBooksFetching: books.isFetching,
        isBooksPopulated: books.isPopulated,
        booksError: books.error,
--- a/frontend/src/Wanted/CutoffUnmet/CutoffUnmet.js
+++ b/frontend/src/Wanted/CutoffUnmet/CutoffUnmet.js
@ -113,6 +113,8 @@ class CutoffUnmet extends Component {
      isPopulated,
      error,
      items,
+      isAuthorFetching,
+      isAuthorPopulated,
      selectedFilterKey,
      filters,
      columns,
@ -130,6 +132,9 @@ class CutoffUnmet extends Component {
      isConfirmSearchAllCutoffUnmetModalOpen
    } = this.state;

+    const isAllPopulated = isPopulated && isAuthorPopulated;
+    const isAnyFetching = isFetching || isAuthorFetching;
+
    const itemsSelected = !!this.getSelectedIds().length;
    const isShowingMonitored = getMonitoredValue(this.props);

@ -178,26 +183,26 @@ class CutoffUnmet extends Component {

        <PageContentBodyConnector>
          {
-            isFetching && !isPopulated &&
+            isAnyFetching && !isAllPopulated &&
              <LoadingIndicator />
          }

          {
-            !isFetching && error &&
+            !isAnyFetching && error &&
              <div>
                Error fetching cutoff unmet
              </div>
          }

          {
-            isPopulated && !error && !items.length &&
+            isAllPopulated && !error && !items.length &&
              <div>
                No cutoff unmet items
              </div>
          }

          {
-            isPopulated && !error && !!items.length &&
+            isAllPopulated && !error && !!items.length &&
              <div>
                <Table
                  columns={columns}
@ -261,6 +266,8 @@ CutoffUnmet.propTypes = {
  isPopulated: PropTypes.bool.isRequired,
  error: PropTypes.object,
  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isAuthorFetching: PropTypes.bool.isRequired,
+  isAuthorPopulated: PropTypes.bool.isRequired,
  selectedFilterKey: PropTypes.string.isRequired,
  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
--- a/frontend/src/Wanted/CutoffUnmet/CutoffUnmetConnector.js
+++ b/frontend/src/Wanted/CutoffUnmet/CutoffUnmetConnector.js
@ -17,10 +17,13 @@ import CutoffUnmet from './CutoffUnmet';
 function createMapStateToProps() {
  return createSelector(
    (state) => state.wanted.cutoffUnmet,
+    (state) => state.authors,
    createCommandExecutingSelector(commandNames.CUTOFF_UNMET_BOOK_SEARCH),
-    (cutoffUnmet, isSearchingForCutoffUnmetBooks) => {
+    (cutoffUnmet, authors, isSearchingForCutoffUnmetBooks) => {

      return {
+        isAuthorFetching: authors.isFetching,
+        isAuthorPopulated: authors.isPopulated,
        isSearchingForCutoffUnmetBooks,
        isSaving: cutoffUnmet.items.filter((m) => m.isSaving).length > 1,
        ...cutoffUnmet
--- a/frontend/src/Wanted/Missing/Missing.js
+++ b/frontend/src/Wanted/Missing/Missing.js
@ -122,6 +122,8 @@ class Missing extends Component {
      isPopulated,
      error,
      items,
+      isAuthorFetching,
+      isAuthorPopulated,
      selectedFilterKey,
      filters,
      columns,
@ -140,6 +142,9 @@ class Missing extends Component {
      isInteractiveImportModalOpen
    } = this.state;

+    const isAllPopulated = isPopulated && isAuthorPopulated;
+    const isAnyFetching = isFetching || isAuthorFetching;
+
    const itemsSelected = !!this.getSelectedIds().length;
    const isShowingMonitored = getMonitoredValue(this.props);

@ -195,26 +200,26 @@ class Missing extends Component {

        <PageContentBodyConnector>
          {
-            isFetching && !isPopulated &&
+            isAnyFetching && !isAllPopulated &&
              <LoadingIndicator />
          }

          {
-            !isFetching && error &&
+            !isAnyFetching && error &&
              <div>
                Error fetching missing items
              </div>
          }

          {
-            isPopulated && !error && !items.length &&
+            isAllPopulated && !error && !items.length &&
              <div>
                No missing items
              </div>
          }

          {
-            isPopulated && !error && !!items.length &&
+            isAllPopulated && !error && !!items.length &&
              <div>
                <Table
                  columns={columns}
@ -284,6 +289,8 @@ Missing.propTypes = {
  isPopulated: PropTypes.bool.isRequired,
  error: PropTypes.object,
  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isAuthorFetching: PropTypes.bool.isRequired,
+  isAuthorPopulated: PropTypes.bool.isRequired,
  selectedFilterKey: PropTypes.string.isRequired,
  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
--- a/frontend/src/Wanted/Missing/MissingConnector.js
+++ b/frontend/src/Wanted/Missing/MissingConnector.js
@ -16,10 +16,13 @@ import Missing from './Missing';
 function createMapStateToProps() {
  return createSelector(
    (state) => state.wanted.missing,
+    (state) => state.authors,
    createCommandExecutingSelector(commandNames.MISSING_BOOK_SEARCH),
-    (missing, isSearchingForMissingBooks) => {
+    (missing, authors, isSearchingForMissingBooks) => {

      return {
+        isAuthorFetching: authors.isFetching,
+        isAuthorPopulated: authors.isPopulated,
        isSearchingForMissingBooks,
        isSaving: missing.items.filter((m) => m.isSaving).length > 1,
        ...missing