refactor globalnotification

js/components/global_notification.js

@@ -11,6 +11,16 @@ import { mergeOptions } from '../utils/general_utils';
 
 let GlobalNotification = React.createClass({
 
+    getInitialState() {
+        return mergeOptions(
+            {
+                containerWidth: 0,
+                type: 'success'
+            },
+            this.extractFirstElem(GlobalNotificationStore.getState().notificationQue)
+        );
+    },
+
     componentDidMount() {
         GlobalNotificationStore.listen(this.onChange);
 
@@ -27,17 +37,8 @@ let GlobalNotification = React.createClass({
         window.removeEventListener('resize', this.handleContainerResize);
     },
 
-    getInititalState() {
-        return mergeOptions(
-            this.extractFirstElem(GlobalNotificationStore.getState().notificationQue),
-            {
-                containerWidth: 0
-            }
-        );
-    },
-
     extractFirstElem(l) {
-        return l.length > 0 ? l[0] : null;
+        return l.length > 0 ? l[0] : {message: ''};
     },
 
     onChange(state) {
@@ -46,49 +47,59 @@ let GlobalNotification = React.createClass({
         if(notification) {
             this.setState(notification);
         } else {
-            this.replaceState(null);
+            this.replaceState({
+                message: ''
+            });
         }
     },
 
     handleContainerResize() {
         this.setState({
-            containerWidth: this.refs.containerWrapper.getDOMNode().offsetWidth
+            containerWidth: this.refs.notificationWrapper.getDOMNode().offsetWidth
         });
     },
 
     render() {
-        console.log(this.state);
-        let notificationClass = 'ascribe-global-notification ';
+        let notificationClass = 'ascribe-global-notification';
+        let textClass;
         let message = this.state && this.state.message ? this.state.message : null;
 
         if(message) {
-            let colors = {
-                warning: '#f0ad4e',
-                success: '#5cb85c',
-                info: 'rgba(2, 182, 163, 1)',
-                danger: '#d9534f'
-            };
+            notificationClass += ' ascribe-global-notification-on';
+        } else {
+            notificationClass += ' ascribe-global-notification-off';
+        }
 
-            let text = (<div style={{color: colors[this.state.type]}}>{message ? message : null}</div>);
+        if(this.state) {
+            switch(this.state.type) {
+                case 'warning':
+                    textClass = 'ascribe-global-notification-warning';
+                    break;
+                case 'success':
+                    textClass = 'ascribe-global-notification-success';
+                    break;
+                case 'info':
+                    textClass = 'ascribe-global-notification-info';
+                    break;
+                case 'danger':
+                    textClass = 'ascribe-global-notification-danger';
+                    break;
+                default:
+                    console.warn('Could not find a matching type in global_notification.js');
+            }
+        }
 
-            return (
+        return (
+            <div ref="notificationWrapper">
                 <Row>
                     <Col>
-                        <div className={notificationClass + 'ascribe-global-notification-on'}>
-                            {text}
+                        <div className={notificationClass}>
+                            <div className={textClass}>{message ? message : null}</div>
                         </div>
                     </Col>
                 </Row>
-            );
-        } else {
-            return (
-                <Row>
-                    <Col>
-                        <div className={notificationClass + 'ascribe-global-notification-off'} />
-                    </Col>
-                </Row>
-            );
-        }
+            </div>
+        );
     }
 });
 

js/utils/general_utils.js

@@ -70,11 +70,17 @@ export function formatText() {
 function _doesObjectListHaveDuplicates(l) {
     let mergedList = [];
 
-    l = l.map((obj) => Object.keys(obj));
+    l = l.map((obj) => {
+        if(!obj) {
+            throw new Error('The object you are trying to merge is null instead of an empty object');
+        }
+
+        return Object.keys(obj);
+    });
 
     // Taken from: http://stackoverflow.com/a/10865042
     // How to flatten an array of arrays in javascript.
-    // If two objects contain the same key, then these two keys 
+    // If two objects contain the same key, then these two keys
     // will actually be represented in the merged array
     mergedList = mergedList.concat.apply(mergedList, l);
 
@@ -102,6 +108,7 @@ export function mergeOptions(...l) {
     for(let i = 1; i < l.length; i++) {
         newObj = _mergeOptions(newObj, _mergeOptions(l[i - 1], l[i]));
     }
+
     return newObj;
 }
 

sass/ascribe-global-notification.scss

@@ -21,9 +21,24 @@
 .ascribe-global-notification > div {
     display:table-cell;
     vertical-align: middle;
-    color: $ascribe-color-full;
     font-size: 1.25em;
     font-family: 'Source Sans Pro';
     text-align: right;
     padding-right: 3em;
+}
+
+.ascribe-global-notification-warning {
+    color: #f0ad4e;
+}
+
+.ascribe-global-notification-danger {
+    color: #d9534f;
+}
+
+.ascribe-global-notification-success {
+    color: #5cb85c;
+}
+
+.ascribe-global-notification-info {
+    color: rgba(2, 182, 163, 1);
 }