From 5df6580f611c64bb13f8ea6c6c8ccd9a79536fd7 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Sat, 29 Oct 2016 22:40:02 +1300
Subject: [PATCH] Version manager for pusher; Local spotify tokens

---
 src/js/bootstrap.js                       |  5 +-
 src/js/components/PusherConnectionList.js |  8 ++-
 src/js/components/Sidebar.js              | 10 +---
 src/js/components/VersionManager.js       | 59 +++++++++++++++++++
 src/js/services/pusher/actions.js         |  6 ++
 src/js/services/pusher/middleware.js      |  6 ++
 src/js/services/pusher/reducer.js         |  8 ++-
 src/js/services/spotify/actions.js        | 70 ++++++++++++++++-------
 src/js/services/spotify/reducer.js        | 10 ++++
 src/js/views/Settings.js                  | 11 +++-
 src/js/views/library/LibraryPlaylists.js  | 19 +++---
 src/scss/components/_sidebar.scss         |  7 ++-
 src/scss/global/_core.scss                |  4 ++
 13 files changed, 181 insertions(+), 42 deletions(-)
 create mode 100755 src/js/components/VersionManager.js

diff --git a/src/js/bootstrap.js b/src/js/bootstrap.js
index 4ab835e1..9f381e3a 100755
--- a/src/js/bootstrap.js
+++ b/src/js/bootstrap.js
@@ -35,7 +35,10 @@ var initialState = {
 		username: '',
 		connections: [],
 		connected: false,
-		port: 6681
+		port: 6681,
+		version: {
+			current: '0.0.0'
+		}
 	},
 	spotify: {
 		connected: false,
diff --git a/src/js/components/PusherConnectionList.js b/src/js/components/PusherConnectionList.js
index f2af04a3..57b544ce 100755
--- a/src/js/components/PusherConnectionList.js
+++ b/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>
 						);
 					})
diff --git a/src/js/components/Sidebar.js b/src/js/components/Sidebar.js
index 41d26877..cec7f40e 100755
--- a/src/js/components/Sidebar.js
+++ b/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>
diff --git a/src/js/components/VersionManager.js b/src/js/components/VersionManager.js
new file mode 100755
index 00000000..46759228
--- /dev/null
+++ b/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)
\ No newline at end of file
diff --git a/src/js/services/pusher/actions.js b/src/js/services/pusher/actions.js
index 15ecf6ca..4564837e 100755
--- a/src/js/services/pusher/actions.js
+++ b/src/js/services/pusher/actions.js
@@ -30,6 +30,12 @@ export function disconnect(){
 	}
 }
 
