Beginning multiple alerts component.

src/components/alerts/alert.css

@@ -13,6 +13,7 @@
     border-radius: 8px;
     padding: 12px;
     box-shadow: 2px 2px 2px 2px rgba(255, 140, 26, 0.25);
+    margin-bottom: 4px;
 }
 
 .alert-message {

src/components/alerts/alerts.jsx

@@ -8,33 +8,36 @@ import styles from './alert.css';
 
 const Alerts = ({
     className,
-    message,
+    alertsList,
     onCloseAlert
 }) => (
     <Box
         bounds="parent"
         className={classNames(className)}
     >
-        <Box
-            className={styles.alert}
-        >
-            <div className={styles.alertMessage}>
-                {message}
-            </div>
-            <Button
-                className={styles.alertRemoveButton}
-                onClick={onCloseAlert}
+        {alertsList.map((a, index) => (
+            <Box
+                className={styles.alert}
+                key={index}
             >
-                { /* eslint-disable react/jsx-no-literals */ }
-                x
-            </Button>
-        </Box>
+                <div className={styles.alertMessage}>
+                    {a.message}
+                </div>
+                <Button
+                    className={styles.alertRemoveButton}
+                    onClick={() => onCloseAlert(index)}
+                >
+                    { /* eslint-disable react/jsx-no-literals */ }
+                    x
+                </Button>
+            </Box>
+        ))}
     </Box>
 );
 
 Alerts.propTypes = {
+    alertsList: PropTypes.arrayOf(PropTypes.object),
     className: PropTypes.string,
-    message: PropTypes.string.isRequired,
     onCloseAlert: PropTypes.func.isRequired
 };
 

src/containers/alerts.jsx

@@ -9,12 +9,13 @@ import AlertsComponent from '../components/alerts/alerts.jsx';
 
 const mapStateToProps = state => ({
     visible: state.scratchGui.alerts.visible,
-    message: state.scratchGui.alerts.message
+    message: state.scratchGui.alerts.message,
+    alertsList: state.scratchGui.alerts.alertsList
 });
 
 const mapDispatchToProps = dispatch => ({
     onShowAlert: () => dispatch(showAlert()),
-    onCloseAlert: () => dispatch(closeAlert())
+    onCloseAlert: index => dispatch(closeAlert(index))
 });
 
 export default connect(

src/reducers/alerts.js

@@ -2,29 +2,37 @@ const CLOSE_ALERT = 'scratch-gui/alerts/CLOSE_ALERT';
 const SHOW_ALERT = 'scratch-gui/alerts/SHOW_ALERT';
 
 const initialState = {
-    message: '',
-    visible: false
+    visible: true,
+    alertsList: []
 };
 
 const reducer = function (state, action) {
     if (typeof state === 'undefined') state = initialState;
     switch (action.type) {
-    case SHOW_ALERT:
+    case SHOW_ALERT: {
+        const newList = state.alertsList.slice();
+        newList.push({message: action.message});
         return Object.assign({}, state, {
-            visible: true,
-            message: action.message
+            alertsList: newList
         });
-    case CLOSE_ALERT:
+    }
+    case CLOSE_ALERT: {
+        const newList = state.alertsList.slice();
+        newList.splice(action.index, 1);
         return Object.assign({}, state, {
-            visible: false
+            alertsList: newList
         });
+    }
     default:
         return state;
     }
 };
 
-const closeAlert = function () {
-    return {type: CLOSE_ALERT};
+const closeAlert = function (index) {
+    return {
+        type: CLOSE_ALERT,
+        index
+    };
 };
 
 const showAlert = function (message) {