Parallax ready for testing

src/js/components/Parallax.js

@@ -1,12 +1,13 @@
 
 import React, { PropTypes } from 'react'
-import * as helpers from '../helpers'
 
 export default class Parallax extends React.Component{
 
 	constructor(props) {
 		super(props);
 
+		this._loading = false
+
 		this.state = {
 			scrollTop: 0,
 			windowWidth: 0,
@@ -16,7 +17,7 @@ export default class Parallax extends React.Component{
 				height: 0
 			},
 			image: {},
-			loaded: false,
+			loading: false,
 			url: false
 		}
 
@@ -26,33 +27,29 @@ export default class Parallax extends React.Component{
 	}
 
 	componentDidMount(){
-		var url = helpers.sizedImages( this.props.images ).huge;
-		this.loadImage( url )
-			.then(
-				response => {
-					this.setState({ url: url, image: response, loaded: true })
-					this.updateCanvas( response )
-				}
-			)
-
+        this._mounted = true
         window.addEventListener("resize", this.handleResize);
         window.addEventListener("scroll", this.handleScroll);
 	}
 
     componentWillUnmount(){
+        this._mounted = false
         window.removeEventListener("resize", this.handleResize);
         window.removeEventListener("scroll", this.handleScroll);
     }
 
 	componentWillReceiveProps( nextProps ){
-		if( nextProps.images.length != this.props.images.length ){
-			var url = helpers.sizedImages( nextProps.images ).huge;
-			this.setState({ url: url, image: false, loaded: false })
-			this.loadImage( url )
+		if( ( !this.props.url || nextProps.image != this.props.url ) && !this._loading ){
+			this._loading = true
+			this.setState({ url: nextProps.image, image: false, loading: true })
+			this.loadImage( nextProps.image )
 				.then(
 					response => {
-						this.setState({ url: url, image: response, loaded: true })
-						this.updateCanvas( response )
+						if( this._mounted ){
+							this._loading = false
+							this.setState({ url: nextProps.image, image: response, loading: false })
+							this.updateCanvas( response )
+						}
 					}
 				)
 		}
@@ -70,7 +67,7 @@ export default class Parallax extends React.Component{
 		)
     }
 
-	loadImage( url ){		
+	loadImage( url ){
 		return new Promise( (resolve, reject) => {
 
 			var imageObject = new Image();
@@ -175,7 +172,7 @@ export default class Parallax extends React.Component{
 			<div className="parallax">
 				<canvas 
 					id="parallax-canvas" 
-					className={ this.state.loaded ? 'loaded' : null } 
+					className={ !this.state.loading ? 'loaded' : null } 
 					width={this.state.canvas.width} 
 					height={this.state.canvas.height}>
 				</canvas>

src/js/components/Thumbnail.js

@@ -8,10 +8,7 @@ export default class Thumbnail extends React.Component{
 		super(props);
 
 		this.state = {
-			small: false,
-			medium: false,
-			large: false,
-			huge: false
+			url: require('../../assets/no-image.svg')
 		}
 	}
 
@@ -20,29 +17,27 @@ export default class Thumbnail extends React.Component{
 	}
 
 	componentWillReceiveProps( nextProps ){
-		this.mapImageSizes( nextProps.images );
+		this.mapImageSizes( nextProps );
 	}
 
-	mapImageSizes( images = this.props.images ){
-		var state = this.state;
+	mapImageSizes( props = this.props ){		
 
-		if( images.length <= 0 ){
-			state = {
-				small: require('../../assets/no-image.svg'),
-				medium: require('../../assets/no-image.svg'),
-				large: require('../../assets/no-image.svg'),
-				huge: require('../../assets/no-image.svg')
-			}
-		}else{
-			state = helpers.sizedImages( images );
+		// single image
+		if( this.props.image ){
+			this.setState({ url: this.props.image })
+
+		// multiple images
+		}else if( this.props.images && this.props.images.length > 0 ){
+			var images = helpers.sizedImages( this.props.images )
+			var size = 'medium'
+			if( this.props.size ) size = this.props.size
+			this.setState({ url: images[size] })
 		}
-
-		this.setState( state );
 	}
 
 	render(){
 		var style = {
-			backgroundImage: 'url("'+this.state[this.props.size]+'")'
+			backgroundImage: 'url("'+this.state.url+'")'
 		}
 		var className = 'thumbnail '+this.props.size;
 		if( this.props.circle ) className += ' circle';

src/js/views/Artist.js

@@ -140,8 +140,8 @@ class Artist extends React.Component{
 		if( !this.props.artist ) return null
 		var scheme = helpers.uriSource( this.props.params.uri );
 
-		var images = []
-		if( this.props.artist.images ) images = this.props.artist.images
+		var image = false
+		if( this.props.artist.images ) image = helpers.sizedImages( this.props.artist.images ).huge
 
 		return (
 			<div className="view artist-view">
@@ -150,8 +150,8 @@ class Artist extends React.Component{
 
 				<div className="intro">
 
-					<Thumbnail size="huge" images={ images } />
-					<Parallax images={ images } />
+					<Thumbnail image={ image } />
+					<Parallax image={ image } />
 
 					<div className="heading-wrapper">
 						<div className="heading">