From f4ca6b7fde4ffc4e55634b5ca90b0cb0df9fc03c Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Fri, 28 Oct 2016 15:58:07 +1300 Subject: [PATCH] Pusher username setting fully working --- src/js/bootstrap.js | 1 + src/js/components/PusherConnectionList.js | 4 +- .../components/SpotifyAuthenticationFrame.js | 2 +- src/js/services/localstorage/middleware.js | 47 +++++++++++++++++-- src/js/services/pusher/actions.js | 6 +-- src/js/services/pusher/middleware.js | 3 +- src/js/services/pusher/reducer.js | 11 ++++- src/js/services/spotify/actions.js | 4 +- src/js/services/spotify/reducer.js | 2 +- src/js/views/Settings.js | 29 +++++++++--- 10 files changed, 86 insertions(+), 23 deletions(-) diff --git a/src/js/bootstrap.js b/src/js/bootstrap.js index f4d79ddd..4ab835e1 100755 --- a/src/js/bootstrap.js +++ b/src/js/bootstrap.js @@ -32,6 +32,7 @@ var initialState = { progress: 0 }, pusher: { + username: '', connections: [], connected: false, port: 6681 diff --git a/src/js/components/PusherConnectionList.js b/src/js/components/PusherConnectionList.js index 9da9bcfe..f2af04a3 100755 --- a/src/js/components/PusherConnectionList.js +++ b/src/js/components/PusherConnectionList.js @@ -34,9 +34,11 @@ class PusherConnectionList extends React.Component{
{ this.props.pusher.connections.map( (connection, index) => { + var isMe = false; + if( connection.connectionid == this.props.pusher.connectionid ) isMe = true; return (
-
{ connection.username }
+
{ connection.username } { isMe ? (you) : null }
{ connection.ip }
{ connection.connectionid }
diff --git a/src/js/components/SpotifyAuthenticationFrame.js b/src/js/components/SpotifyAuthenticationFrame.js index 78c94226..0bdf85f3 100755 --- a/src/js/components/SpotifyAuthenticationFrame.js +++ b/src/js/components/SpotifyAuthenticationFrame.js @@ -75,7 +75,7 @@ class SpotifyAuthenticationFrame extends React.Component{ }else if( this.props.spotify.authorized ){ return (
- + { this.renderMe() }
); diff --git a/src/js/services/localstorage/middleware.js b/src/js/services/localstorage/middleware.js index 59e7281e..7d74706b 100755 --- a/src/js/services/localstorage/middleware.js +++ b/src/js/services/localstorage/middleware.js @@ -6,7 +6,7 @@ const localstorageMiddleware = (function(){ **/ return store => next => action => { - console.log(action, store.getState()) + console.log(action);//, store.getState()) // proceed as normal first // this way, any reducers and middleware do their thing BEFORE we store our new state @@ -15,10 +15,14 @@ const localstorageMiddleware = (function(){ switch( action.type ){ case 'PUSHER_SET_CONFIG': - var pusher = { - username: action.config.username, - port: action.config.port - }; + var pusher = JSON.parse( localStorage.getItem('pusher') ); + if( !pusher ) pusher = {}; + Object.assign( + pusher,{ + username: action.config.username, + port: action.config.port + } + ); localStorage.setItem('pusher', JSON.stringify(pusher)); break; @@ -27,12 +31,20 @@ const localstorageMiddleware = (function(){ if( !pusher ) pusher = {}; Object.assign( pusher,{ + username: action.connection.username, connectionid: action.connection.connectionid } ); localStorage.setItem('pusher', JSON.stringify(pusher)); break; + case 'PUSHER_CHANGE_USERNAME': + var pusher = JSON.parse( localStorage.getItem('pusher') ); + if( !pusher ) pusher = {}; + Object.assign( pusher,{ username: action.data.connection.username }); + localStorage.setItem('pusher', JSON.stringify(pusher)); + break; + case 'MOPIDY_SET_CONFIG': var mopidy = { host: action.config.host, @@ -63,6 +75,20 @@ const localstorageMiddleware = (function(){ localStorage.setItem('spotify', JSON.stringify(spotify)); break; + case 'SPOTIFY_AUTHORIZATION_REVOKED': + var spotify = JSON.parse( localStorage.getItem('spotify') ); + if( !spotify ) spotify = {}; + Object.assign( + spotify,{ + authorized: false, + access_token: false, + refresh_token: false, + token_expiry: false + } + ); + localStorage.setItem('spotify', JSON.stringify(spotify)); + break; + case 'SPOTIFY_TOKEN_REFRESHED': var spotify = JSON.parse( localStorage.getItem('spotify') ); if( !spotify ) spotify = {}; @@ -74,6 +100,17 @@ const localstorageMiddleware = (function(){ ); localStorage.setItem('spotify', JSON.stringify(spotify)); break; + + case 'SPOTIFY_ME_LOADED': + var spotify = JSON.parse( localStorage.getItem('spotify') ); + if( !spotify ) spotify = {}; + Object.assign( + spotify,{ + me: action.data + } + ); + localStorage.setItem('spotify', JSON.stringify(spotify)); + break; } } diff --git a/src/js/services/pusher/actions.js b/src/js/services/pusher/actions.js index 2682365d..15ecf6ca 100755 --- a/src/js/services/pusher/actions.js +++ b/src/js/services/pusher/actions.js @@ -10,11 +10,11 @@ export function setConfig( config ){ } } -export function setUsername( username ){ +export function changeUsername( username ){ return { type: 'PUSHER_INSTRUCT', - action: 'set_username', - data: { username: username } + action: 'change_username', + data: username } } diff --git a/src/js/services/pusher/middleware.js b/src/js/services/pusher/middleware.js index 79e60b6e..dccf5bcf 100755 --- a/src/js/services/pusher/middleware.js +++ b/src/js/services/pusher/middleware.js @@ -45,7 +45,7 @@ const PusherMiddleware = (function(){ connectionid: helpers.generateGuid(), username: Math.random().toString(36).substr(2, 9) } - //if( state.pusher.username ) connection.username = state.pusher.username; + if( state.pusher.username ) connection.username = state.pusher.username; socket = new WebSocket( 'ws://'+state.mopidy.host+':'+state.pusher.port+'/pusher', @@ -54,6 +54,7 @@ const PusherMiddleware = (function(){ socket.onopen = () => { store.dispatch({ type: 'PUSHER_CONNECTED', connection: connection }); + store.dispatch({ type: 'PUSHER_SET_USERNAME', username: connection.username }); }; socket.onmessage = (message) => { diff --git a/src/js/services/pusher/reducer.js b/src/js/services/pusher/reducer.js index 9aa478d1..99c1857e 100755 --- a/src/js/services/pusher/reducer.js +++ b/src/js/services/pusher/reducer.js @@ -3,17 +3,24 @@ export default function reducer(pusher = {}, action){ switch (action.type) { case 'PUSHER_CONNECTED': - return Object.assign({}, pusher, { connected: true, connecting: false, connectionid: action.connection.connectionid }); + return Object.assign({}, pusher, { + connected: true, + connecting: false, + connectionid: action.connection.connectionid, + username: action.connection.username + }); case 'PUSHER_DISCONNECTED': return Object.assign({}, pusher, { connected: false, connecting: false }); case 'PUSHER_SET_CONFIG': return Object.assign({}, pusher, { - username: action.username, port: action.port }); + case 'PUSHER_CHANGE_USERNAME': + return Object.assign({}, pusher, { username: action.data.connection.username }); + case 'PUSHER_CONNECTION_UPDATED': function byID(connection){ return connection.connectionid == action.data.connections.connectionid; diff --git a/src/js/services/spotify/actions.js b/src/js/services/spotify/actions.js index 0da94961..85651889 100755 --- a/src/js/services/spotify/actions.js +++ b/src/js/services/spotify/actions.js @@ -71,8 +71,8 @@ export function authorizationGranted( data ){ return { type: 'SPOTIFY_AUTHORIZATION_GRANTED', data: data } } -export function removeAuthorization(){ - return { type: 'SPOTIFY_REMOVE_AUTHORIZATION' } +export function authorizationRevoked(){ + return { type: 'SPOTIFY_AUTHORIZATION_REVOKED' } } diff --git a/src/js/services/spotify/reducer.js b/src/js/services/spotify/reducer.js index ec9786ed..6cd2245d 100755 --- a/src/js/services/spotify/reducer.js +++ b/src/js/services/spotify/reducer.js @@ -17,7 +17,7 @@ export default function reducer(spotify = {}, action){ token_expiry: action.data.token_expiry }); - case 'SPOTIFY_REMOVE_AUTHORIZATION': + case 'SPOTIFY_AUTHORIZATION_REVOKED': return Object.assign({}, spotify, { authorizing: false, authorization: false, diff --git a/src/js/views/Settings.js b/src/js/views/Settings.js index 278cbad2..72adb30f 100755 --- a/src/js/views/Settings.js +++ b/src/js/views/Settings.js @@ -30,20 +30,35 @@ class Settings extends React.Component{ resetAllSettings(){ localStorage.clear(); window.location.reload(true); + return false; } - setMopidyConfig(){ + setMopidyConfig(e){ + e.preventDefault(); this.props.mopidyActions.setConfig({ host: this.state.mopidy_host, port: this.state.mopidy_port }); window.location.reload(true); + return false; } - setPusherConfig(){ + setPusherConfig(e){ + e.preventDefault(); + this.props.pusherActions.changeUsername( this.state.pusher_username ); this.props.pusherActions.setConfig({ port: this.state.pusher_port }); - this.props.pusherActions.setUsername( this.state.pusher_username ); + return false; } - setSpotifyConfig(){ + setSpotifyConfig(e){ + e.preventDefault(); this.props.spotifyActions.setConfig({ country: this.state.spotify_country, locale: this.state.spotify_locale }); + return false; + } + + componentWillReceiveProps(newProps){ + if( this.state.pusher_username != newProps.pusher.username ){ + this.setState({ + pusher_username: newProps.pusher.username + }) + } } render(){ @@ -57,7 +72,7 @@ class Settings extends React.Component{

Mopidy

-
this.setMopidyConfig()}> + this.setMopidyConfig(e)}>