diff --git a/src/components/alerts/alert.css b/src/components/alerts/alert.css index 181023d183f61caccf59fdccc36c6a507e3af757..250c79d2a9f77fd6f0872244dc25b2dc3eefbb15 100644 --- a/src/components/alerts/alert.css +++ b/src/components/alerts/alert.css @@ -18,6 +18,7 @@ .alert-icon { vertical-align: middle; + margin-right: 5px; } .alert-message { diff --git a/src/components/alerts/alerts.jsx b/src/components/alerts/alerts.jsx index 67bebacfb5aefd127f9c80d8d33edf0c8099ba45..33ff774e316b5b0a4a07a6fcbe77ddbd5dbf462e 100644 --- a/src/components/alerts/alerts.jsx +++ b/src/components/alerts/alerts.jsx @@ -22,10 +22,13 @@ const Alerts = ({ key={index} > <div className={styles.alertMessage}> - <img - className={styles.alertIcon} - src={a.iconURL} - /> {a.message} {a.name} {'.'} + {a.iconURL ? ( + <img + className={styles.alertIcon} + src={a.iconURL} + /> + ) : null} + {a.message} </div> <Button className={styles.alertRemoveButton} diff --git a/src/containers/alerts.jsx b/src/containers/alerts.jsx index 21251555b09592a04f25472effca5528e12b17c0..9e9bc06f0de674620a0e2e611371cb834a77b94c 100644 --- a/src/containers/alerts.jsx +++ b/src/containers/alerts.jsx @@ -4,7 +4,6 @@ import PropTypes from 'prop-types'; import {connect} from 'react-redux'; import { - showAlert, closeAlert } from '../reducers/alerts'; @@ -38,12 +37,10 @@ Alerts.propTypes = { }; const mapStateToProps = state => ({ - visible: state.scratchGui.alerts.visible, alertsList: state.scratchGui.alerts.alertsList }); const mapDispatchToProps = dispatch => ({ - onShowAlert: () => dispatch(showAlert()), onCloseAlert: index => dispatch(closeAlert(index)) }); diff --git a/src/reducers/alerts.js b/src/reducers/alerts.js index e91178477091aae55f197cedfe16ac4ba5d21d2d..3acb7097fc33d6042b0a2f1b986d51c280502ad9 100644 --- a/src/reducers/alerts.js +++ b/src/reducers/alerts.js @@ -14,16 +14,18 @@ const reducer = function (state, action) { case SHOW_ALERT: { const newList = state.alertsList.slice(); const newAlert = {message: action.data.message}; - if (action.data.extensionId) { // if it's an extension - const extension = extensionData.find(ext => ext.extensionId === action.data.extensionId); + const extensionId = action.data.extensionId; + if (extensionId) { // if it's an extension + const extension = extensionData.find(ext => ext.extensionId === extensionId); if (extension && extension.name) { - newAlert.name = extension.name; + // TODO: is this the right place to assemble this message? + newAlert.message = `${newAlert.message} ${extension.name}.`; } if (extension && extension.smallPeripheralImage) { newAlert.iconURL = extension.smallPeripheralImage; } } - // TODO: add cases for other kinds of alerts? + // TODO: add cases for other kinds of alerts here? newList.push(newAlert); return Object.assign({}, state, { alertsList: newList