Context menu for User; Fixing loader for Categories

src/js/views/Album.js

@@ -61,19 +61,6 @@ class Album extends React.Component {
     }
   }
 
-  handleContextMenu = (e) => {
-    const {
-      uri,
-      uiActions: {
-        showContextMenu,
-      },
-    } = this.props;
-
-    e.preventDefault();
-    const data = { uris: [uri] };
-    showContextMenu(e, data, 'album', 'click');
-  }
-
   componentDidUpdate = ({
     uri: prevUri,
     album: prevAlbum,

src/js/views/User.js

@@ -22,6 +22,7 @@ import {
   makeItemSelector,
   makeLoadingSelector,
 } from '../util/selectors';
+import ContextMenuTrigger from '../components/ContextMenuTrigger';
 
 class User extends React.Component {
   componentDidMount() {
@@ -57,6 +58,17 @@ class User extends React.Component {
     if (!prevUser && user) this.setWindowTitle(user);
   }
 
+  handleContextMenu = (e) => {
+    const { user, uri, uiActions: { showContextMenu } } = this.props;
+
+    showContextMenu({
+      e,
+      context: 'user',
+      items: [user],
+      uris: [uri],
+    });
+  }
+
   setWindowTitle = (user = this.props.user) => {
     const {
       uiActions: { setWindowTitle },
@@ -139,6 +151,7 @@ class User extends React.Component {
                       className="primary"
                       uri={user.uri}
                     />
+                    <ContextMenuTrigger onTrigger={this.handleContextMenu} />
                   </div>
                   <h2>
                     <ul className="details">

src/js/views/discover/DiscoverCategories.js

@@ -13,6 +13,7 @@ import {
 } from '../../util/helpers';
 import { i18n, I18n } from '../../locale';
 import { indexToArray } from '../../util/arrays';
+import { makeLoadingSelector } from '../../util/selectors';
 
 class DiscoverCategories extends React.Component {
   componentDidMount() {
@@ -37,22 +38,15 @@ class DiscoverCategories extends React.Component {
 
   render = () => {
     const {
-      load_queue,
-      categories: categoriesProp,
+      loading,
+      categories,
       uiActions,
     } = this.props;
 
-    if (isLoading(load_queue, ['spotify_browse/categories'])) {
-      return (
-        <div className="view discover-categories-view">
-          <Header icon="grid" title={i18n('discover.categories.title')} />
-          <Loader body loading />
-        </div>
-      );
+    if (loading) {
+      return <Loader body loading />;
     }
 
-    const categories = indexToArray(categoriesProp);
-
     return (
       <div className="view discover-categories-view">
         <Header uiActions={uiActions}>
@@ -67,10 +61,14 @@ class DiscoverCategories extends React.Component {
   }
 }
 
-const mapStateToProps = (state) => ({
-  categories: state.spotify.categories,
-  load_queue: state.ui.load_queue,
-});
+const mapStateToProps = (state) => {
+  const loadingSelector = makeLoadingSelector(['(.*)categories(.*)']);
+
+  return {
+    loading: loadingSelector(state),
+    categories: indexToArray(state.spotify.categories),
+  };
+};
 
 const mapDispatchToProps = (dispatch) => ({
   uiActions: bindActionCreators(uiActions, dispatch),

src/js/views/discover/DiscoverCategory.js

@@ -127,7 +127,7 @@ class DiscoverCategory extends React.Component {
 
 const mapStateToProps = (state, ownProps) => {
   const uri = decodeURIComponent(ownProps.match.params.uri);
-  const loadingSelector = makeLoadingSelector([`(.*)${uri}(.*)`]);
+  const loadingSelector = makeLoadingSelector([`spotify_category_${uri}`]);
   const categorySelector = makeItemSelector(uri);
   const category = categorySelector(state);
   let playlists = null;