Headings on responsive (flex); GridItem trigger image load

src/js/components/ArtistGrid.js

@@ -1,17 +1,16 @@
 
 import React from 'react';
 import { connect } from 'react-redux';
-import { createStore, bindActionCreators } from 'redux';
+import { bindActionCreators } from 'redux';
 
-import Thumbnail from './Thumbnail';
 import GridItem from './GridItem';
 
 import * as helpers from '../helpers';
 import * as uiActions from '../services/ui/actions';
 import * as lastfmActions from '../services/lastfm/actions';
-import * as discogsActions from '../services/discogs/actions';
+import * as spotifyActions from '../services/spotify/actions';
 
-class ArtistGrid extends React.Component {
+class ArtistGrid extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -28,28 +27,42 @@ class ArtistGrid extends React.Component {
   }
 
   render() {
-    if (this.props.artists) {
+    const {
+      artists,
+      albums,
+      className: classNameProp,
+      single_row,
+      mini,
+      show_source_icon,
+      history,
+      spotifyActions,
+      spotifyAvailable,
+      lastfmActions,
+    } = this.props;
+
+    if (artists) {
       let className = 'grid grid--artists';
-      if (this.props.className) className += ` ${this.props.className}`;
-      if (this.props.single_row) className += ' grid--single-row';
-      if (this.props.mini) className += ' grid--mini';
+      if (classNameProp) className += ` ${classNameProp}`;
+      if (single_row) className += ' grid--single-row';
+      if (mini) className += ' grid--mini';
 
       return (
         <div className={className}>
           {
-						this.props.artists.map((item) => {
-						  const artist = helpers.collate(item, { albums: this.props.albums });
+						artists.map((item) => {
+						  const artist = helpers.collate(item, { albums: albums });
 						  return (
-  <GridItem
-    key={artist.uri}
-    type="artist"
-    item={artist}
-    show_source_icon={this.props.show_source_icon}
-    onClick={(e) => { this.props.history.push(`/artist/${encodeURIComponent(artist.uri)}`); }}
-    discogsActions={this.props.discogsActions}
-    lastfmActions={this.props.lastfmActions}
-    onContextMenu={(e) => this.handleContextMenu(e, artist)}
-  />
+                <GridItem
+                  key={artist.uri}
+                  type="artist"
+                  item={artist}
+                  show_source_icon={show_source_icon}
+                  onClick={(e) => { history.push(`/artist/${encodeURIComponent(artist.uri)}`); }}
+                  lastfmActions={lastfmActions}
+                  spotifyActions={spotifyActions}
+                  spotifyAvailable={spotifyAvailable}
+                  onContextMenu={(e) => this.handleContextMenu(e, artist)}
+                />
 						  );
 						})
 					}
@@ -62,12 +75,13 @@ class ArtistGrid extends React.Component {
 
 const mapStateToProps = (state, ownProps) => ({
   albums: state.core.albums,
+  spotifyAvailable: state.spotify.access_token !== null,
 });
 
 const mapDispatchToProps = (dispatch) => ({
   uiActions: bindActionCreators(uiActions, dispatch),
   lastfmActions: bindActionCreators(lastfmActions, dispatch),
-  discogsActions: bindActionCreators(discogsActions, dispatch),
+  spotifyActions: bindActionCreators(spotifyActions, dispatch),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(ArtistGrid);

src/js/components/GridItem.js

@@ -9,7 +9,12 @@ import ArtistSentence from './ArtistSentence';
 
 export default class GridItem extends React.Component {
   componentDidMount() {
-    const { discogsActions, lastfmActions, item } = this.props;
+    const {
+      lastfmActions,
+      spotifyActions,
+      spotifyAvailable,
+      item,
+    } = this.props;
     if (!item) return;
 
     // If the item that has just been mounted doesn't have images,
@@ -17,9 +22,8 @@ export default class GridItem extends React.Component {
     if (!item.images) {
       switch (helpers.uriType(item.uri)) {
         case 'artist':
-          if (discogsActions) {
-            // TODO: See if we can remove this, and only get on demand to prevent killing quota
-            // discogsActions.getArtistImages(item.uri, item);
+          if (spotifyActions && spotifyAvailable) {
+            spotifyActions.getArtistImages(item);
           }
           break;
 

src/js/services/discogs/actions.js

@@ -25,8 +25,7 @@ const sendRequest = (dispatch, getState, endpoint, params) => new Promise((resol
     mode: 'cors',
     headers: {
       'User-Agent': 'Iris/1.0',
-      'Authorization': `Discogs key=${key}, secret=${secret}`,
-      'X-Cache': 'true',
+      'Authorization': `Discogs key=${key}, secret=${secret}`
     },
   };
 

src/js/services/mopidy/middleware.js

@@ -2111,7 +2111,11 @@ const MopidyMiddleware = (function () {
             const existing_artist = store.getState().core.artists[artist.uri];
             if (existing_artist) {
               if (!existing_artist.images) {
-                store.dispatch(discogsActions.getArtistImages(artist.uri, artist));
+                if (store.getState().spotify.access_token) {
+                  store.dispatch(spotifyActions.getArtistImages(artist));
+                } else {
+                  store.dispatch(discogsActions.getArtistImages(artist.uri, artist));
+                }
               }
 
               // Get biography and other stats from LastFM

src/js/services/spotify/actions.js

@@ -1177,6 +1177,29 @@ export function getArtists(uris) {
   };
 }
 
+// Used to get images for non-Spotify artists
+export function getArtistImages(artist) {
+  return (dispatch, getState) => {
+    request(dispatch, getState, `search?q=${artist.name}&type=artist`)
+      .then(response => {
+          if (response.artists.items) {
+            const updatedArtist = {
+              uri: artist.uri,
+              images: response.artists.items[0].images,
+            }
+            dispatch(coreActions.artistLoaded(updatedArtist));
+          }
+        },
+        error => {
+          dispatch(coreActions.handleException(
+            'Could not load artists',
+            error,
+          ));
+        },
+      );
+  };
+}
+
 
 export function playArtistTopTracks(uri) {
   return (dispatch, getState) => {