From bdaa407f438a955df06f84b0c3cdf22ef9d9c7c5 Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Sat, 22 Sep 2018 16:03:33 -0400
Subject: [PATCH] Adding Alerts container to handle click, and pass key prop
appropriately.
---
src/components/alerts/alerts.jsx | 13 ++++++++-----
src/containers/alerts.jsx | 32 +++++++++++++++++++++++++++++++-
src/reducers/alerts.js | 3 ++-
3 files changed, 41 insertions(+), 7 deletions(-)
diff --git a/src/components/alerts/alerts.jsx b/src/components/alerts/alerts.jsx
index 95b755de9..67bebacfb 100644
--- a/src/components/alerts/alerts.jsx
+++ b/src/components/alerts/alerts.jsx
@@ -8,8 +8,8 @@ import Button from '../button/button.jsx';
import styles from './alert.css';
const Alerts = ({
- className,
alertsList,
+ className,
onCloseAlert
}) => (
<Box
@@ -22,14 +22,17 @@ const Alerts = ({
key={index}
>
<div className={styles.alertMessage}>
- <img className={styles.alertIcon} src={a.iconURL} /> {a.message} {a.name}.
+ <img
+ className={styles.alertIcon}
+ src={a.iconURL}
+ /> {a.message} {a.name} {'.'}
</div>
<Button
className={styles.alertRemoveButton}
- onClick={() => onCloseAlert(index)}
+ key={index}
+ onClick={onCloseAlert}
>
- { /* eslint-disable react/jsx-no-literals */ }
- x
+ {'x'}
</Button>
</Box>
))}
diff --git a/src/containers/alerts.jsx b/src/containers/alerts.jsx
index 3e6adba2f..21251555b 100644
--- a/src/containers/alerts.jsx
+++ b/src/containers/alerts.jsx
@@ -1,3 +1,6 @@
+import React from 'react';
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {
@@ -7,6 +10,33 @@ import {
import AlertsComponent from '../components/alerts/alerts.jsx';
+class Alerts extends React.Component {
+ constructor (props) {
+ super(props);
+ bindAll(this, [
+ 'handleOnCloseAlert'
+ ]);
+ }
+ handleOnCloseAlert (e) {
+ this.props.onCloseAlert(e.target.key);
+ }
+ render () {
+ return (
+ <AlertsComponent
+ alertsList={this.props.alertsList}
+ className={this.props.className}
+ onCloseAlert={this.handleOnCloseAlert}
+ />
+ );
+ }
+}
+
+Alerts.propTypes = {
+ alertsList: PropTypes.arrayOf(PropTypes.object),
+ className: PropTypes.string,
+ onCloseAlert: PropTypes.func
+};
+
const mapStateToProps = state => ({
visible: state.scratchGui.alerts.visible,
alertsList: state.scratchGui.alerts.alertsList
@@ -20,4 +50,4 @@ const mapDispatchToProps = dispatch => ({
export default connect(
mapStateToProps,
mapDispatchToProps
-)(AlertsComponent);
+)(Alerts);
diff --git a/src/reducers/alerts.js b/src/reducers/alerts.js
index 69011bd89..e91178477 100644
--- a/src/reducers/alerts.js
+++ b/src/reducers/alerts.js
@@ -14,7 +14,7 @@ const reducer = function (state, action) {
case SHOW_ALERT: {
const newList = state.alertsList.slice();
const newAlert = {message: action.data.message};
- if (action.data.extensionId) {
+ if (action.data.extensionId) { // if it's an extension
const extension = extensionData.find(ext => ext.extensionId === action.data.extensionId);
if (extension && extension.name) {
newAlert.name = extension.name;
@@ -23,6 +23,7 @@ const reducer = function (state, action) {
newAlert.iconURL = extension.smallPeripheralImage;
}
}
+ // TODO: add cases for other kinds of alerts?
newList.push(newAlert);
return Object.assign({}, state, {
alertsList: newList
--
GitLab