From d5eb947c02ab2e7b077d054e25b6c2e63bdcf12c Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Sat, 22 Sep 2018 16:17:48 -0400
Subject: [PATCH] Moved alert icon check/display up to reducer, and also moved
alert message construction to reducer.
---
src/components/alerts/alert.css | 1 +
src/components/alerts/alerts.jsx | 11 +++++++----
src/containers/alerts.jsx | 3 ---
src/reducers/alerts.js | 10 ++++++----
4 files changed, 14 insertions(+), 11 deletions(-)
diff --git a/src/components/alerts/alert.css b/src/components/alerts/alert.css
index 181023d18..250c79d2a 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 67bebacfb..33ff774e3 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 21251555b..9e9bc06f0 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 e91178477..3acb7097f 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
--
GitLab