Wrapping mopidy service and connecting store

src/actions/index.js

@@ -1,3 +1,4 @@
 
 import albumActions from './albumActions'
+import mopidyServiceActions from './mopidyServiceActions'
 

src/actions/mopidyServiceActions.js

@@ -0,0 +1,21 @@
+
+/**
+ * Actions and Action Creators
+ **/
+
+export const MOPIDY_ONLINE = 'MOPIDY_ONLINE'
+export const UPDATE_TRACKLIST = 'UPDATE_TRACKLIST'
+
+export function mopidyOnline( online ){
+	return {
+		type: MOPIDY_ONLINE,
+		online: online
+	}
+}
+
+export function updateTracklist( tracks ){
+	return {
+		type: UPDATE_TRACKLIST,
+		tracks: tracks
+	}
+}

src/bootstrap.js

@@ -5,13 +5,13 @@ import { createStore } from 'redux'
 import reducer from './reducers/index'
 import Services from './services/Services'
 
+// create our global store
+let store = createStore( reducer, {} );
+
 // start all our services
-Promise.all(Services.setup())
+Promise.all(Services.setup( store ))
 	.then(() => {
 		console.info('Services started...');
 	});
 
-// create our global store
-let store = createStore( reducer, {} );
-
 export default store;

src/components/App.js

@@ -1,4 +1,8 @@
 
+/**
+ * Root level application
+ **/
+
 import React, { PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import { createStore, bindActionCreators } from 'redux'
@@ -9,16 +13,10 @@ import * as actions from '../actions/index'
 import Services from '../services/Services'
 
 
-/**
- * The application 'brain'
- *
- * All data handling and fetching is done through this handler
- **/
 class App extends React.Component{
 
 	constructor(props){
 		super(props);
-
 		this.handleClick = this.handleClick.bind(this);
 	}
 

src/components/Queue.js

@@ -18,13 +18,9 @@ class NowPlaying extends React.Component{
 
 	// on render
 	componentDidMount(){
-		var self = this;
 		Services.get('services.mopidy')
 			.then( function(MopidyService){
-				MopidyService.connection.tracklist.getTlTracks()
-					.then( function(tracks){
-						self.setState({ tracks : tracks });
-					});
+				MopidyService.getCurrentTracklist();
 			})
 	}
 

src/index.js

@@ -1,9 +1,6 @@
 /**
  * Base-level application wrapper
  **/
- 
-console.info('Application initiated');
-
 
 import React, { PropTypes } from 'react';
 import ReactDOM from 'react-dom';
@@ -16,26 +13,6 @@ import App from './components/App'
 import Album from './components/Album'
 import Queue from './components/Queue'
 
-import Services from './services/Services'
-
-Promise.all(Services.setup())
-	.then(() => {
-		console.info('Services started...');
-	});
-
-
-/**
- * Render our application into the real DOM
- *
- * Sets up all of our routes, and the relevant components for each.
- * Provider facilitates global access to the store by using connect()
-
-				<Route path="playlists" component={LibraryPlaylists} />			
-				<Route path="albums" component={LibraryAlbums} />
-				<Route path="artists" component={LibraryArtists} />
-				<Route path="tracks" component={LibraryTracks} />
- **/
-
 ReactDOM.render(
 	<Provider store={store}>
 		<Router history={hashHistory}>

src/reducers/mopidyServiceReducer.js

@@ -0,0 +1,18 @@
+
+import * as actions from '../actions/mopidyServiceActions'
+
+export default function reducer(mopidyService = {}, action){
+    switch (action.type) {
+
+        case actions.UPDATE_TRACKLIST:
+            return Object.assign({}, mopidyService, {
+            	tracks: action.tracks	
+            });
+
+        default:
+            return mopidyService
+    }
+}
+
+
+

src/services/MopidyService.js

@@ -1,35 +1,69 @@
 
 import Mopidy from 'mopidy'
 
-function MopidyService( connection ){
-	this.connection = connection;
-};
 
-MopidyService.attachKey = 'services.mopidy';
+/**
+ * Create an IOC wrapper for our MopidyService instance
+ * 
+ * This initiates our service, and provides a container for our connection. We wrap
+ * this in a Promise so any requests to .get() will be delayed until we're connected. Genius!
+ **/
 
-MopidyService.attach = function( app ){
-	console.info('MopidyService: Attaching...');
+let MopidyServiceWrapper = {
+	attachKey: 'services.mopidy',
+	attach: function( store ){
+		console.info('MopidyServiceWrapper: Attaching...');
+		var service = new MopidyService( store );
+		return new Promise((resolve) => {
+			service.connection.on('state:online', () => {
+				resolve( service );
+			});
+		});
+	}
+}
 
-	return new Promise((resolve) => {
+export default MopidyServiceWrapper
+
+
+/**
+ * Mopidy service
+ *
+ * Handles internal requests and passes them on to our connection
+ **/
+class MopidyService {
+
+	constructor( store ){
 		var mopidyhost = 'music.plasticstudio.co';//window.location.hostname;
 		var mopidyport = "6680";
 		var protocol = 'ws';
-		var connection = new Mopidy({
+
+		this.connection = new Mopidy({
 			webSocketUrl: protocol+"://" + mopidyhost + ":" + mopidyport + "/mopidy/ws",
 			callingConvention: 'by-position-or-by-name'
 		});
-		connection.on((a, msg) => {
-			//console.log(msg);
-			// msg && msg.method ?
-			//   console.log('<-', msg.method) :
-			//   (msg ? console.log('->', JSON.parse(msg.data)) : console.log('->', msg));
-		});
-		connection.on('state:online', () => {
-			console.info('MopidyService: Attached');
-			var service = new MopidyService( connection );
-			resolve( service );
-		});
-	});
-}
+		this.connection.on(
+			(type, message) => this.handleMessage( type, message )
+		);
+		this.store = store;
+	}
 
-export default MopidyService;
+	setConnection( connection ){
+		this.connection = connection;
+	}
+
+	clearConnection(){
+		this.connection = false;
+	}
+
+	handleMessage( type, message ){
+		//console.log( message );
+	}
+
+	getCurrentTracklist(){
+		this.connection.tracklist.getTlTracks()
+			.then( function(tracks){
+				console.log(tracks);
+			});
+	}
+
+}

src/services/SpotifyService.js

@@ -1,6 +1,6 @@
 
 import React, { PropTypes } from 'react'
-import * as actions from './actions'
+import * as actions from '../actions/spotifyActions'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'