Replacing all Link with custom Link that scrolls to the top (so we can detect forward vs backward navigation)

src/js/components/ContextMenu.js

@@ -1,6 +1,7 @@
 
 import React, { PropTypes } from 'react'
-import { Link, hashHistory } from 'react-router'
+import { hashHistory } from 'react-router'
+import Link from './Link'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 

src/js/components/DebugInfo.js

@@ -1,7 +1,7 @@
 
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
-import { Link } from 'react-router'
+import Link from './Link'
 import { createStore, bindActionCreators } from 'redux'
 
 import * as helpers from '../helpers'

src/js/components/Fields/AddSeedField.js

@@ -2,8 +2,9 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import { Link, hashHistory } from 'react-router'
+import { hashHistory } from 'react-router'
 
+import Link from '../Link';
 import ArtistSentence from './../ArtistSentence'
 import * as helpers from '../../helpers'
 import * as coreActions from '../../services/core/actions'

src/js/components/Fields/AddTunabilityField.js

@@ -2,7 +2,8 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import { Link, hashHistory } from 'react-router'
+import { hashHistory } from 'react-router'
+import Link from './Link'
 
 import ArtistSentence from './../ArtistSentence'
 import * as helpers from '../../helpers'

src/js/components/Fields/FilterField.js

@@ -1,7 +1,7 @@
 
 import React, { PropTypes } from 'react'
-import { Link } from 'react-router'
 
