First WIP version of FlashMessages & Alert components

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;

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;