add que functionality to globalnotification

js/actions/global_notification_actions.js

@@ -6,8 +6,9 @@ import alt from '../alt';
 class GlobalNotificationActions {
     constructor() {
         this.generateActions(
-            'updateGlobalNotification',
-            'resetGlobalNotification'
+            'appendGlobalNotification',
+            'shiftGlobalNotification',
+            'emulateEmptyStore'
         );
     }
 }

js/components/global_notification.js

@@ -15,36 +15,38 @@ let GlobalNotification = React.createClass({
     },
 
     componentWillUnmount() {
-        GlobalNotificationStore.listen(this.onChange);
+        GlobalNotificationStore.unlisten(this.onChange);
     },
 
     getInititalState() {
-        return GlobalNotificationStore.getState();
+        return this.extractFirstElem(GlobalNotificationStore.getState().notificationQue);
+    },
+
+    extractFirstElem(l) {
+        return l.length > 0 ? l[0] : null;
     },
 
     onChange(state) {
-        this.setState(state);
-        if(state.message && state.dismissAfter) {
-            setTimeout(GlobalNotificationActions.resetGlobalNotification, state.dismissAfter);
-        }
-    },
+        let notification = this.extractFirstElem(state.notificationQue);
 
-    onClick() {
-        if(this.state.onClick) {
-            this.state.onClick();
+        if(notification) {
+            this.setState(notification);
+        } else {
+            this.replaceState(null);
         }
-        GlobalNotificationActions.resetGlobalNotification();
     },
 
     render() {
         let className = 'ascribe-global-notification ';
-        className += this.state && this.state.message ? 'ascribe-global-notification-on' : 'ascribe-global-notification-off';
+        let message = this.state && this.state.message ? this.state.message : null;
 
-         return (
-            <Row onClick={this.onClick}>
+        className += message ? 'ascribe-global-notification-on' : 'ascribe-global-notification-off';
+
+        return (
+            <Row>
                 <Col>
                     <div className={className}>
-                        <div>{this.state ? this.state.message : null}</div>
+                        <div>{message ? message : null}</div>
                     </div>
                 </Col>
             </Row>

js/components/header.js

@@ -14,6 +14,7 @@ import MenuItem from 'react-bootstrap/lib/MenuItem';
 import { getLangText } from '../utils/lang_utils';
 
 import GlobalNotificationActions from '../actions/global_notification_actions';
+import GlobalNotificationModel from '../models/global_notification_model';
 
 let Link = Router.Link;
 
@@ -37,7 +38,8 @@ let Header = React.createClass({
     },
 
     showNotification() {
-        GlobalNotificationActions.updateGlobalNotification({message: 'transaction successful', dismissAfter: 2000});
+        let notification = new GlobalNotificationModel('transaction successful', 3500);
+        GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
     render() {

js/models/global_notification_model.js

@@ -0,0 +1,13 @@
+'use strict';
+
+export default class GlobalNotificationModel {
+    constructor(message, dismissAfter) {
+        if(!message) {
+            throw new Error('A notifications message must be defined.');
+        } else {
+            this.message = message;
+        }
+
+        this.dismissAfter = dismissAfter ? dismissAfter : 0;
+    }
+}

js/stores/global_notification_store.js

@@ -6,34 +6,34 @@ import GlobalNotificationActions from '../actions/global_notification_actions';
 
 class GlobalNotificationStore {
     constructor() {
-        this.message = '';
-        this.action = '';
-        this.styles = {};
-        this.onClick = null;
-        this.dismissAfter = 0;
+        this.notificationQue = [];
 
         this.bindActions(GlobalNotificationActions);
     }
 
-    onUpdateGlobalNotification({message, action, styles, onClick, dismissAfter}) {
-        if(!message) {
-            throw new Error('A notifications message must be defined.');
-        } else {
-            this.message = message;
+    onAppendGlobalNotification(newNotification) {
+        let notificationDelay = 0;
+        for(let i = 0; i < this.notificationQue.length; i++) {
+            notificationDelay += this.notificationQue[i].dismissAfter;
         }
 
-        this.action = action ? action : '';
-        this.styles = styles ? styles : {};
-        this.onClick = onClick ? onClick : null;
-        this.dismissAfter = dismissAfter ? dismissAfter : 0;
+        this.notificationQue.push(newNotification);
+        setTimeout(GlobalNotificationActions.emulateEmptyStore, notificationDelay + newNotification.dismissAfter);
     }
 
-    onResetGlobalNotification() {
-        this.message = '';
-        this.action = '';
-        this.styles = {};
-        this.onClick = null;
-        this.dismissAfter = 0;
+    onEmulateEmptyStore() {
+        let actualNotificitionQue = this.notificationQue.slice();
+
+        this.notificationQue = [];
+
+        setTimeout(() => {
+            this.notificationQue = actualNotificitionQue.slice();
+            GlobalNotificationActions.shiftGlobalNotification();
+        }, 400);
+    }
+
+    onShiftGlobalNotification() {
+        this.notificationQue.shift();
     }
 }