+import Link from '../Link';
 import Icon from '../Icon';
 
 export default class FilterField extends React.Component{

src/js/components/Fields/FollowButton.js

@@ -1,9 +1,10 @@
 
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
-import { Link } from 'react-router'
 import { createStore, bindActionCreators } from 'redux'
 
+import Link from '../Link';
+
 import * as helpers from '../../helpers'
 import * as uiActions from '../../services/ui/actions'
 import * as spotifyActions from '../../services/spotify/actions'

src/js/components/Fields/LastfmLoveButton.js

@@ -1,9 +1,9 @@
 
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
-import { Link } from 'react-router'
 import { createStore, bindActionCreators } from 'redux'
 
+import Link from '../Link';
 import * as helpers from '../../helpers'
 import * as uiActions from '../../services/ui/actions'
 import * as lastfmActions from '../../services/lastfm/actions'

src/js/components/GridSlider.js

@@ -2,7 +2,8 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { createStore, bindActionCreators } from 'redux'
-import { Link, hashHistory } from 'react-router'
+import { hashHistory } from 'react-router'
+import Link from './Link'
 
 import ArtistSentence from './ArtistSentence'
 import Thumbnail from './Thumbnail'

src/js/components/Link.js

@@ -1,6 +1,6 @@
 
 import React from 'react';
-import { Link } from 'react-router';
+import {Link} from 'react-router';
 
 export default class extends React.Component{
 
@@ -18,7 +18,8 @@ export default class extends React.Component{
 		return (
 			<Link 
 				onClick={e => this.handleClick(e)}
-				className={this.props.className ? this.props.className : null} 
+				className={this.props.className ? this.props.className : null}
+				activeClassName={this.props.activeClassName}
 				to={this.props.to}>
 					{this.props.children}
 			</Link>

src/js/components/Notifications.js

@@ -1,6 +1,7 @@
 
 import React, { PropTypes } from 'react';
-import { Link, hashHistory } from 'react-router';
+import { hashHistory } from 'react-router'
+import Link from './Link';
 import Icon from './Icon';
 
 export default class Notifications extends React.Component{

src/js/components/Parallax.js

@@ -8,7 +8,7 @@ export default class Parallax extends React.Component{
 
 		this.state = {
 			loaded: false,
-			url: ''
+			url: null
 		}
 	}
 
@@ -19,12 +19,21 @@ export default class Parallax extends React.Component{
 	}
 
 	componentWillReceiveProps(nextProps){
-		if ((!this.state.url || nextProps.image != this.state.url ) && nextProps.image){
+		if (nextProps.image != this.state.url){
 			this.loadImage(nextProps.image);
 		}
 	}
 
 	loadImage(url){
+
+		// Reset our image to nothing
+		// This is needed when navigating to new view, but not unmounting the current components
+		// ie one artist to another
+		this.setState({
+			loaded: false,
+			url: null
+		});
+
 		var self = this;
 		var imageObject = new Image();
 		imageObject.src = url;
@@ -46,9 +55,14 @@ export default class Parallax extends React.Component{
 			class_name += " parallax--loaded";
 		}
 
+		var style = {};
+		if (this.state.loaded && this.state.url){
+			style = {backgroundImage: 'url('+this.state.url+')'};
+		}
+
 		return (
 			<div className={class_name}>
-				<div className="parallax__image" style={{backgroundImage: 'url('+this.state.url+')'}}></div>
+				<div className="parallax__image" style={style}></div>
 				<div className="parallax__overlay"></div>
 			</div>
 		);

src/js/components/PlaybackControls.js

@@ -1,7 +1,7 @@
 
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
-import { Link } from 'react-router'
+import Link from './Link'
 import { bindActionCreators } from 'redux'
 
 import ProgressSlider from './Fields/ProgressSlider'

src/js/components/Services.js

@@ -1,7 +1,7 @@
 
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
-import { Link } from 'react-router'
+import Link from './Link'
 import { bindActionCreators } from 'redux'
 
 import Thumbnail from './Thumbnail'

src/js/components/Sidebar.js

@@ -2,8 +2,9 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import { Link, withRouter } from 'react-router'
+import { withRouter } from 'react-router'
 
+import Link from './Link';
 import Icon from './Icon'
 import Dropzones from './Fields/Dropzones'
 import Thumbnail from './Thumbnail'

src/js/components/Snapcast.js

@@ -2,7 +2,8 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Link, hashHistory } from 'react-router';
+import { hashHistory } from 'react-router'
+import Link from './Link';
 
 import VolumeControl from './Fields/VolumeControl';
 import MuteControl from './Fields/MuteControl';

src/js/components/Thumbnail.js

@@ -2,7 +2,7 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { createStore, bindActionCreators } from 'redux';
-import { Link } from 'react-router';
+import Link from './Link';
 
 import Icon from './Icon'
 

src/js/components/Track.js

@@ -1,6 +1,6 @@
 
 import React, { PropTypes } from 'react'
-import { Link } from 'react-router'
+import Link from './Link'
 
 import Icon from './Icon'
 import ArtistSentence from './ArtistSentence'

src/js/views/Artist.js

@@ -2,8 +2,8 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import { Link } from 'react-router'
 
+import Link from '../components/Link';
 import LazyLoadListener from '../components/LazyLoadListener'
 import Header from '../components/Header'
 import TrackList from '../components/TrackList'
@@ -223,7 +223,7 @@ class Artist extends React.Component{
 
 						<div className="col col--w5"></div>
 
-						{artist.related_artists ? <div className="col col--w25 related-artists"><h4>Related artists</h4><div className="list-wrapper"><RelatedArtists artists={artist.related_artists.slice(0,6)} /></div><Link to={global.baseURL+'artist/'+artist.uri+'/related-artists'} className="button grey">All related artists</Link></div> : null}
+						{artist.related_artists && artist.related_artists.length > 0 ? <div className="col col--w25 related-artists"><h4>Related artists</h4><div className="list-wrapper"><RelatedArtists artists={artist.related_artists.slice(0,6)} /></div><Link to={global.baseURL+'artist/'+artist.uri+'/related-artists'} className="button grey">All related artists</Link></div> : null}
 
 						<div className="cf"></div>
 

src/js/views/Debug.js

@@ -1,12 +1,13 @@
 
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
-import { Link, hashHistory } from 'react-router'
+import { hashHistory } from 'react-router'
 import { bindActionCreators } from 'redux'
 
 import Header from '../components/Header'
 import Thumbnail from '../components/Thumbnail'
 import Icon from '../components/Icon'
+import Link from '../components/Link';
 
 import * as uiActions from '../services/ui/actions'
 import * as pusherActions from '../services/pusher/actions'

src/js/views/Playlist.js

@@ -2,7 +2,8 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import { Link, hashHistory } from 'react-router'
+import { hashHistory } from 'react-router'
+import Link from '../components/Link';
 import ReactGA from 'react-ga'
 
 import TrackList from '../components/TrackList'

src/js/views/Queue.js

@@ -1,7 +1,8 @@
 
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
-import { hashHistory, Link } from 'react-router'
+import { hashHistory } from 'react-router'
+import Link from '../components/Link';
 import { bindActionCreators } from 'redux'
 
 import Icon from '../components/Icon'

src/js/views/Search.js

@@ -1,7 +1,8 @@
 
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
-import { Link, hashHistory } from 'react-router'
+import { hashHistory } from 'react-router'
+import Link from '../components/Link';
 import { bindActionCreators } from 'redux'
 
 import Header from '../components/Header'

src/js/views/Track.js

@@ -1,7 +1,7 @@
 
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
-import { Link } from 'react-router'
+import Link from '../components/Link';
 import { bindActionCreators } from 'redux'
 
 import Header from '../components/Header'

src/js/views/discover/DiscoverFeatured.js

@@ -2,7 +2,7 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import { Link } from 'react-router'
+import Link from '../../components/Link';
 
 import PlaylistGrid from '../../components/PlaylistGrid'
 import Header from '../../components/Header'

src/js/views/discover/DiscoverNewReleases.js

@@ -2,7 +2,7 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import { Link } from 'react-router'
+import Link from '../../components/Link';
 
 import Header from '../../components/Header'
 import Icon from '../../components/Icon'

src/js/views/library/LibraryAlbums.js

@@ -2,7 +2,7 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Link } from 'react-router';
+import Link from '../../components/Link';
 
 import AlbumGrid from '../../components/AlbumGrid';
 import List from '../../components/List';

src/js/views/library/LibraryArtists.js

@@ -2,7 +2,7 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Link } from 'react-router';
+import Link from '../../components/Link';
 
 import Header from '../../components/Header';
 import ArtistGrid from '../../components/ArtistGrid';

src/js/views/library/LibraryBrowse.js

@@ -2,7 +2,8 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import { Link, hashHistory } from 'react-router'
+import { hashHistory } from 'react-router'
+import Link from '../../components/Link';
 
 import Header from '../../components/Header'
 import List from '../../components/List'

src/js/views/library/LibraryPlaylists.js

@@ -2,7 +2,7 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import { Link } from 'react-router'
+import Link from '../../components/Link';
 
 import PlaylistGrid from '../../components/PlaylistGrid'
 import List from '../../components/List'

src/js/views/library/LibraryTracks.js

@@ -2,7 +2,7 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import { Link } from 'react-router'
+import Link from '../../components/Link';
 
 import TrackList from '../../components/TrackList'
 import Header from '../../components/Header'

src/js/views/modals/AddToPlaylist.js

@@ -2,7 +2,7 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import { Link } from 'react-router'
+import Link from '../../components/Link'
 import ReactGA from 'react-ga'
 
 import Modal from './Modal';

src/js/views/modals/AddToQueue.js

@@ -2,7 +2,7 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import { Link } from 'react-router'
+import Link from '../../components/Link'
 import ReactGA from 'react-ga'
 
 import Modal from './Modal';

src/js/views/modals/CreatePlaylist.js

@@ -2,7 +2,7 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import { Link } from 'react-router'
+import Link from '../../components/Link'
 import ReactGA from 'react-ga'
 
 import Modal from './Modal';

src/js/views/modals/EditCommand.js

@@ -2,7 +2,7 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import { Link } from 'react-router'
+import Link from '../../components/Link'
 import ReactGA from 'react-ga'
 
 import Modal from './Modal';

src/js/views/modals/EditPlaylist.js

@@ -2,7 +2,7 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import { Link } from 'react-router'
+import Link from '../../components/Link'
 import ReactGA from 'react-ga'
 
 import Modal from './Modal';

src/js/views/modals/EditRadio.js

@@ -2,7 +2,7 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import { Link } from 'react-router'
+import Link from '../../components/Link'
 import ReactGA from 'react-ga'
 
 import Modal from './Modal';

src/js/views/modals/InitialSetup.js

@@ -2,7 +2,8 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Link, hashHistory } from 'react-router';
+import { hashHistory } from 'react-router'
+import Link from '../../components/Link'
 import ReactGA from 'react-ga';
 
 import Modal from './Modal';

src/js/views/modals/KioskMode.js

@@ -1,7 +1,7 @@
 
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
-import { Link } from 'react-router';
+import Link from '../../components/Link'
 import { createStore, bindActionCreators } from 'redux';
 
 import Modal from './Modal';

src/js/views/modals/ShareConfiguration.js

@@ -1,7 +1,7 @@
 
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
-import { Link } from 'react-router'
+import Link from '../../components/Link'
 import { createStore, bindActionCreators } from 'redux'
 
 import Modal from './Modal';