Notifications in place

src/js/bootstrap.js

@@ -64,7 +64,8 @@ var initialState = {
 			playlists: [],
 			tracks: []
 		},
-		playlists: []
+		playlists: [],
+		notifications: []
 	}
 };
 

src/js/components/Notifications.js

@@ -0,0 +1,47 @@
+
+import React, { PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import FontAwesome from 'react-fontawesome'
+
+import * as actions from '../services/ui/actions'
+
+class Notifications extends React.Component{
+
+	constructor(props) {
+		super(props)
+	}
+
+	render(){
+		if( !this.props.notifications ) return null
+
+		return (
+			<div className="notifications">
+				{
+					this.props.notifications.map( notification => {
+						return (
+							<div className={ notification.type+" notification" } key={ notification.id }>
+								<FontAwesome name="close" className="close-button" onClick={ e => this.props.actions.removeNotification(notification.id) } />
+								{ notification.content }
+							</div>
+						)
+					})
+				}
+			</div>
+		)
+	}
+}
+
+const mapStateToProps = (state, ownProps) => {
+	return {
+		notifications: state.ui.notifications
+	}
+}
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		actions: bindActionCreators(actions, dispatch)
+	}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Notifications)

src/js/services/localstorage/middleware.js

@@ -12,7 +12,7 @@ const localstorageMiddleware = (function(){
 
         // append our state to a global variable. This gives us access to debug the store at any point
         window._store = store
-        console.log(action)
+        //console.log(action)
 
         switch( action.type ){
 

src/js/services/ui/actions.js

@@ -183,6 +183,13 @@ export function addTracksToPlaylist( playlist_uri, tracks_uris ){
     }
 }
 
+
+/**
+ * Modal
+ *
+ * Immersive full-screen dialog
+ **/
+
 export function openModal( name, data ){
     return { 
         type: 'OPEN_MODAL',
@@ -197,3 +204,30 @@ export function closeModal(){
     return { type: 'CLOSE_MODAL' }
 }
 
+
+/**
+ * Notifications
+ *
+ * Subtle info/tooltip messages
+ **/
+
+export function createNotification( content, type = 'default' ){
+    return { 
+        type: 'CREATE_NOTIFICATION',
+        notification: {
+            id: helpers.generateGuid(),
+            type: type,
+            content: content
+        }
+    }
+}
+
+export function removeNotification( id ){
+    return { 
+        type: 'REMOVE_NOTIFICATION',
+        id: id
+    }
+}
+
+
+

src/js/services/ui/middleware.js

@@ -10,13 +10,26 @@ const UIMiddleware = (function(){
      * The actual middleware inteceptor
      **/
     return store => next => action => {
-        var state = store.getState();
 
         switch(action.type){
 
+            case 'CREATE_NOTIFICATION':
+
+                // start a timeout to remove this notification
+                var timeout = setTimeout(
+                    function(){
+                        store.dispatch(actions.removeNotification(action.notification.id))
+                    },
+                    3000
+                )
+
+                // we don't want to stop things happening as usual
+                next(action)
+                break
+
             // This action is irrelevant to us, pass it on to the next middleware
             default:
-                return next(action);
+                return next(action)
         }
     }
 

src/js/services/ui/reducer.js

@@ -396,6 +396,26 @@ export default function reducer(ui = {}, action){
             return Object.assign({}, ui, { modal: false })
 
 
+        /**
+         * Notifications
+         **/
+
+        case 'CREATE_NOTIFICATION':
+            var notifications = [...ui.notifications, action.notification]
+            return Object.assign({}, ui, { notifications: notifications })
+
+        case 'REMOVE_NOTIFICATION':
+            var notifications = Object.assign([], ui.notifications)
+
+            function getByID( notification ){
+                return notification.id === action.id
+            }
+            var index = notifications.findIndex(getByID)
+            if( index > -1 ) notifications.splice(index, 1)
+
+            return Object.assign({}, ui, { notifications: notifications })
+
+
         default:
             return ui
     }

src/js/views/App.js

@@ -11,6 +11,7 @@ import SidebarToggleButton from '../components/SidebarToggleButton'
 import ContextMenu from '../components/ContextMenu'
 import Dragger from '../components/Dragger'
 import Modal from '../components/Modal/Modal'
+import Notifications from '../components/Notifications'
 
 import * as uiActions from '../services/ui/actions'
 import * as pusherActions from '../services/pusher/actions'
@@ -130,6 +131,7 @@ class App extends React.Component{
 		        <ContextMenu state={this.props.context_menu} />
 		        <Dragger />
 		        <Modal />
+		        <Notifications />
 	        </div>
 		);
 	}

src/js/views/Debug.js

@@ -49,6 +49,7 @@ class Debug extends React.Component{
 		e.preventDefault()
 		console.info('Mopidy Debugger', this.state.mopidy_call, JSON.parse(this.state.mopidy_data) )
 		this.props.mopidyActions.debug( this.state.mopidy_call, JSON.parse(this.state.mopidy_data) )
+		this.props.uiActions.createNotification( 'Mopidy instruction sent' )
 	}
 
 	callPusher(e){
@@ -56,6 +57,7 @@ class Debug extends React.Component{
 		console.info('Pusher Debugger', this.state.pusher_call, JSON.parse(this.state.pusher_data) )
 		this.props.pusherActions.debug( this.state.pusher_call, JSON.parse(this.state.pusher_data) )
 		this.props.uiActions.debugResponse({ status: 1, message: 'Sent', call: this.state.pusher_call, data: this.state.pusher_data })
+		this.props.uiActions.createNotification( 'Pusher instruction sent' )
 	}
 
 	render(){