From 63c315760a381330ac81333cc4890a8664346b3c Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Sat, 22 Sep 2018 17:36:25 -0400
Subject: [PATCH] Moving click handling to alert component from container in
 order to handle index correctly.  Removed AlertsComponent and added new
 AlertComponent.

---
 .../alerts/{alerts.jsx => alert.jsx}          | 49 ++++++++++---------
 src/containers/alerts.jsx                     | 43 ++++++++--------
 2 files changed, 47 insertions(+), 45 deletions(-)
 rename src/components/alerts/{alerts.jsx => alert.jsx} (50%)

diff --git a/src/components/alerts/alerts.jsx b/src/components/alerts/alert.jsx
similarity index 50%
rename from src/components/alerts/alerts.jsx
rename to src/components/alerts/alert.jsx
index 33ff774e3..e0e9e3816 100644
--- a/src/components/alerts/alerts.jsx
+++ b/src/components/alerts/alert.jsx
@@ -1,51 +1,52 @@
-import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
+import bindAll from 'lodash.bindall';
 
 import Box from '../box/box.jsx';
 import Button from '../button/button.jsx';
 
 import styles from './alert.css';
 
-const Alerts = ({
-    alertsList,
-    className,
-    onCloseAlert
-}) => (
-    <Box
-        bounds="parent"
-        className={classNames(className)}
-    >
-        {alertsList.map((a, index) => (
+class AlertComponent extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'handleOnCloseAlert'
+        ]);
+    }
+    handleOnCloseAlert () {
+        this.props.onCloseAlert(this.props.index);
+    }
+    render () {
+        return (
             <Box
                 className={styles.alert}
-                key={index}
             >
                 <div className={styles.alertMessage}>
-                    {a.iconURL ? (
+                    {this.props.iconURL ? (
                         <img
                             className={styles.alertIcon}
-                            src={a.iconURL}
+                            src={this.props.iconURL}
                         />
                     ) : null}
-                    {a.message}
+                    {this.props.message}
                 </div>
                 <Button
                     className={styles.alertRemoveButton}
-                    key={index}
-                    onClick={onCloseAlert}
+                    onClick={this.handleOnCloseAlert}
                 >
                     {'x'}
                 </Button>
             </Box>
-        ))}
-    </Box>
-);
+        );
+    }
+}
 
-Alerts.propTypes = {
-    alertsList: PropTypes.arrayOf(PropTypes.object),
-    className: PropTypes.string,
+AlertComponent.propTypes = {
+    iconURL: PropTypes.string,
+    index: PropTypes.number,
+    message: PropTypes.string,
     onCloseAlert: PropTypes.func.isRequired
 };
 
-export default Alerts;
+export default AlertComponent;
diff --git a/src/containers/alerts.jsx b/src/containers/alerts.jsx
index 9e9bc06f0..03a0e350a 100644
--- a/src/containers/alerts.jsx
+++ b/src/containers/alerts.jsx
@@ -1,5 +1,5 @@
+import classNames from 'classnames';
 import React from 'react';
-import bindAll from 'lodash.bindall';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 
@@ -7,28 +7,29 @@ import {
     closeAlert
 } from '../reducers/alerts';
 
-import AlertsComponent from '../components/alerts/alerts.jsx';
+import Box from '../components/box/box.jsx';
+import AlertComponent from '../components/alerts/alert.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}
+const Alerts = ({
+    alertsList,
+    className,
+    onCloseAlert
+}) => (
+    <Box
+        bounds="parent"
+        className={classNames(className)}
+    >
+        {alertsList.map((a, index) => (
+            <AlertComponent
+                iconURL={a.iconURL}
+                index={index}
+                key={index}
+                message={a.message}
+                onCloseAlert={onCloseAlert}
             />
-        );
-    }
-}
+        ))}
+    </Box>
+);
 
 Alerts.propTypes = {
     alertsList: PropTypes.arrayOf(PropTypes.object),
-- 
GitLab