Basic click events

src/js/components/Album.js

@@ -46,7 +46,6 @@ class Album extends React.Component{
 			return (
 				<div>
 					<h3>{ this.state.album.name }</h3>
-					<h3>{ this.state.album.label }</h3>
 					<TrackList tracks={this.state.album.tracks.items} />
 				</div>
 			);

src/js/components/Queue.js

@@ -21,7 +21,7 @@ class Queue extends React.Component{
 	renderTrackInFocus(){
 		if( this.props.mopidy && this.props.mopidy.trackInFocus ){
 			return (
-				<Track track={this.props.mopidy.trackInFocus.track} />
+				<div>{ this.props.mopidy.trackInFocus.track.name }</div>
 			);
 		}
 		return null;

src/js/components/Track.js

@@ -1,5 +1,6 @@
 
 import React, { PropTypes } from 'react'
+import FontAwesome from 'react-fontawesome'
 
 export default class Track extends React.Component{
 
@@ -7,11 +8,26 @@ export default class Track extends React.Component{
 		super(props);
 	}
 
-	handleClick( e ){
-		console.log('Track clicked', this.props.track.name)
+	toggleSelected( e ){
+		return this.props.toggleSelected();
+	}
+
+	playTrack( e ){
+		return this.props.playTrack();
 	}
 
 	render(){
-		return <div className="track" onClick={(e) => this.handleClick(e)}>#{this.props.track.uri}: {this.props.track.name}</div>
+
+		var selectedIcon = 'square-o';
+		if( typeof(this.props.track.selected) !== 'undefined' && this.props.track.selected ){
+			selectedIcon = 'check-square-o';
+		}
+
+		return (
+			<div className="track" onDoubleClick={ (e) => this.playTrack(e) }>
+				<FontAwesome name={selectedIcon} fixedWidth onClick={ (e) => this.toggleSelected(e) } />
+				#{this.props.track.uri}: {this.props.track.name}
+			</div>
+		);
 	}
 }

src/js/components/TrackList.js

@@ -6,24 +6,49 @@ export default class TrackList extends React.Component{
 
 	constructor(props) {
 		super(props);
+
+		this.state = {
+			tracks: this.props.tracks
+		}
 	}
 
-	handleClick( e ){
-		console.log('Track clicked', e)
+	toggleSelected( index ){
+		var tracks = this.state.tracks;
+		tracks[index].selected = !tracks[index].selected;
+		this.setState({ tracks: tracks });
+	}
+
+	playTrack( index ){
+		var tracks = this.state.tracks;
+		console.log('playTrack', tracks[index].tlid)
+	}
+
+	componentWillReceiveProps( nextProps ){
+		this.setState({ tracks: nextProps.tracks });
 	}
 
 	render(){
-
-		if( this.props.tracks ){
+		let self = this;
+		if( this.state.tracks ){
 			return (
 				<ul>
 					{
-						this.props.tracks.map( track => {
+						this.state.tracks.map(
+							(track, index) => {
+
+								// flatten nested track objects (as in the case of TlTracks)
 								if( typeof(track.track) !== 'undefined' ){
-									track.track.tlid = track.tlid;
-									track = track.track;
+									for( var property in track.track ){
+										if( track.track.hasOwnProperty(property) ){
+											track[property] = track.track[property]
+										}
+									}
 								}
-								return <Track key={track.uri} track={track} onClick={(e) => this.handleClick(e)} />
+								return <Track
+										key={index+'_'+track.uri} 
+										track={track} 
+										playTrack={() => self.playTrack(index)}
+										toggleSelected={() => self.toggleSelected(index)} />
 							}
 						)
 					}