Reducer

package.json

@@ -1,7 +1,8 @@
 {
 	"name": "iris",
 	"version": "1.0.0",
-	"description": "",
+	"description": "Mopidy HTTP interface",
+	"repository": "https://github.com/jaedb/iris",
 	"main": "app.js",
 	"dependencies": {
 		"babel": "^5.8.29",
@@ -17,6 +18,7 @@
 		"redux": "*",
 		"react-redux": "*",
 		"redux-devtools": "*",
+		"redux-thunk": "*",
 		"webpack": "^1.13.2",
 		"webpack-strip": "*",
 		"node-sass": "*",

src/js/actions/mopidy.js

@@ -58,3 +58,11 @@ export function updateVolume( volume ){
 		volume: volume
 	}
 }
+
+export function changeTrack( tlid ){
+	return {
+		type: 'CHANGE_TRACK',
+		tlid: tlid
+	}
+}
+

src/js/components/App.js

@@ -1,8 +1,4 @@
 
-/**
- * Root level application
- **/
-
 import React, { PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import { createStore, bindActionCreators } from 'redux'
@@ -14,26 +10,13 @@ import Services from '../services/Services'
 import MopidyService from '../services/MopidyService'
 
 
+/**
+ * Root level application
+ **/
 class App extends React.Component{
 
 	constructor(props){
 		super(props);
-		this.handleClick = this.handleClick.bind(this);
-	}
-
-	handleClick(){
-		console.log('click');
-		//this.props.providerActions.authorizeSpotify();
-		Services.get('services.mopidy')
-			.then( function(MopidyService){
-				MopidyService.connection.playback.getState()
-					.then( function(state){
-						console.log('App.js > playback state', state);
-					});
-			})
-	}
-
-	componentDidMount(){
 	}
 
 	render(){

src/js/components/Queue.js

@@ -14,10 +14,6 @@ class Queue extends React.Component{
 		super(props);
 	}
 
-	componentDidMount(){
-		console.log('mounted');
-	}
-
 	renderTrackInFocus(){
 		if( this.props.mopidy && this.props.mopidy.trackInFocus ){
 			return (

src/js/components/TrackList.js

@@ -1,8 +1,13 @@
 
 import React, { PropTypes } from 'react'
-import Track from './Track'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import * as actions from '../actions/mopidy'
 
-export default class TrackList extends React.Component{
+import Track from './Track'
+import MopidyService from '../services/MopidyService'
+
+class TrackList extends React.Component{
 
 	constructor(props) {
 		super(props);
@@ -21,6 +26,7 @@ export default class TrackList extends React.Component{
 	playTrack( index ){
 		var tracks = this.state.tracks;
 		console.log('playTrack', tracks[index].tlid)
+		this.props.actions.changeTrack( index )
 	}
 
 	componentWillReceiveProps( nextProps ){
@@ -58,3 +64,22 @@ export default class TrackList extends React.Component{
 		return null;
 	}
 }
+
+
+/**
+ * Export our component
+ *
+ * We also integrate our global store, using connect()
+ **/
+
+const mapStateToProps = (state, ownProps) => {
+	return state;
+}
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		actions: bindActionCreators(actions, dispatch)
+	}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(TrackList)

src/js/reducers/mopidy.js

@@ -43,6 +43,11 @@ export default function reducer(mopidy = {}, action){
                 volume: action.volume   
             });
 
+        case 'CHANGE_TRACK':
+            return Object.assign({}, mopidy, {
+            	tlid: action.tlid	
+            });
+
         default:
             return mopidy
     }

src/js/services/MopidyService.js

@@ -79,7 +79,7 @@ class MopidyService extends React.Component{
 	 * @param string property the property to get (TlTracks, Consume, etc)
 	 **/
 	get( model, property ){
-		console.log('MopidyServie: '+model+'.get'+property);
+		console.log('MopidyService: '+model+'.get'+property);
 		let self = this;
 		this.connection[model]['get'+property]()
 			.then(
@@ -115,6 +115,10 @@ class MopidyService extends React.Component{
 			);
 	}
 
+	changeTlTrack( tlid ){
+		console.log('Changing track to '+ tlid)
+	}
+
 
 	render(){
 		console.log( this.props.mopidy );