Notifications in place

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
     }