Update component ErrorList

Author: gocreating

src/common/components/utils/ErrorList.js

@@ -1,46 +1,40 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import Grid from 'react-bootstrap/lib/Grid';
+import Alert from 'react-bootstrap/lib/Alert';
 import Errors from '../../constants/Errors';
 import { removeError } from '../../actions/errorActions';
 
+function renderMeta(error) {
+  let messages = [];
+  if (error.code === Errors.STATE_PRE_FETCHING_FAIL.code) {
+    messages.push(error.meta.detail);
+  }
+  if (error.meta.path) {
+    messages.push(`(at path '${error.meta.path}')`);
+  }
+  if (error.code === Errors.UNKNOWN_EXCEPTION.code) {
+    messages.push(error.meta.toString());
+  }
+  return messages.map((message) => (
+    <p key={message}>
+      {message}
+    </p>
+  ));
+}
+
 let ErrorList = ({ errors, dispatch }) => (
   <Grid>
     {errors.map((error) => (
-      <div
+      <Alert
         key={error.id}
-        className="alert alert-danger alert-dismissible"
-        role="alert"
+        bsStyle="danger"
+        onDismiss={() => dispatch(removeError(error.id))}
       >
-        <button
-          type="button"
-          className="close"
-          data-dismiss="alert"
-          aria-label="Close"
-          onClick={() => dispatch(removeError(error.id))}
-        >
-          <span aria-hidden="true">&times;</span>
-        </button>
-        <strong>{error.title}</strong>
+        <h4>{error.title}</h4>
         {' ' + error.detail}
-        {error.meta && [(
-          <p key="0">
-            {error.code === Errors.STATE_PRE_FETCHING_FAIL.code && (
-              <span>{error.meta.detail}</span>
-            )}
-          </p>
-        ), (
-          <p key="1">
-            {error.meta.path && `(at path '${error.meta.path}')`}
-          </p>
-        ), (
-          <p key="2">
-            {error.code === Errors.UNKNOWN_EXCEPTION.code && (
-              <span>{error.meta.toString()}</span>
-            )}
-          </p>
-        )]}
-      </div>
+        {error.meta && renderMeta(error)}
+      </Alert>
     ))}
   </Grid>
 );