more error-cleanups

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

@@ -5,22 +5,20 @@ class ErrorComponent extends React.Component {
     static propTypes () {
         return {
             errors: PropTypes.array.isRequired,
-            showError: PropTypes.bool,
-            muteErrors: PropTypes.func.isRequired,
+            muteError: PropTypes.func.isRequired,
         };
     }
 
     render () {
-        const snackbarMsg = this.props.errors.join(', ');
+        const showError = this.props.errors.length > 0;
+        const error = showError ? this.props.errors[0] : undefined;
         return (
             <Snackbar
                 action="Dismiss"
-                active={this.props.showError}
+                active={showError}
                 icon="question_answer"
-                label={snackbarMsg}
-                ref="snackbar"
-                onClick={this.props.muteErrors}
-                onTimeout={this.props.muteErrors}
+                label={error}
+                onClick={() => this.props.muteError(error)}
                 type="warning"
             />
         );

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

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

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

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

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

@@ -1,9 +1,10 @@
 import { List, Map as $Map } from 'immutable';
-import { MUTE_ERRORS } from './error-actions';
+import { MUTE_ERROR } from './error-actions';
 import {
     ERROR_FETCH_FEATURE_TOGGLES,
     ERROR_CREATING_FEATURE_TOGGLE,
     ERROR_REMOVE_FEATURE_TOGGLE,
+    ERROR_UPDATE_FEATURE_TOGGLE,
 } from './feature-actions';
 
 const debug = require('debug')('unleash:error-store');
@@ -11,22 +12,26 @@ const debug = require('debug')('unleash:error-store');
 function getInitState () {
     return new $Map({
         list: new List(),
-        showError: false,
     });
 }
 
+function addErrorIfNotAlreadyInList (state, error) {
+    debug('Got error', error);
+    if (state.get('list').indexOf(error) < 0) {
+        return state.update('list', (list) => list.push(error));
+    }
+    return state;
+}
+
 const strategies = (state = getInitState(), action) => {
     switch (action.type) {
         case ERROR_CREATING_FEATURE_TOGGLE:
         case ERROR_REMOVE_FEATURE_TOGGLE:
         case ERROR_FETCH_FEATURE_TOGGLES:
-            debug('Got error', action);
-            return state
-                .update('list', (list) => list.push(action.error.message))
-                .set('showError', true);
-        case MUTE_ERRORS:
-            debug('muting errors');
-            return state.set('showError', false);
+        case ERROR_UPDATE_FEATURE_TOGGLE:
+            return addErrorIfNotAlreadyInList(state, action.error.message);
+        case MUTE_ERROR:
+            return state.update('list', (list) => list.remove(list.indexOf(action.error)));
         default:
             return state;
     }

packages/unleash-frontend-next/src/store/feature-api.js

@@ -5,19 +5,21 @@ const headers = {
     'Content-Type': 'application/json',
 };
 
+const defaultErrorMessage = 'Unexptected exception when talking to unleash-api';
+
 function throwIfNotSuccess (response) {
     if (!response.ok) {
         if (response.status > 400 && response.status < 404) {
             return new Promise((resolve, reject) => {
                 response.json().then(body => {
-                    const errorMsg = body && body.length > 0 ? body[0].msg : 'API call failed';
+                    const errorMsg = body && body.length > 0 ? body[0].msg : defaultErrorMessage;
                     let error = new Error(errorMsg);
                     error.statusCode = response.status;
                     reject(error);
                 });
             });
         } else {
-            return Promise.reject(new Error(response.statusText));
+            return Promise.reject(new Error(defaultErrorMessage));
         }
     }
     return Promise.resolve(response);