From 82d672293aabcb29208bbeb0742c410edc283353 Mon Sep 17 00:00:00 2001
From: Luka Murn <luka.murn@biosistemika.com>
Date: Wed, 27 Sep 2017 17:29:04 +0200
Subject: [PATCH] First WIP version of FlashMessages & Alert components

---
 .../FlashMessages/components/Alert.jsx        | 83 +++++++++++++++++++
 .../src/components/FlashMessages/index.jsx    | 39 +++++++++
 2 files changed, 122 insertions(+)
 create mode 100644 app/javascript/src/components/FlashMessages/components/Alert.jsx
 create mode 100644 app/javascript/src/components/FlashMessages/index.jsx

diff --git a/app/javascript/src/components/FlashMessages/components/Alert.jsx b/app/javascript/src/components/FlashMessages/components/Alert.jsx
new file mode 100644
index 000000000..523461956
--- /dev/null
+++ b/app/javascript/src/components/FlashMessages/components/Alert.jsx
@@ -0,0 +1,83 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+class Alert extends Component {
+
+  static alertClass (type) {
+    const classes = {
+      error: "alert-danger",
+      alert: "alert-warning",
+      notice: "alert-info",
+      success: "alert-success"
+    };
+    return classes[type] || classes.success;
+  }
+
+  static glyphiconClass (type) {
+    const classes = {
+      error: "glyphicon-exclamation-sign",
+      alert: "glyphicon-exclamation-sign",
+      notice: "glyphicon-info-sign",
+      success: "glyphicon-ok-sign"
+    };
+    return classes[type] || classes.success;
+  }
+
+  componentDidMount() {
+    this.timer = setTimeout(
+      this.props.onClose,
+      this.props.timeout
+    );
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timer);
+  }
+
+  render() {
+    const message = this.props.message;
+    const alertClassName =
+      `alert
+       ${this.alertClass(message.type)}
+       alert-dismissable
+       alert-floating
+       fade in`;
+    const glyphiconClassName =
+      `glyphicon
+       ${this.glyphiconClass(message.type)}`;
+
+    return(
+      <div className={alertClassName}>
+        <div className="container">
+          <button type="button"
+                  className="close"
+                  data-dismiss="alert"
+                  aria-label="Close"
+                  onClick={this.props.onClose}
+          >
+            <span aria-hidden="true">×</span>
+          </button>
+          <span className={glyphiconClassName} />
+          <span>{message.text}</span>
+        </div>
+      </div>
+    );
+  }
+}
+
+Alert.propTypes = {
+  onClose: PropTypes.func,
+  timeout: PropTypes.number,
+  message: PropTypes.shape({
+    id: PropTypes.number,
+    type: PropTypes.string.isRequired,
+    text: PropTypes.string.isRequired
+  }).isRequired
+};
+
+Alert.defaultProps = {
+  onClose: null,
+  timeout: 3000
+};
+
+export default Alert;
\ No newline at end of file
diff --git a/app/javascript/src/components/FlashMessages/index.jsx b/app/javascript/src/components/FlashMessages/index.jsx
new file mode 100644
index 000000000..ce4064156
--- /dev/null
+++ b/app/javascript/src/components/FlashMessages/index.jsx
@@ -0,0 +1,39 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import Alert from "./components/Alert";
+
+class FlashMessages extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      messages: props.messages
+    };
+  }
+
+  render () {
+    return(
+      <div id="notifications">
+        {this.state.messages.map(message =>
+          <Alert key={message.id} message={message} />)
+        }
+      </div>
+    );
+  }
+}
+
+FlashMessages.propTypes = {
+  messages: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      type: PropTypes.string.isRequired,
+      text: PropTypes.string.isRequired
+    })
+  )
+};
+
+FlashMessages.defaultProps = {
+  messages: []
+}
+
+export default FlashMessages;
\ No newline at end of file