diff --git a/js/actions/global_notification_actions.js b/js/actions/global_notification_actions.js index 5304e5aa..b12f7906 100644 --- a/js/actions/global_notification_actions.js +++ b/js/actions/global_notification_actions.js @@ -6,8 +6,9 @@ import alt from '../alt'; class GlobalNotificationActions { constructor() { this.generateActions( - 'updateGlobalNotification', - 'resetGlobalNotification' + 'appendGlobalNotification', + 'shiftGlobalNotification', + 'emulateEmptyStore' ); } } diff --git a/js/components/global_notification.js b/js/components/global_notification.js index 7baec6fa..b98c0154 100644 --- a/js/components/global_notification.js +++ b/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 ( - + className += message ? 'ascribe-global-notification-on' : 'ascribe-global-notification-off'; + + return ( +
-
{this.state ? this.state.message : null}
+
{message ? message : null}
diff --git a/js/components/header.js b/js/components/header.js index 41831d80..915716d6 100644 --- a/js/components/header.js +++ b/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() { diff --git a/js/models/global_notification_model.js b/js/models/global_notification_model.js new file mode 100644 index 00000000..436be909 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/js/stores/global_notification_store.js b/js/stores/global_notification_store.js index a45b7fd5..acaa5276 100644 --- a/js/stores/global_notification_store.js +++ b/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(); } }