Scroll to top on route; Notifications click behind

src/js/index.js

@@ -39,16 +39,17 @@ import LibraryLocalDirectory from './views/library/LibraryLocalDirectory'
 
 // setup our analytics tracking
 ReactGA.initialize('UA-64701652-3');
-function logPageView() {
+function handleUpdate() {
 	ReactGA.set({ page: window.location.hash })
 	ReactGA.pageview(window.location.hash)
+	$(window).scrollTop(0)
 }
 
 global.baseURL = '/'
 
 ReactDOM.render(
 	<Provider store={store}>
-		<Router history={hashHistory} onUpdate={logPageView}>
+		<Router history={hashHistory} onUpdate={handleUpdate}>
 			<Route path={global.baseURL} component={App}>
 
      			<IndexRoute component={Queue} />

src/js/services/spotify/actions.js

@@ -1,4 +1,5 @@
 
+var uiActions = require('../../services/ui/actions.js')
 var helpers = require('../../helpers.js')
 
 /**
@@ -39,6 +40,7 @@ const sendRequest = ( dispatch, getState, endpoint, method = 'GET', data = false
                         },
                         (xhr, status, error) => {
                             console.error( endpoint+' failed', xhr.responseText)
+                            dispatch(uiActions.createNotification(xhr.responseText,'bad'))
                             reject(error)
                         }
                     )

src/js/services/spotify/middleware.js

@@ -17,6 +17,10 @@ const SpotifyMiddleware = (function(){
                 store.dispatch( spotifyActions.getMe() )
                 break
 
+            case 'SPOTIFY_DISCONNECTED':
+                store.dispatch( uiActions.createNotification('Spotify disconnected','bad') )
+                break
+
             case 'SPOTIFY_CREATE_PLAYLIST':
                 if( !store.getState().spotify.authorized ){
                     store.dispatch( uiActions.createNotification( "Must be logged in to Spotify to do that", 'bad' ) )

src/scss/components/_notifications.scss

@@ -6,7 +6,8 @@
 	left: 0;
 	right: 0;
 	text-align: center;
-	z-index: 100;
+	z-index: 99;
+	pointer-events: none;
 
 	.notification {
 		display: inline-block;
@@ -15,6 +16,7 @@
 		padding: 12px 32px 12px 18px;
 		margin: 0 0.5px;
 		color: #FFFFFF;
+		pointer-events: all;
 
 		&:first-child {
 			border-top-left-radius: 50px;