Show toast on failed request

client/src/components/App/index.js

@@ -3,10 +3,8 @@ import { HashRouter, Route } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
 import 'react-table/react-table.css';
-import 'alertifyjs/build/css/alertify.min.css';
 import '../ui/Tabler.css';
 import '../ui/ReactTable.css';
-import '../ui/Alertify.css';
 import './index.css';
 
 import Header from '../../containers/Header';
@@ -15,6 +13,7 @@ import Settings from '../../containers/Settings';
 import Filters from '../../containers/Filters';
 import Logs from '../../containers/Logs';
 import Footer from '../ui/Footer';
+import Toasts from '../Toasts';
 
 import Status from '../ui/Status';
 
@@ -51,6 +50,7 @@ class App extends Component {
                         }
                     </div>
                     <Footer />
+                    <Toasts />
                 </Fragment>
             </HashRouter>
         );
@@ -62,6 +62,7 @@ App.propTypes = {
     enableDns: PropTypes.func,
     dashboard: PropTypes.object,
     isCoreRunning: PropTypes.bool,
+    error: PropTypes.string,
 };
 
 export default App;

client/src/components/Dashboard/index.js

@@ -26,7 +26,6 @@ class Dashboard extends Component {
             dashboard.processingStatsHistory ||
             dashboard.processingTopStats;
 
-        const disableButton = <button type="button" className="btn btn-outline-secondary btn-sm mr-2" onClick={() => this.props.disableDns()}>Disable DNS</button>;
         const refreshFullButton = <button type="button" className="btn btn-outline-primary btn-sm" onClick={() => this.componentDidMount()}>Refresh statistics</button>;
         const refreshButton = <button type="button" className="btn btn-outline-primary btn-sm card-refresh" onClick={() => this.componentDidMount()}></button>;
 
@@ -34,7 +33,6 @@ class Dashboard extends Component {
             <Fragment>
                 <PageTitle title="Dashboard">
                     <div className="page-title__actions">
-                        {disableButton}
                         {refreshFullButton}
                     </div>
                 </PageTitle>

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);
+

client/src/components/ui/Alertify.css

@@ -1,9 +0,0 @@
-.alertify-notifier .ajs-message {
-    width: 280px;
-    font-weight: 600;
-    color: #fff;
-}
-
-.alertify-notifier .ajs-message.ajs-error {
-    background-color: rgba(236, 53, 53, 0.76);
-}