Upgrading other playlist views to use playlist providers selector

src/js/views/library/LibraryPlaylists.js

@@ -18,6 +18,7 @@ import Loader from '../../components/Loader';
 import {
   makeLibrarySelector,
   makeProcessProgressSelector,
+  makeProvidersSelector,
   getLibrarySource,
 } from '../../util/selectors';
 
@@ -44,16 +45,14 @@ class LibraryPlaylists extends React.Component {
 
     setWindowTitle(i18n('library.playlists.title'));
 
-    this.getMopidyLibrary();
-    this.getSpotifyLibrary();
+    this.getLibraries();
   }
 
   refresh = () => {
     const { uiActions: { hideContextMenu } } = this.props;
 
     hideContextMenu();
-    this.getMopidyLibrary(true);
-    this.getSpotifyLibrary(true);
+    this.getLibraries(true);
   }
 
   cancelRefresh = () => {
@@ -63,46 +62,35 @@ class LibraryPlaylists extends React.Component {
     cancelProcess(processKeys);
   }
 
-  getMopidyLibrary = (forceRefetch = false) => {
-    const {
-      source,
-      coreActions: {
-        loadLibrary,
-      },
-    } = this.props;
-
-    if (source !== 'local' && source !== 'all') return;
-
-    loadLibrary('mopidy:library:playlists', 'playlists', { forceRefetch });
-  };
-
-  getSpotifyLibrary = (forceRefetch = false) => {
-    const {
-      source,
-      spotify_available,
-      coreActions: {
-        loadLibrary,
-      },
-    } = this.props;
-
-    if (!spotify_available) return;
-    if (source !== 'spotify' && source !== 'all') return;
-
-    loadLibrary('spotify:library:playlists', 'playlists', { forceRefetch });
-  };
-
   componentDidUpdate = ({ source: prevSource }) => {
     const { source } = this.props;
 
     if (source !== prevSource) {
-      this.getMopidyLibrary();
-      this.getSpotifyLibrary();
+      this.getLibraries();
     }
   }
 
+  getLibraries = (forceRefetch = false) => {
+    const {
+      source,
+      providers,
+      coreActions: {
+        loadLibrary,
+      },
+    } = this.props;
+
+    let uris = [];
+    if (source === 'all') {
+      uris = providers.map((p) => p.uri);
+    } else {
+      uris.push(source);
+    }
+    uris.forEach((uri) => loadLibrary(uri, 'playlists', { forceRefetch }));
+  };
+
   setSort(value) {
     let reverse = false;
-    if (this.props.sort == value) reverse = !this.props.sort_reverse;
+    if (this.props.sort === value) reverse = !this.props.sort_reverse;
 
     const data = {
       library_playlists_sort_reverse: reverse,
@@ -169,7 +157,7 @@ class LibraryPlaylists extends React.Component {
   render = () => {
     const {
       uiActions,
-      spotify_available,
+      providers,
       source,
       sort,
       sort_reverse,
@@ -180,24 +168,6 @@ class LibraryPlaylists extends React.Component {
       filter,
     } = this.state;
 
-    const source_options = [
-      {
-        value: 'all',
-        label: i18n('fields.filters.all'),
-      },
-      {
-        value: 'local',
-        label: i18n('services.mopidy.local'),
-      },
-    ];
-
-    if (spotify_available) {
-      source_options.push({
-        value: 'spotify',
-        label: i18n('services.spotify.title'),
-      });
-    }
-
     const view_options = [
       {
         value: 'thumbnails',
@@ -269,7 +239,13 @@ class LibraryPlaylists extends React.Component {
           name={i18n('fields.source')}
           valueAsLabel
           value={source}
-          options={source_options}
+          options={[
+            {
+              value: 'all',
+              label: i18n('fields.filters.all'),
+            },
+            ...providers.map((p) => ({ value: p.uri, label: p.title })),
+          ]}
           handleChange={(value) => { uiActions.set({ library_playlists_source: value }); uiActions.hideContextMenu(); }}
         />
         <Button
@@ -307,6 +283,7 @@ class LibraryPlaylists extends React.Component {
 
 const librarySelector = makeLibrarySelector('playlists');
 const processProgressSelector = makeProcessProgressSelector(processKeys);
+const providersSelector = makeProvidersSelector('playlists');
 const mapStateToProps = (state) => {
   const {
     spotify: {
@@ -318,8 +295,7 @@ const mapStateToProps = (state) => {
 
   return {
     slim_mode: state.ui.slim_mode,
-    mopidy_uri_schemes: state.mopidy.uri_schemes,
-    spotify_available: state.spotify.access_token,
+    providers: providersSelector(state),
     playlists: librarySelector(state, 'playlists'),
     loading_progress: processProgressSelector(state),
     source: getLibrarySource(state, 'playlists'),

src/js/views/modals/AddToPlaylist.js

@@ -12,8 +12,12 @@ import * as spotifyActions from '../../services/spotify/actions';
 import { sourceIcon } from '../../util/helpers';
 import { sortItems } from '../../util/arrays';
 import { I18n, i18n } from '../../locale';
-import { collate, decodeUri } from '../../util/format';
-import { makeProcessProgressSelector } from '../../util/selectors';
+import { decodeUri } from '../../util/format';
+import {
+  makeProcessProgressSelector,
+  makeProvidersSelector,
+  makeLibrarySelector,
+} from '../../util/selectors';
 
 const processKeys = [
   'MOPIDY_GET_LIBRARY_PLAYLISTS',
@@ -23,32 +27,26 @@ const processKeys = [
 class AddToPlaylist extends React.Component {
   componentDidMount = () => {
     const {
-      spotify_library: {
-        items_uris: spotify_library,
-      },
-      mopidy_library: {
-        items_uris: mopidy_library,
-      },
-      spotify_available,
-      coreActions: {
-        loadLibrary,
-      },
       uiActions: {
         setWindowTitle,
       },
     } = this.props;
 
-    if (!spotify_library.length && spotify_available) {
-      loadLibrary('spotify:library:playlists', 'playlists');
-    }
-
-    if (!mopidy_library.length) {
-      loadLibrary('mopidy:library:playlists', 'playlists');
-    }
-
+    this.getLibraries();
     setWindowTitle(i18n('modal.add_to_playlist.title'));
   }
 
+  getLibraries = () => {
+    const {
+      providers,
+      coreActions: {
+        loadLibrary,
+      },
+    } = this.props;
+
+    providers.forEach((provider) => loadLibrary(provider.uri, 'playlists'));
+  };
+
   playlistSelected = (playlist_uri) => {
     const {
       coreActions: {
@@ -62,9 +60,7 @@ class AddToPlaylist extends React.Component {
 
   renderList = () => {
     const {
-      items,
-      spotify_library = { items_uris: [] },
-      mopidy_library = { items_uris: [] },
+      playlists: allPlaylists,
       loading_progress,
     } = this.props;
 
@@ -72,11 +68,7 @@ class AddToPlaylist extends React.Component {
       return <Loader body loading progress={loading_progress} />;
     }
 
-    let playlists = [
-      ...(collate(spotify_library, { items }).items),
-      ...(collate(mopidy_library, { items }).items),
-    ].filter((playlist) => playlist.can_edit);
-
+    let playlists = allPlaylists.filter((playlist) => playlist.can_edit);
     playlists = sortItems(playlists, 'name');
 
     if (playlists.length > 0) {
@@ -128,6 +120,9 @@ class AddToPlaylist extends React.Component {
   }
 }
 
+const librarySelector = makeLibrarySelector('playlists');
+const processProgressSelector = makeProcessProgressSelector(processKeys);
+const providersSelector = makeProvidersSelector('playlists');
 const mapStateToProps = (state, ownProps) => {
   const {
     spotify: {
@@ -136,29 +131,18 @@ const mapStateToProps = (state, ownProps) => {
       } = {},
       access_token: spotify_available,
     },
-    core: {
-      playlists,
-      items,
-      libraries,
-    },
-    mopidy: {
-      uri_schemes: mopidy_uri_schemes,
-    },
   } = state;
-  const processProgressSelector = makeProcessProgressSelector(processKeys);
-  const unencodedUris = ownProps.match.params?.uris.split(',');
-  const uris = unencodedUris ? unencodedUris.map((uri) => decodeUri(uri)) : [];
+
+  const unencodedUris = ownProps.match.params?.uris;
+  const uris = unencodedUris ? decodeUri(unencodedUris).split(',') : [];
 
   return {
     uris,
-    mopidy_uri_schemes,
-    items,
-    mopidy_library: libraries['mopidy:library:playlists'] || { items_uris: [] },
-    spotify_library: libraries['spotify:library:playlists'] || { items_uris: [] },
+    providers: providersSelector(state),
+    playlists: librarySelector(state, 'playlists'),
     spotify_available,
     loading_progress: processProgressSelector(state),
     me_id,
-    playlists,
   };
 };