Show toast on failed request

client/src/components/Toasts/Toast.css

@@ -0,0 +1,60 @@
+.toasts {
+    position: fixed;
+    right: 24px;
+    bottom: 24px;
+    z-index: 10;
+    width: 345px;
+}
+
+.toast {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 12px;
+    padding: 16px;
+    font-weight: 600;
+    color: #ffffff;
+    border-radius: 4px;
+    background-color: rgba(236, 53, 53, 0.75);
+}
+
+.toast--success {
+    background-color: rgba(90, 173, 99, 0.75);
+}
+
+.toast:last-child {
+    margin-bottom: 0;
+}
+
+.toast__content {
+    flex: 1 1 auto;
+    margin: 0 12px 0 0;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.toast__dismiss {
+    display: block;
+    flex: 0 0 auto;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+}
+
+.toast-enter {
+    opacity: 0.01;
+}
+
+.toast-enter-active {
+    opacity: 1;
+    transition: all 0.3s ease-out;
+}
+
+.toast-exit {
+    opacity: 1;
+}
+
+.toast-exit-active {
+    opacity: 0.01;
+    transition: all 0.3s ease-out;
+}

client/src/components/Toasts/Toast.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+class Toast extends Component {
+    componentDidMount() {
+        setTimeout(() => {
+            this.props.removeToast(this.props.id);
+        }, 30000);
+    }
+
+    shouldComponentUpdate() {
+        return false;
+    }
+
+    render() {
+        return (
+            <div className={`toast toast--${this.props.type}`}>
+                <p className="toast__content">
+                    {this.props.message}
+                </p>
+                <button className="toast__dismiss" onClick={() => this.props.removeToast(this.props.id)}>
+                    <svg stroke="#fff" fill="none" width="20" height="20" strokeWidth="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m18 6-12 12"/><path d="m6 6 12 12"/></svg>
+                </button>
+            </div>
+        );
+    }
+}
+
+Toast.propTypes = {
+    id: PropTypes.string.isRequired,
+    message: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+    removeToast: PropTypes.func.isRequired,
+};
+
+export default Toast;

client/src/components/Toasts/index.js

@@ -0,0 +1,42 @@
+import { connect } from 'react-redux';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import * as actionCreators from '../../actions';
+import Toast from './Toast';
+
+import './Toast.css';
+
+const Toasts = props => (
+    <TransitionGroup className="toasts">
+        {props.toasts.notices && props.toasts.notices.map((toast) => {
+            const { id } = toast;
+            return (
+                <CSSTransition
+                    key={id}
+                    timeout={500}
+                    classNames="toast"
+                >
+                    <Toast removeToast={props.removeToast} {...toast} />
+                </CSSTransition>
+            );
+        })}
+    </TransitionGroup>
+);
+
+Toasts.propTypes = {
+    toasts: PropTypes.object,
+    removeToast: PropTypes.func,
+};
+
+const mapStateToProps = (state) => {
+    const { toasts } = state;
+    const props = { toasts };
+    return props;
+};
+
+export default connect(
+    mapStateToProps,
+    actionCreators,
+)(Toasts);
+