Fix Interactive Import, Add Track Actions and Reducers

frontend/src/InteractiveImport/Album/SelectAlbumModalContent.js

@@ -5,6 +5,7 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import ModalBody from 'Components/Modal/ModalBody';
 import ModalFooter from 'Components/Modal/ModalFooter';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import SelectAlbumRow from './SelectAlbumRow';
 
 class SelectAlbumModalContent extends Component {
@@ -16,7 +17,8 @@ class SelectAlbumModalContent extends Component {
     const {
       items,
       onAlbumSelect,
-      onModalClose
+      onModalClose,
+      isFetching
     } = this.props;
 
     return (
@@ -26,6 +28,10 @@ class SelectAlbumModalContent extends Component {
         </ModalHeader>
 
         <ModalBody>
+          {
+            isFetching &&
+              <LoadingIndicator />
+          }
           {
             items.map((item) => {
               return (
@@ -52,6 +58,7 @@ class SelectAlbumModalContent extends Component {
 
 SelectAlbumModalContent.propTypes = {
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isFetching: PropTypes.bool.isRequired,
   onAlbumSelect: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired
 };

frontend/src/InteractiveImport/Album/SelectAlbumModalContentConnector.js

@@ -2,28 +2,48 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import connectSection from 'Store/connectSection';
 import { createSelector } from 'reselect';
 import { updateInteractiveImportItem } from 'Store/Actions/interactiveImportActions';
-import createArtistSelector from 'Store/Selectors/createArtistSelector';
+import { fetchEpisodes, setEpisodesSort, clearEpisodes } from 'Store/Actions/episodeActions';
+import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
 import SelectAlbumModalContent from './SelectAlbumModalContent';
 
 function createMapStateToProps() {
   return createSelector(
-    createArtistSelector(),
-    (series) => {
-      return {
-        items: series.albums
-      };
+    createClientSideCollectionSelector(),
+    (episodes) => {
+      return episodes;
     }
   );
 }
 
 const mapDispatchToProps = {
+  fetchEpisodes,
+  setEpisodesSort,
+  clearEpisodes,
   updateInteractiveImportItem
 };
 
 class SelectAlbumModalContentConnector extends Component {
 
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    const {
+      artistId
+    } = this.props;
+
+    this.props.fetchEpisodes({ artistId });
+  }
+
+  componentWillUnmount() {
+    // This clears the albums for the queue and hides the queue
+    // We'll need another place to store albums for manual import
+    this.props.clearEpisodes();
+  }
+
   //
   // Listeners
 
@@ -58,8 +78,17 @@ SelectAlbumModalContentConnector.propTypes = {
   ids: PropTypes.arrayOf(PropTypes.number).isRequired,
   artistId: PropTypes.number.isRequired,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  fetchEpisodes: PropTypes.func.isRequired,
+  setEpisodesSort: PropTypes.func.isRequired,
+  clearEpisodes: PropTypes.func.isRequired,
   updateInteractiveImportItem: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired
 };
 
-export default connect(createMapStateToProps, mapDispatchToProps)(SelectAlbumModalContentConnector);
+export default connectSection(
+                createMapStateToProps,
+                mapDispatchToProps,
+                undefined,
+                undefined,
+                { section: 'episodes' }
+              )(SelectAlbumModalContentConnector);

frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.js

@@ -293,7 +293,7 @@ class InteractiveImportModalContent extends Component {
         <SelectAlbumModal
           isOpen={isSelectAlbumModalOpen}
           ids={selectedIds}
-          artistId={selectedItem && selectedItem.series && selectedItem.series.id}
+          artistId={selectedItem && selectedItem.artist && selectedItem.artist.id}
           onModalClose={this.onSelectAlbumModalClose}
         />
       </ModalContent>

frontend/src/InteractiveImport/Interactive/InteractiveImportRow.js

@@ -177,7 +177,7 @@ class InteractiveImportRow extends Component {
 
     const artistName = artist ? artist.artistName : '';
     const albumTitle = album ? album.title : '';
-    const trackNumbers = tracks.map((episode) => episode.trackNumber)
+    const trackNumbers = tracks.map((track) => track.trackNumber)
                                    .join(', ');
 
     const showArtistPlaceholder = isSelected && !artist;

frontend/src/InteractiveImport/Track/SelectTrackModalContentConnector.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { createSelector } from 'reselect';
 import connectSection from 'Store/connectSection';
-import { fetchEpisodes, setEpisodesSort, clearEpisodes } from 'Store/Actions/episodeActions';
+import { fetchTracks, setTracksSort, clearTracks } from 'Store/Actions/trackActions';
 import { updateInteractiveImportItem } from 'Store/Actions/interactiveImportActions';
 import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
 import SelectTrackModalContent from './SelectTrackModalContent';
@@ -11,16 +11,16 @@ import SelectTrackModalContent from './SelectTrackModalContent';
 function createMapStateToProps() {
   return createSelector(
     createClientSideCollectionSelector(),
-    (episodes) => {
-      return episodes;
+    (tracks) => {
+      return tracks;
     }
   );
 }
 
 const mapDispatchToProps = {
-  fetchEpisodes,
-  setEpisodesSort,
-  clearEpisodes,
+  fetchTracks,
+  setTracksSort,
+  clearTracks,
   updateInteractiveImportItem
 };
 
@@ -35,25 +35,25 @@ class SelectTrackModalContentConnector extends Component {
       albumId
     } = this.props;
 
-    this.props.fetchEpisodes({ artistId, albumId });
+    this.props.fetchTracks({ artistId, albumId });
   }
 
   componentWillUnmount() {
-    // This clears the episodes for the queue and hides the queue
-    // We'll need another place to store episodes for manual import
-    this.props.clearEpisodes();
+    // This clears the tracks for the queue and hides the queue
+    // We'll need another place to store tracks for manual import
+    this.props.clearTracks();
   }
 
   //
   // Listeners
 
   onSortPress = (sortKey, sortDirection) => {
-    this.props.setEpisodesSort({ sortKey, sortDirection });
+    this.props.setTracksSort({ sortKey, sortDirection });
   }
 
-  onTracksSelect = (episodeIds) => {
+  onTracksSelect = (trackIds) => {
     const tracks = _.reduce(this.props.items, (acc, item) => {
-      if (episodeIds.indexOf(item.id) > -1) {
+      if (trackIds.indexOf(item.id) > -1) {
         acc.push(item);
       }
 
@@ -87,9 +87,9 @@ SelectTrackModalContentConnector.propTypes = {
   artistId: PropTypes.number.isRequired,
   albumId: PropTypes.number.isRequired,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
-  fetchEpisodes: PropTypes.func.isRequired,
-  setEpisodesSort: PropTypes.func.isRequired,
-  clearEpisodes: PropTypes.func.isRequired,
+  fetchTracks: PropTypes.func.isRequired,
+  setTracksSort: PropTypes.func.isRequired,
+  clearTracks: PropTypes.func.isRequired,
   updateInteractiveImportItem: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired
 };
@@ -99,5 +99,5 @@ export default connectSection(
                 mapDispatchToProps,
                 undefined,
                 undefined,
-                { section: 'episodes' }
+                { section: 'tracks' }
                )(SelectTrackModalContentConnector);