+export function performUpgrade(){
+	return {
+		type: 'PUSHER_UPGRADING'
+	}
+}
+
 export function getConnectionList(){
 	return {
 		type: 'PUSHER_INSTRUCT',
diff --git a/src/js/services/pusher/middleware.js b/src/js/services/pusher/middleware.js
index dccf5bcf..523f65fe 100755
--- a/src/js/services/pusher/middleware.js
+++ b/src/js/services/pusher/middleware.js
@@ -66,6 +66,12 @@ const PusherMiddleware = (function(){
 
             case 'PUSHER_CONNECTED':
                 makeRequest({ action: 'get_version' });
+                makeRequest({ action: 'get_spotify_token' });
+                return next(action);
+                break;
+
+            case 'PUSHER_UPGRADING':
+                makeRequest({ action: 'perform_upgrade' });
                 return next(action);
                 break;
 
diff --git a/src/js/services/pusher/reducer.js b/src/js/services/pusher/reducer.js
index 99c1857e..9b786834 100755
--- a/src/js/services/pusher/reducer.js
+++ b/src/js/services/pusher/reducer.js
@@ -36,7 +36,13 @@ export default function reducer(pusher = {}, action){
             return Object.assign({}, pusher, { connections: action.data.connections });
 
         case 'PUSHER_VERSION':
-            return Object.assign({}, pusher, { version: action.data });
+            return Object.assign({}, pusher, { 
+                version: action.data.version,
+                upgrading: false
+            });
+
+        case 'PUSHER_UPGRADING':
+            return Object.assign({}, pusher, { upgrading: true });
 
         default:
             return pusher
diff --git a/src/js/services/spotify/actions.js b/src/js/services/spotify/actions.js
index 85651889..b8ebb900 100755
--- a/src/js/services/spotify/actions.js
+++ b/src/js/services/spotify/actions.js
@@ -101,26 +101,56 @@ function getToken( dispatch, getState ){
 
 function refreshToken( dispatch, getState ){
     return new Promise( (resolve, reject) => {
-        $.ajax({
-                method: 'GET',
-                url: '//jamesbarnsley.co.nz/spotmop.php?action=refresh&refresh_token='+getState().spotify.refresh_token,
-                dataType: "json",
-                timeout: 10000
-            })
-            .then(
-                response => {
-                    response.token_expiry = new Date().getTime() + ( response.expires_in * 1000 );
-                    dispatch({
-                        type: 'SPOTIFY_TOKEN_REFRESHED',
-                        data: response
-                    });
-                    resolve(response);
-                },
-                error => {
-                    console.error('Could not refresh token', error)
-                    reject(error)
-                }
-            );
+
+        if( getState().spotify.authorized ){
+
+            $.ajax({
+                    method: 'GET',
+                    url: '//jamesbarnsley.co.nz/spotmop.php?action=refresh&refresh_token='+getState().spotify.refresh_token,
+                    dataType: "json",
+                    timeout: 10000
+                })
+                .then(
+                    response => {
+                        response.token_expiry = new Date().getTime() + ( response.expires_in * 1000 );
+                        response.source = 'spotify';
+                        dispatch({
+                            type: 'SPOTIFY_TOKEN_REFRESHED',
+                            data: response
+                        });
+                        resolve(response);
+                    },
+                    error => {
+                        console.error('Could not refresh token', error)
+                        reject(error)
+                    }
+                );
+
+        }else{
+
+            $.ajax({
+                    method: 'GET',
+                    url: '//'+getState().mopidy.host+':'+getState().mopidy.port+'/spotmop/http?action=refresh_spotify_token',
+                    dataType: "json",
+                    timeout: 10000
+                })
+                .then(
+                    response => {
+                        response.token_expiry = new Date().getTime() + ( response.expires_in * 1000 );
+                        response.source = 'mopidy';
+                        dispatch({
+                            type: 'SPOTIFY_TOKEN_REFRESHED',
+                            data: response
+                        });
+                        resolve(response);
+                    },
+                    error => {
+                        console.error('Could not refresh token', error)
+                        reject(error)
+                    }
+                );
+        }
+
     })
 }
 
diff --git a/src/js/services/spotify/reducer.js b/src/js/services/spotify/reducer.js
index 6cd2245d..2a2d78b7 100755
--- a/src/js/services/spotify/reducer.js
+++ b/src/js/services/spotify/reducer.js
@@ -17,6 +17,16 @@ export default function reducer(spotify = {}, action){
                 token_expiry: action.data.token_expiry
             });
 
+        case 'PUSHER_SPOTIFY_TOKEN':
+            if( spotify.authorized ) return spotify;
+            return Object.assign({}, spotify, { 
+                authorizing: false, 
+                authorized: false,
+                authorization: false,
+                access_token: action.data.access_token,
+                token_expiry: action.data.token_expiry
+            });
+
         case 'SPOTIFY_AUTHORIZATION_REVOKED':
             return Object.assign({}, spotify, { 
                 authorizing: false, 
diff --git a/src/js/views/Settings.js b/src/js/views/Settings.js
index 72adb30f..1eaf4b3a 100755
--- a/src/js/views/Settings.js
+++ b/src/js/views/Settings.js
@@ -7,6 +7,7 @@ import FontAwesome from 'react-fontawesome'
 import SpotifyAuthenticationFrame from '../components/SpotifyAuthenticationFrame'
 import ConfirmationButton from '../components/ConfirmationButton'
 import PusherConnectionList from '../components/PusherConnectionList'
+import VersionManager from '../components/VersionManager'
 import Header from '../components/Header'
 
 import * as pusherActions from '../services/pusher/actions'
@@ -142,9 +143,13 @@ class Settings extends React.Component{
 
 			        <SpotifyAuthenticationFrame />
 
-			        <ConfirmationButton content="Reset all settings" confirmingContent="Are you sure?" onConfirm={() => this.resetAllSettings()} />
-
 					<h3 className="underline">Advanced</h3>
+					<label>
+						<div className="label">Version</div>
+						<div className="input">
+			        		<VersionManager />
+			        	</div>
+			        </label>
 					<label>
 						<div className="label">Connections</div>
 						<div className="input">
@@ -152,6 +157,8 @@ class Settings extends React.Component{
 			        	</div>
 			        </label>
 
+			        <ConfirmationButton content="Reset all settings" confirmingContent="Are you sure?" onConfirm={() => this.resetAllSettings()} />
+
 		        </section>
 			</div>
 		);
diff --git a/src/js/views/library/LibraryPlaylists.js b/src/js/views/library/LibraryPlaylists.js
index 9e661aa2..a2c5b87b 100755
--- a/src/js/views/library/LibraryPlaylists.js
+++ b/src/js/views/library/LibraryPlaylists.js
@@ -18,16 +18,21 @@ class LibraryPlaylists extends React.Component{
 
 	// on render
 	componentDidMount(){
-		if( this.props.mopidy.connected ) this.loadPlaylists();
+		if( this.props.mopidy.connected ){
+			this.props.mopidyActions.getPlaylists();
+		}
+		if( this.props.spotify.authorized ){
+		this.props.spotifyActions.getLibraryPlaylists();
+		}
 	}
 
 	componentWillReceiveProps( nextProps ){
-		if( !this.props.mopidy.connected && nextProps.mopidy.connected ) this.loadPlaylists();
-	}
-
-	loadPlaylists(){
-		this.props.spotifyActions.getLibraryPlaylists();
-		this.props.mopidyActions.getPlaylists();
+		if( !this.props.mopidy.connected && nextProps.mopidy.connected ){
+			this.props.mopidyActions.getPlaylists();
+		}
+		if( !this.props.spotify.authorized && nextProps.spotify.authorized ){
+			this.props.spotifyActions.getLibraryPlaylists();
+		}
 	}
 
 	compiledPlaylistSources(){
diff --git a/src/scss/components/_sidebar.scss b/src/scss/components/_sidebar.scss
index 2105c2b1..7f692aaa 100755
--- a/src/scss/components/_sidebar.scss
+++ b/src/scss/components/_sidebar.scss
@@ -51,7 +51,12 @@ aside{
 				background: rgba( 0, 0, 0, 0.5 );
 			}
 
-			&:hover {
+			&[disabled] {
+				opacity: 0.3;
+				cursor: not-allowed;
+			}
+
+			&:hover:not([disabled]) {
 				background: rgba( 255, 255, 255, 0.1 );
 			}
 		}
diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss
index c0b39092..21eb8958 100755
--- a/src/scss/global/_core.scss
+++ b/src/scss/global/_core.scss
@@ -95,4 +95,8 @@ main {
 
 .one-liner{
 	@include one_line_text;
+}
+
+.grey-text {
+	color: $mid_grey;
 }
\ No newline at end of file