[DEV-149] add close button to messages (#1071)

* add close button to messages

* improve coding

client/src/core-components/message.js

@@ -18,6 +18,10 @@ class Message extends React.Component {
         leftAligned: false
     };
 
+    state = {
+        showMessage: true
+    }
+
     render() {
         return (
             <Motion {...this.getAnimationProps()}>
@@ -38,26 +42,35 @@ class Message extends React.Component {
     }
 
     renderMessage(style) {
+        return this.state.showMessage ? this.renderMessageContent(style) : null
+    }
+
+    renderMessageContent(style) {
+        const { children, title } = this.props;
+
         return (
             <div className={this.getClass()} style={style} aria-live="assertive">
                 <Icon className="message__icon" name={this.getIconName()} size={this.getIconSize()} />
-                <div className="message__title">{this.props.title}</div>
-                <div className="message__content">{this.props.children}</div>
+                <div className="message__title">{title}</div>
+                <div className="message__content">{children}</div>
+                {this.renderCloseButton()}
             </div>
         )
     }
 
     getClass() {
+        const { type, title, leftAligned, className } = this.props
+
         let classes = {
             'message': true,
-            'message_success': (this.props.type === 'success'),
-            'message_error': (this.props.type === 'error'),
-            'message_info': (this.props.type === 'info'),
-            'message_warning': (this.props.type === 'warning'),
-            'message_with-title': (this.props.title),
-            'message_left-aligned': (this.props.leftAligned),
+            'message_success': (type === 'success'),
+            'message_error': (type === 'error'),
+            'message_info': (type === 'info'),
+            'message_warning': (type === 'warning'),
+            'message_with-title': title,
+            'message_left-aligned': leftAligned,
 
-            [this.props.className]: (this.props.className)
+            [className]: className
         };
 
         return classNames(classes);
@@ -77,6 +90,14 @@ class Message extends React.Component {
     getIconSize() {
         return (this.props.title) ? '2x' : 'lg';
     }
+
+    renderCloseButton() {
+        return (
+            <span className="message__close-icon" onClick={() => this.setState({showMessage: false})}>
+                <Icon name="times" size="1x"/>
+            </span>
+        );
+    }
 }
 
 export default Message;

client/src/core-components/message.scss

@@ -111,4 +111,11 @@
             padding-left: 28px;
         }
     }
+
+    &__close-icon {
+        cursor: pointer;
+        position: absolute;
+        top: 5px;
+        right: 10px;
+    }
 }