Not storing everything in localstorage

src/js/bootstrap.js

@@ -16,10 +16,18 @@ let reducers = combineReducers({
     spotify
 });
 
-// load our state from localStorage
-var initialState = {};
-if( localStorage.getItem('state') ){
-	initialState = JSON.parse( localStorage.getItem('state') );
+// set application defaults
+var initialState = {
+	mopidy: {
+		host: window.location.hostname,
+		port: 6680
+	}
+};
+
+// if we've got a stored version of mopidy state, load and merge
+if( localStorage.getItem('mopidy') ){
+	var storedMopidy = JSON.parse( localStorage.getItem('mopidy') );
+	Object.assign(initialState, { mopidy: storedMopidy } );
 }
 
 let store = createStore(

src/js/services/localstorage/middleware.js

@@ -12,7 +12,7 @@ const localstorageMiddleware = (function(){
 
         // get the state, and plug it in to our localStorage
         var state = store.getState();
-        localStorage.setItem('state', JSON.stringify(state));
+        //localStorage.setItem('state', JSON.stringify(state));
     }
 
 })();

src/js/services/mopidy/actions.js

@@ -15,6 +15,14 @@ export function disconnect(){
 	}
 }
 
+export function setConfig( host, port ){
+	return {
+		type: 'MOPIDY_SET_CONFIG',
+		host: host,
+		port: port
+	}
+}
+
 export function changeTrack( tlid ){
 	return {
 		type: 'MOPIDY_CHANGE_TRACK',

src/js/services/mopidy/middleware.js

@@ -104,11 +104,10 @@ const MopidyMiddleware = (function(){
                 if(socket != null) socket.close();
                 store.dispatch({ type: 'MOPIDY_CONNECTING' });
 
-                var domain = "tv.barnsley.nz";
-                if( window.location.hostname == 'iris.james' ) domain = 'music.james';
+                var state = store.getState();
 
                 socket = new Mopidy({
-                    webSocketUrl: 'ws://'+domain+':6680/mopidy/ws',
+                    webSocketUrl: 'ws://'+state.mopidy.host+':'+state.mopidy.port+'/mopidy/ws',
                     callingConvention: 'by-position-or-by-name'
                 });
 
@@ -129,6 +128,11 @@ const MopidyMiddleware = (function(){
                 instruct( socket, store, action.call, action.value )
                 break;
 
+            case 'MOPIDY_SET_CONFIG':
+                next(action);
+                localStorage.setItem('mopidy', JSON.stringify({ host: action.host, port: action.port }));
+                break;
+
             // This action is irrelevant to us, pass it on to the next middleware
             default:
                 return next(action);

src/js/services/mopidy/reducer.js

@@ -11,6 +11,12 @@ export default function reducer(mopidy = {}, action){
         case 'MOPIDY_DISCONNECTED':
             return Object.assign({}, mopidy, { connected: false, connecting: false });
 
+        case 'MOPIDY_SET_CONFIG':
+            return Object.assign({}, mopidy, {
+                host: action.host, 
+                port: action.port
+            });
+
         case 'MOPIDY_CHANGE_TRACK':
             return Object.assign({}, mopidy, {
             	tlid: action.tlid	

src/js/services/spotify/middleware.js

@@ -80,6 +80,11 @@ const SpotifyMiddleware = (function(){
                 console.log('Spotify wants to DISconnect')
                 break;
 
+            case 'SPOTIFY_COMPLETE_AUTHORIZATION':
+                next(action);
+                localStorage.setItem('spotify', JSON.stringify({ access_token: action.data.access_token, refresh_token: action.data.refresh_token }));
+                break;
+
             // This action is irrelevant to us, pass it on to the next middleware
             default:
                 return next(action);

src/js/views/Settings.js

@@ -14,6 +14,11 @@ class Settings extends React.Component{
 
 	constructor(props) {
 		super(props);
+
+		this.state = {
+			mopidy_host: this.props.mopidy.host,
+			mopidy_port: this.props.mopidy.port
+		};
 	}
 
 	resetAllSettings(){
@@ -21,10 +26,28 @@ class Settings extends React.Component{
 		window.location.reload(true);
 	}
 
+	setConfig(){
+		this.props.mopidyActions.setConfig( this.state.mopidy_host, this.state.mopidy_port );
+		window.location.reload(true);
+	}
+
 	render(){
 		return (
 			<div>
 				<h3>Settings</h3>
+				<h4>Mopidy</h4>
+				<form onSubmit={() => this.setConfig()}>
+					<label>
+						<span className="label">Host</span>
+						<input onChange={ e => this.setState({ mopidy_host: e.target.value })} value={ this.state.mopidy_host } />
+					</label>
+					<label>
+						<span className="label">Port</span>
+						<input onChange={ e => this.setState({ mopidy_port: e.target.value })} value={ this.state.mopidy_port } />
+					</label>
+					<button type="submit">Apply</button>
+				</form>
+				<h4>Spotify</h4>
 		        <SpotifyAuthenticationFrame />
 		        <ConfirmationButton content="Reset all settings" confirmingContent="Are you sure?" onConfirm={() => this.resetAllSettings()} />
 			</div>