diff --git a/src/components/alerts/alert.css b/src/components/alerts/alert.css index 3bc1c932c723bc55fdde203b07e5d32f4f127724..2bbfccbb8dc98088a9fca183faac97203c11acee 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 e467c05e8a644d23de76c4f98b7f7f0aa26db35c..f37fdf728e4605473f92799a88699bed4170e70d 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 c47d956dea31b7021a5f27fb26ed8612558fca1e..db89e7a0e12ad81ac62af32543f3fb989816068d 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 bc152e38f380f93969e34ebe68dadf1c9dead572..ad12f325fc6717d9970f1fa860e9316eb5ed8707 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) {