started on error-component

packages/unleash-frontend-next/src/component/app.jsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { Layout, Panel, NavDrawer, AppBar } from 'react-toolbox';
 import style from './styles.scss';
+import ErrorContainer from './error/error-container';
 
 import Navigation from './nav';
 
@@ -30,6 +31,7 @@ export default class App extends Component {
                                 {this.props.children}
                             </div>
                         </Panel>
+                        <ErrorContainer />
                     </Layout>
                 </div>
             </div>

packages/unleash-frontend-next/src/component/error/error-component.jsx

@@ -0,0 +1,31 @@
+import Snackbar from 'react-toolbox/lib/snackbar';
+import React, { PropTypes } from 'react';
+
+class ErrorComponent extends React.Component {
+    static propTypes () {
+        return {
+            errors: PropTypes.array.isRequired,
+            showError: PropTypes.bool,
+            muteErrors: PropTypes.func.isRequired,
+        };
+    }
+
+    render () {
+        const snackbarMsg = this.props.errors.join(', ');
+        return (
+            <Snackbar
+                action="Dismiss"
+                active={this.props.showError}
+                icon="question_answer"
+                label={snackbarMsg}
+                ref="snackbar"
+                timeout={2000}
+                onClick={this.props.muteErrors}
+                onTimeout={this.props.muteErrors}
+                type="warning"
+            />
+        );
+    }
+}
+
+export default ErrorComponent;

packages/unleash-frontend-next/src/component/error/error-container.jsx

@@ -0,0 +1,13 @@
+import { connect } from 'react-redux';
+import ErrorComponent from './error-component';
+import { muteErrors } from '../../store/error-actions';
+
+
+const mapDispatchToProps = {
+    muteErrors,
+};
+
+export default connect((state) => ({
+    errors: state.error.get('list').toArray(),
+    showError: state.error.get('showError'),
+}), mapDispatchToProps)(ErrorComponent);

packages/unleash-frontend-next/src/store/error-actions.js

@@ -0,0 +1,6 @@
+export const MUTE_ERRORS = 'MUTE_ERRORS';
+
+export const muteErrors = () => ({ type: MUTE_ERRORS });
+
+
+

packages/unleash-frontend-next/src/store/error-store.js

@@ -0,0 +1,28 @@
+import { List, Map as $Map } from 'immutable';
+import { ERROR_RECEIVE_FEATURE_TOGGLES } from './feature-actions';
+import { MUTE_ERRORS } from './error-actions';
+const debug = require('debug')('unleash:error-store');
+
+function getInitState () {
+    return new $Map({
+        list: new List(),
+        showError: false,
+    });
+}
+
+const strategies = (state = getInitState(), action) => {
+    switch (action.type) {
+        case ERROR_RECEIVE_FEATURE_TOGGLES:
+            debug('Got error', action);
+            return state
+                .update('list', (list) => list.push('Failed fetching feature toggles'))
+                .set('showError', true);
+        case MUTE_ERRORS:
+            debug('muting errors');
+            return state.set('showError', false);
+        default:
+            return state;
+    }
+};
+
+export default strategies;

packages/unleash-frontend-next/src/store/index.js

@@ -4,6 +4,7 @@ import strategies from './strategy-store';
 import input from './input-store';
 import history from './history-store'; // eslint-disable-line
 import archive from './archive-store';
+import error from './error-store';
 
 const unleashStore = combineReducers({
     features,
@@ -11,6 +12,7 @@ const unleashStore = combineReducers({
     input,
     history,
     archive,
+    error,
 });
 
 export default unleashStore;