From 0e5fa0b3d01a7ac531e47d8a6a3c3a01e3e67fdb Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Thu, 20 Sep 2018 10:59:49 -0400
Subject: [PATCH] Beginning multiple alerts component.
---
src/components/alerts/alert.css | 1 +
src/components/alerts/alerts.jsx | 33 +++++++++++++++++---------------
src/containers/alerts.jsx | 5 +++--
src/reducers/alerts.js | 26 ++++++++++++++++---------
4 files changed, 39 insertions(+), 26 deletions(-)
diff --git a/src/components/alerts/alert.css b/src/components/alerts/alert.css
index 3bc1c932c..2bbfccbb8 100644
--- a/src/components/alerts/alert.css
+++ b/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 {
diff --git a/src/components/alerts/alerts.jsx b/src/components/alerts/alerts.jsx
index e467c05e8..f37fdf728 100644
--- a/src/components/alerts/alerts.jsx
+++ b/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
};
diff --git a/src/containers/alerts.jsx b/src/containers/alerts.jsx
index c47d956de..db89e7a0e 100644
--- a/src/containers/alerts.jsx
+++ b/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(
diff --git a/src/reducers/alerts.js b/src/reducers/alerts.js
index bc152e38f..ad12f325f 100644
--- a/src/reducers/alerts.js
+++ b/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) {
--
GitLab