Misc UI Fixes

frontend/src/Activity/Queue/Queue.js

@@ -6,7 +6,6 @@ import getSelectedIds from 'Utilities/Table/getSelectedIds';
 import selectAll from 'Utilities/Table/selectAll';
 import toggleSelected from 'Utilities/Table/toggleSelected';
 import { icons } from 'Helpers/Props';
-import episodeEntities from 'Episode/episodeEntities';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
@@ -100,7 +99,9 @@ class Queue extends Component {
       isPopulated,
       error,
       items,
+      isAlbumsFetching,
       isAlbumsPopulated,
+      episodesError,
       columns,
       totalRecords,
       isGrabbing,
@@ -118,8 +119,9 @@ class Queue extends Component {
       isPendingSelected
     } = this.state;
 
-    const isRefreshing = isFetching || isCheckForFinishedDownloadExecuting;
+    const isRefreshing = isFetching || isAlbumsFetching || isCheckForFinishedDownloadExecuting;    
     const isAllPopulated = isPopulated && (isAlbumsPopulated || !items.length);
+    const hasError = error || episodesError;
     const selectedCount = this.getSelectedIds().length;
     const disableSelectedActions = selectedCount === 0;
 
@@ -161,21 +163,21 @@ class Queue extends Component {
           }
 
           {
-            !isRefreshing && error &&
+            !isRefreshing && hasError &&
               <div>
                 Failed to load Queue
               </div>
           }
 
           {
-            isAllPopulated && !error && !items.length &&
+            isPopulated && !hasError && !items.length &&
               <div>
                 Queue is empty
               </div>
           }
 
           {
-            isAllPopulated && !error && !!items.length &&
+            isAllPopulated && !hasError && !!items.length &&
               <div>
                 <Table
                   columns={columns}
@@ -191,8 +193,7 @@ class Queue extends Component {
                         return (
                           <QueueRowConnector
                             key={item.id}
-                            episodeId={item.album.id}
-                            episodeEntity={episodeEntities.QUEUE_EPISODES}
+                            episodeId={item.albumId}
                             isSelected={selectedState[item.id]}
                             columns={columns}
                             {...item}
@@ -229,7 +230,9 @@ Queue.propTypes = {
   isPopulated: PropTypes.bool.isRequired,
   error: PropTypes.object,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isAlbumsFetching: PropTypes.bool.isRequired,
   isAlbumsPopulated: PropTypes.bool.isRequired,
+  episodesError: PropTypes.object,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
   totalRecords: PropTypes.number,
   isGrabbing: PropTypes.bool.isRequired,

frontend/src/Activity/Queue/QueueConnector.js

@@ -4,24 +4,27 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
+import selectUniqueIds from 'Utilities/Object/selectUniqueIds';
 import createCommandsSelector from 'Store/Selectors/createCommandsSelector';
 import { executeCommand } from 'Store/Actions/commandActions';
 import * as queueActions from 'Store/Actions/queueActions';
-import { clearEpisodes } from 'Store/Actions/episodeActions';
+import { fetchEpisodes, clearEpisodes } from 'Store/Actions/episodeActions';
 import * as commandNames from 'Commands/commandNames';
 import Queue from './Queue';
 
 function createMapStateToProps() {
   return createSelector(
+    (state) => state.episodes,
     (state) => state.queue.paged,
-    (state) => state.queue.queueEpisodes,
     createCommandsSelector(),
-    (queue, queueEpisodes, commands) => {
+    (episodes, queue, commands) => {
       const isCheckForFinishedDownloadExecuting = _.some(commands, { name: commandNames.CHECK_FOR_FINISHED_DOWNLOAD });
 
       return {
+        isAlbumsFetching: episodes.isFetching,
+        isAlbumsPopulated: episodes.isPopulated,
+        episodesError: episodes.error,
         isCheckForFinishedDownloadExecuting,
-        isAlbumsPopulated: queueEpisodes.isPopulated,
         ...queue
       };
     }
@@ -30,6 +33,7 @@ function createMapStateToProps() {
 
 const mapDispatchToProps = {
   ...queueActions,
+  fetchEpisodes,
   clearEpisodes,
   executeCommand
 };
@@ -45,14 +49,9 @@ class QueueConnector extends Component {
 
   componentDidUpdate(prevProps) {
     if (hasDifferentItems(prevProps.items, this.props.items)) {
-      const episodes = _.uniqBy(_.reduce(this.props.items, (result, item) => {
-        result.push(item.album);
+      const albumIds = selectUniqueIds(this.props.items, 'albumId');
+      this.props.fetchEpisodes({ albumIds });
 
-        return result;
-      }, []), ({ id }) => id);
-
-      this.props.clearEpisodes();
-      this.props.setQueueEpisodes({ episodes });
     }
   }
 
@@ -143,9 +142,9 @@ QueueConnector.propTypes = {
   setQueueSort: PropTypes.func.isRequired,
   setQueueTableOption: PropTypes.func.isRequired,
   clearQueue: PropTypes.func.isRequired,
-  setQueueEpisodes: PropTypes.func.isRequired,
   grabQueueItems: PropTypes.func.isRequired,
   removeQueueItems: PropTypes.func.isRequired,
+  fetchEpisodes: PropTypes.func.isRequired,
   clearEpisodes: PropTypes.func.isRequired,
   executeCommand: PropTypes.func.isRequired
 };

frontend/src/Activity/Queue/QueueRow.js

@@ -63,7 +63,6 @@ class QueueRow extends Component {
     const {
       id,
       downloadId,
-      episodeEntity,
       title,
       status,
       trackedDownloadStatus,
@@ -161,7 +160,6 @@ class QueueRow extends Component {
                     episodeId={episode.id}
                     artistId={series.id}
                     trackFileId={episode.trackFileId}
-                    episodeEntity={episodeEntity}
                     episodeTitle={episode.title}
                     showOpenArtistButton={true}
                   />
@@ -295,7 +293,6 @@ class QueueRow extends Component {
 QueueRow.propTypes = {
   id: PropTypes.number.isRequired,
   downloadId: PropTypes.string,
-  episodeEntity: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
   status: PropTypes.string.isRequired,
   trackedDownloadStatus: PropTypes.string,

frontend/src/Activity/Queue/QueueRowConnector.js

@@ -67,7 +67,6 @@ class QueueRowConnector extends Component {
 
 QueueRowConnector.propTypes = {
   id: PropTypes.number.isRequired,
-  episodeEntity: PropTypes.string.isRequired,
   episode: PropTypes.object,
   grabQueueItem: PropTypes.func.isRequired,
   removeQueueItem: PropTypes.func.isRequired