Fix: Not Loading/Showing Track on History Page

frontend/src/Activity/History/HistoryConnector.js

@@ -7,17 +7,22 @@ import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
 import selectUniqueIds from 'Utilities/Object/selectUniqueIds';
 import * as historyActions from 'Store/Actions/historyActions';
 import { fetchEpisodes, clearEpisodes } from 'Store/Actions/episodeActions';
+import { fetchTracks, clearTracks } from 'Store/Actions/trackActions';
 import History from './History';
 
 function createMapStateToProps() {
   return createSelector(
     (state) => state.history,
     (state) => state.episodes,
-    (history, episodes) => {
+    (state) => state.tracks,
+    (history, episodes, tracks) => {
       return {
         isAlbumsFetching: episodes.isFetching,
         isAlbumsPopulated: episodes.isPopulated,
         episodesError: episodes.error,
+        isTracksFetching: tracks.isFetching,
+        isTracksPopulated: tracks.isPopulated,
+        tracksError: tracks.error,
         ...history
       };
     }
@@ -27,7 +32,9 @@ function createMapStateToProps() {
 const mapDispatchToProps = {
   ...historyActions,
   fetchEpisodes,
-  clearEpisodes
+  clearEpisodes,
+  fetchTracks,
+  clearTracks
 };
 
 class HistoryConnector extends Component {
@@ -43,11 +50,17 @@ class HistoryConnector extends Component {
   componentDidUpdate(prevProps) {
     if (hasDifferentItems(prevProps.items, this.props.items)) {
       const albumIds = selectUniqueIds(this.props.items, 'albumId');
+      const trackIds = selectUniqueIds(this.props.items, 'trackId');
       if (albumIds.length) {
         this.props.fetchEpisodes({ albumIds });
       } else {
         this.props.clearEpisodes();
       }
+      if (trackIds.length) {
+        this.props.fetchTracks({ trackIds });
+      } else {
+        this.props.clearTracks();
+      }
     }
   }
 
@@ -55,6 +68,7 @@ class HistoryConnector extends Component {
     unregisterPagePopulator(this.repopulate);
     this.props.clearHistory();
     this.props.clearEpisodes();
+    this.props.clearTracks();
   }
 
   //
@@ -136,7 +150,9 @@ HistoryConnector.propTypes = {
   setHistoryTableOption: PropTypes.func.isRequired,
   clearHistory: PropTypes.func.isRequired,
   fetchEpisodes: PropTypes.func.isRequired,
-  clearEpisodes: PropTypes.func.isRequired
+  clearEpisodes: PropTypes.func.isRequired,
+  fetchTracks: PropTypes.func.isRequired,
+  clearTracks: PropTypes.func.isRequired
 };
 
 export default connect(createMapStateToProps, mapDispatchToProps)(HistoryConnector);