Pusher part one

src/js/views/App.js

@@ -9,6 +9,7 @@ import Sidebar from '../components/Sidebar'
 import ContextMenu from '../components/ContextMenu'
 
 import * as uiActions from '../services/ui/actions'
+import * as pusherActions from '../services/pusher/actions'
 import * as mopidyActions from '../services/mopidy/actions'
 import * as spotifyActions from '../services/spotify/actions'
 
@@ -25,7 +26,9 @@ class App extends React.Component{
 	}
 
 	componentWillMount(){
+		this.props.pusherActions.connect();
 		this.props.mopidyActions.connect();
+
 		window.addEventListener("keyup", this.handleKeyUp, false);
 		window.addEventListener("keydown", this.handleKeyDown, false);
 	}
@@ -94,6 +97,7 @@ const mapStateToProps = (state, ownProps) => {
 const mapDispatchToProps = (dispatch) => {
 	return {
 		uiActions: bindActionCreators(uiActions, dispatch),
+		pusherActions: bindActionCreators(pusherActions, dispatch),
 		mopidyActions: bindActionCreators(mopidyActions, dispatch),
 		spotifyActions: bindActionCreators(spotifyActions, dispatch)
 	}

src/js/views/Settings.js

@@ -19,6 +19,7 @@ class Settings extends React.Component{
 		this.state = {
 			mopidy_host: this.props.mopidy.host,
 			mopidy_port: this.props.mopidy.port,
+			pusher_port: this.props.pusher.port,
 			spotify_country: this.props.spotify.country,
 			spotify_locale: this.props.spotify.locale
 		};
@@ -38,6 +39,10 @@ class Settings extends React.Component{
 		this.props.spotifyActions.setConfig({ country: this.state.spotify_country, locale: this.state.spotify_locale });
 	}
 
+	setPusherConfig(){
+		this.props.pusherActions.setConfig({ port: this.state.pusher_port });
+	}
+
 	render(){
 		return (
 			<div className="view settings-view">
@@ -64,7 +69,19 @@ class Settings extends React.Component{
 								onChange={ e => this.setState({ mopidy_port: e.target.value })} 
 								value={ this.state.mopidy_port } />
 						</label>
-						<button type="submit">Apply</button>
+						<button type="submit" className="secondary">Apply</button>
+					</form>
+
+					<h3 className="underline">Pusher</h3>
+					<form onSubmit={() => this.setPusherConfig()}>
+						<label>
+							<span className="label">Port</span>
+							<input 
+								type="text"
+								onChange={ e => this.setState({ pusher_port: e.target.value })} 
+								value={ this.state.pusher_port } />
+						</label>
+						<button type="submit" className="secondary">Apply</button>
 					</form>
 
 					<h3 className="underline">Spotify</h3>
@@ -83,7 +100,7 @@ class Settings extends React.Component{
 								onChange={ e => this.setState({ spotify_locale: e.target.value })} 
 								value={ this.state.spotify_locale } />
 						</label>
-						<button type="submit">Apply</button>
+						<button type="submit" className="secondary">Apply</button>
 					</form>
 
 			        <SpotifyAuthenticationFrame />