at the end of the day, it was inevitable

frontend/app/components/common/alerts/Alert.js

@@ -0,0 +1,53 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { translate, Interpolate } from 'react-i18next'
+
+export class Alert extends React.Component {
+  static propTypes = {
+    alert: PropTypes.func.isRequired,
+    removeAlert: PropTypes.func.isRequired,
+    t: PropTypes.func.isRequired
+  };
+
+  componentDidMount = () => {
+    setTimeout(this.closeAlert, 5000)
+  };
+
+  closeAlert = () => {
+    const { removeAlert, alert } = this.props
+    removeAlert(alert.id)
+  };
+
+  onClose = (e) => {
+    e.preventDefault()
+    this.closeAlert()
+  };
+
+  render () {
+    const { alert } = this.props
+    const interpolateParameters = alert.parameters || {}
+    return (
+      <div className={'alert ' + alert.type}>
+        <div className="alert__head">
+          <h2 className="alert__title">{alert.type}</h2>
+
+          <a href="#" className="alert__close-btn" onClick={this.onClose}>
+            <i className="fa fa-times"> </i>
+          </a>
+        </div>
+
+        <div className="alert__body">
+          <p className="alert__text">
+            <Interpolate
+              i18nKey={'alerts.' + alert.type + '.' + alert.transKey}
+              {...interpolateParameters}
+              options={{defaultValue: alert.message || 'Unknown error'}}
+            />
+          </p>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default translate(['common'], { wait: true })(Alert)

frontend/app/components/common/alerts/Alerts.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Alert from './Alert'
+
+export class Alerts extends React.Component {
+  static propTypes = {
+    alerts: PropTypes.array.isRequired,
+    removeAlert: PropTypes.func.isRequired
+  };
+
+  forEachAlert = (callback) => {
+    return this.props.alerts
+      .map((alert) => {
+        return (typeof alert === 'string') ? {message: alert} : alert
+      })
+      .map(callback)
+  };
+
+  render () {
+    const { alerts, removeAlert } = this.props
+    if (alerts.length <= 0) return null
+
+    return (
+      <div className="alerts-container">
+        {this.forEachAlert((alert, i) => {
+          return (
+            <Alert
+              key={i}
+              removeAlert={removeAlert}
+              alert={alert}
+            />
+          )
+        })}
+      </div>
+    )
+  }
+
+}
+
+export default Alerts