Receiving connection updates

src/js/helpers.js

@@ -36,4 +36,16 @@ export let generateGuid = function(){
 		var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
 		return v.toString(16);
 	});
+}
+
+
+export let getCurrentPusherConnection = function( connections, connectionid ){
+	function isCurrentConnection(connection){
+		return connection.connectionid == newProps.pusher.connectionid;
+	}
+	
+	var currentConnection = newProps.pusher.connections.find(isCurrentConnection);
+	if( !currentConnection ) return false;
+
+	return currentConnection;
 }

src/js/services/pusher/middleware.js

@@ -68,6 +68,11 @@ const PusherMiddleware = (function(){
                 return next(action);
                 break;
 
+            case 'PUSHER_CLIENT_CONNECTED':
+                makeRequest({ action: 'get_connections' });
+                return next(action);
+                break;
+
             case 'PUSHER_INSTRUCT':
                 makeRequest({ action: action.action, data: action.data });
                 break;

src/js/services/pusher/reducer.js

@@ -14,8 +14,16 @@ export default function reducer(pusher = {}, action){
                 port: action.port
             });
 
-        case 'PUSHER_CLIENT_CONNECTED':
-            return Object.assign({}, pusher, { connection: action.data });
+        case 'PUSHER_CONNECTION_UPDATED':
+            function byID(connection){
+                return connection.connectionid == action.data.connections.connectionid;
+            }
+            var connection = pusher.connections.find(byID);
+            var index = pusher.connections.indexOf(connection);
+            var connections = Object.assign([], pusher.connections);
+            connections[index] = action.data.connections;
+
+            return Object.assign({}, pusher, { connections: connections });
 
         case 'PUSHER_CONNECTIONS':
             return Object.assign({}, pusher, { connections: action.data.connections });

src/js/views/Settings.js

@@ -20,24 +20,13 @@ class Settings extends React.Component{
 		this.state = {
 			mopidy_host: this.props.mopidy.host,
 			mopidy_port: this.props.mopidy.port,
-			pusher_username: '',
+			pusher_username: this.props.pusher.username,
 			pusher_port: this.props.pusher.port,
 			spotify_country: this.props.spotify.country,
 			spotify_locale: this.props.spotify.locale
 		};
 	}
 
-	componentWillReceiveProps( newProps ){
-		if( this.props.pusher.connectionid != newProps.pusher.connectionid ){
-
-			function isCurrentConnection(connection){
-				return connection.connectionid == newProps.pusher.connectionid;
-			}
-			var currentConnection = newProps.pusher.connections.find(isCurrentConnection);
-			this.setState({ pusher_username: currentConnection.username })
-		}
-	}
-
 	resetAllSettings(){
 		localStorage.clear();
 		window.location.reload(true);