Version manager for pusher; Local spotify tokens

src/js/components/PusherConnectionList.js

@@ -38,9 +38,11 @@ class PusherConnectionList extends React.Component{
 						if( connection.connectionid == this.props.pusher.connectionid ) isMe = true;
 						return (
 							<div className="connection cf" key={connection.connectionid}>
-								<div className="col w20">{ connection.username } { isMe ? <span>(you)</span> : null }</div>
-								<div className="col w20 one-liner">{ connection.ip }</div>
-								<div className="col w20 one-liner">{ connection.connectionid }</div>
+								<div className="col w30">{ connection.username } { isMe ? <span>(you)</span> : null }</div>
+								<div className="col w70">
+									{ connection.ip }
+									<span className="grey-text"> ({ connection.connectionid })</span>
+								</div>
 							</div>
 						);
 					})

src/js/components/Sidebar.js

@@ -17,10 +17,6 @@ class Sidebar extends React.Component{
 		super(props);
 	}
 
-	componentDidMount(){
-		console.log( this.props )
-	}
-
 	render(){
 		return (
 			<aside>
@@ -62,15 +58,15 @@ class Sidebar extends React.Component{
 							<Icon name="playlist" className="white" />
 							Playlists
 						</Link>
-						<Link activeClassName="active" to="/library/artists">
+						<Link activeClassName="active" disabled={!this.props.spotify.authorized} to="/library/artists">
 							<Icon name="mic" className="white" />
 							Artists
 						</Link>
-						<Link activeClassName="active" to="/library/albums">
+						<Link activeClassName="active" disabled={!this.props.spotify.authorized} to="/library/albums">
 							<Icon name="cd" className="white" />
 							Albums
 						</Link>
-						<Link activeClassName="active" to="/library/tracks">
+						<Link activeClassName="active" disabled={!this.props.spotify.authorized} to="/library/tracks">
 							<Icon name="music" className="white" />
 							Tracks
 						</Link>

src/js/components/VersionManager.js

@@ -0,0 +1,59 @@
+
+import React, { PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { Link } from 'react-router'
+import { createStore, bindActionCreators } from 'redux'
+
+import FontAwesome from 'react-fontawesome'
+
+import * as pusherActions from '../services/pusher/actions'
+
+class VersionManager extends React.Component{
+
+	constructor(props) {
+		super(props);
+	}
+
+	renderUpdateButton(){
+		if( this.props.pusher.upgrading ){
+			return (
+				<button disabled>
+					<FontAwesome name="circle-o-notch" spin />
+					&nbsp;
+					Upgrading
+				</button>
+			);
+		}
+
+		if( !this.props.pusher.version.is_root ){
+			return <button className="secondary" disabled>Cannot upgrade</button>
+		}
+
+		if( this.props.pusher.version.upgrade_available ){
+			return <button className="secondary" onClick={() => this.props.pusherActions.performUpdate()}>Update now</button>
+		}
+
+		return null;
+	}
+
+	render(){
+		return (
+			<div className="version-manager">
+				<span>{ this.props.pusher.version.current } installed</span>
+				{ this.renderUpdateButton() }
+			</div>
+		);
+	}
+}
+
+const mapStateToProps = (state, ownProps) => {
+	return state;
+}
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		pusherActions: bindActionCreators(pusherActions, dispatch)
+	}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(VersionManager)