Process action naming convention

src/js/services/ui/actions.js

@@ -228,30 +228,31 @@ export function stopLoading(key) {
   };
 }
 
-export function startProcess(key, message, data = {}, description = null) {
+export function startProcess(key, content, data = {}, description = null) {
   return {
     type: 'START_PROCESS',
     key,
-    message,
     data,
+    content,
     description,
   };
 }
 
-export function resumeProcess(key, message, data = {}) {
+export function resumeProcess(key) {
   return {
     type: 'RESUME_PROCESS',
     key,
   };
 }
 
-export function updateProcess(key, message, data = {}, description = null) {
+export function updateProcess(key, content, data = {}, description = null, level = 'info') {
   return {
     type: 'UPDATE_PROCESS',
     key,
-    message,
+    content,
     data,
     description,
+    level,
   };
 }
 
@@ -276,16 +277,24 @@ export function processCancelled(key) {
   };
 }
 
-export function processFinishing(key) {
+export function processFinished(key, completionMessage = null) {
   return {
-    type: 'PROCESS_FINISHING',
+    type: 'PROCESS_FINISHED',
+    key,
+    completionMessage,
+  };
+}
+
+export function closeProcess(key) {
+  return {
+    type: 'CLOSE_PROCESS',
     key,
   };
 }
 
-export function processFinished(key) {
+export function removeProcess(key) {
   return {
-    type: 'PROCESS_FINISHED',
+    type: 'REMOVE_PROCESS',
     key,
   };
 }

src/js/services/ui/middleware.js

@@ -5,12 +5,12 @@ import * as helpers from '../../helpers';
 const uiActions = require('./actions.js');
 const mopidyActions = require('../mopidy/actions.js');
 
-const UIMiddleware = (function () {
+const UIMiddleware = (function () {
   /**
      * The actual middleware inteceptor
      * */
   return (store) => (next) => (action) => {
-    switch (action.type) {
+    switch (action.type) {
       case 'MOPIDY_STATE':
 
         // Get the current track from our index
@@ -117,7 +117,7 @@ const UIMiddleware = (function () {
 
         // start a timeout to close this notification
         if (!action.notification.sticky) {
-          var timeout = setTimeout(
+          setTimeout(
             () => {
               store.dispatch(uiActions.closeNotification(action.notification.key));
             },
@@ -133,7 +133,7 @@ const UIMiddleware = (function () {
 
         // start a timeout to remove this notification
         // This gives us time to animate out the notification before we remove the data
-        var timeout = setTimeout(
+        setTimeout(
           () => {
             store.dispatch(uiActions.removeNotification(action.key));
           },
@@ -214,32 +214,51 @@ const UIMiddleware = (function () {
         next(action);
         break;
 
-      case 'PROCESS_FINISHING':
-
-        // start a timeout to remove this notification
-        // This gives us time to animate out the notification before we remove the data
-        var timeout = setTimeout(
-          () => {
-            store.dispatch(uiActions.processFinished(action.key));
-          },
-          200,
-        );
-
-        next(action);
-        break;
-
       case 'PROCESS_FINISHED':
         store.dispatch({
           type: `${action.key}_FINISHED`,
         });
+
+        // start a timeout to remove this notification
+        // This gives us time to animate out the notification before we remove the data
+        if (action.completionMessage) {
+          store.dispatch(uiActions.updateProcess(
+            action.key,
+            action.completionMessage.content,
+            {},
+            action.completionMessage.description,
+            action.completionMessage.level,
+          ));
+          if (!action.completionMessage.sticky) {
+            setTimeout(
+              () => {
+                store.dispatch(uiActions.closeProcess(action.key));
+              },
+              5000,
+            );
+          }
+        } else {
+          store.dispatch(uiActions.closeProcess(action.key));
+        }
+
         next(action);
         break;
 
-        // This action is irrelevant to us, pass it on to the next middleware
+      case 'CLOSE_PROCESS':
+        setTimeout(
+          () => {
+            store.dispatch(uiActions.removeProcess(action.key));
+          },
+          200,
+        );
+        next(action);
+        break;
+
+      // This action is irrelevant to us, pass it on to the next middleware
       default:
         return next(action);
     }
-  };
+  };
 }());
 
-export default UIMiddleware;
+export default UIMiddleware;

src/js/services/ui/reducer.js

@@ -162,9 +162,10 @@ export default function reducer(ui = {}, action) {
       }
       processes[action.key] = {
         key: action.key,
-        message: action.message,
+        content: action.content,
         description: action.description,
         status: 'running',
+        level: action.level,
         data,
       };
       return { ...ui, processes };
@@ -190,17 +191,24 @@ export default function reducer(ui = {}, action) {
       }
       return { ...ui, processes };
 
-    case 'PROCESS_FINISHING':
+    case 'PROCESS_FINISHED':
+      var processes = { ...(ui.processes ? ui.processes : {}) };
+      if (processes[action.key]) {
+        processes[action.key] = { ...processes[action.key], status: 'finished' };
+      }
+      return { ...ui, processes };
+
+    case 'CLOSE_PROCESS':
       var processes = { ...(ui.processes ? ui.processes : {}) };
       if (processes[action.key]) {
         processes[action.key] = { ...processes[action.key], closing: true };
       }
       return { ...ui, processes };
 
-    case 'PROCESS_FINISHED':
+    case 'REMOVE_PROCESS':
       var processes = { ...(ui.processes ? ui.processes : {}) };
       if (processes[action.key]) {
-        processes[action.key] = { ...processes[action.key], status: 'finished', closing: false };
+        processes[action.key] = { ...processes[action.key], status: 'completed', closing: false };
       }
       return { ...ui, processes };