From 21a9afb5ad130783f21e25118b806725a3f0e7d3 Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Mon, 24 Sep 2018 18:57:31 -0400
Subject: [PATCH] Adding Alert container to hold index and click handler.
---
src/components/alerts/alert.jsx | 61 ++++++++++++++-------------------
src/containers/alert.jsx | 35 +++++++++++++++++++
src/containers/alerts.jsx | 4 +--
3 files changed, 62 insertions(+), 38 deletions(-)
create mode 100644 src/containers/alert.jsx
diff --git a/src/components/alerts/alert.jsx b/src/components/alerts/alert.jsx
index e0e9e3816..63ac06f51 100644
--- a/src/components/alerts/alert.jsx
+++ b/src/components/alerts/alert.jsx
@@ -1,50 +1,39 @@
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';
-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}
- >
- <div className={styles.alertMessage}>
- {this.props.iconURL ? (
- <img
- className={styles.alertIcon}
- src={this.props.iconURL}
- />
- ) : null}
- {this.props.message}
- </div>
- <Button
- className={styles.alertRemoveButton}
- onClick={this.handleOnCloseAlert}
- >
- {'x'}
- </Button>
- </Box>
- );
- }
-}
+const AlertComponent = ({
+ iconURL,
+ message,
+ onCloseAlert
+}) => (
+ <Box
+ className={styles.alert}
+ >
+ <div className={styles.alertMessage}>
+ {iconURL ? (
+ <img
+ className={styles.alertIcon}
+ src={iconURL}
+ />
+ ) : null}
+ {message}
+ </div>
+ <Button
+ className={styles.alertRemoveButton}
+ onClick={onCloseAlert}
+ >
+ {'x'}
+ </Button>
+ </Box>
+);
AlertComponent.propTypes = {
iconURL: PropTypes.string,
- index: PropTypes.number,
message: PropTypes.string,
onCloseAlert: PropTypes.func.isRequired
};
diff --git a/src/containers/alert.jsx b/src/containers/alert.jsx
new file mode 100644
index 000000000..90f2505dc
--- /dev/null
+++ b/src/containers/alert.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+
+import AlertComponent from '../components/alerts/alert.jsx';
+
+class Alert extends React.Component {
+ constructor (props) {
+ super(props);
+ bindAll(this, [
+ 'handleOnCloseAlert'
+ ]);
+ }
+ handleOnCloseAlert () {
+ this.props.onCloseAlert(this.props.index);
+ }
+ render () {
+ return (
+ <AlertComponent
+ iconURL={this.props.iconURL}
+ message={this.props.message}
+ onCloseAlert={this.handleOnCloseAlert}
+ />
+ );
+ }
+}
+
+Alert.propTypes = {
+ iconURL: PropTypes.string,
+ index: PropTypes.number,
+ message: PropTypes.string,
+ onCloseAlert: PropTypes.func.isRequired
+};
+
+export default Alert;
diff --git a/src/containers/alerts.jsx b/src/containers/alerts.jsx
index 03a0e350a..c6d7e668d 100644
--- a/src/containers/alerts.jsx
+++ b/src/containers/alerts.jsx
@@ -8,7 +8,7 @@ import {
} from '../reducers/alerts';
import Box from '../components/box/box.jsx';
-import AlertComponent from '../components/alerts/alert.jsx';
+import Alert from '../containers/alert.jsx';
const Alerts = ({
alertsList,
@@ -20,7 +20,7 @@ const Alerts = ({
className={classNames(className)}
>
{alertsList.map((a, index) => (
- <AlertComponent
+ <Alert
iconURL={a.iconURL}
index={index}
key={index}
--
GitLab