add ToastCard

Author: Robert S

src/views/components/toast-card/ToastCard.jsx

@@ -0,0 +1,43 @@
+// import styles from './ToastCard.module.scss';
+
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Button, Card } from 'semantic-ui-react';
+import ToastStatusEnum from '../../../constants/ToastStatusEnum';
+import ToastsAction from '../../../stores/toasts/ToastsAction';
+
+const mapStateToProps = (state, ownProps) => ({});
+
+class ToastCard extends React.Component {
+  buttonColorMap = {
+    [ToastStatusEnum.Error]: 'red',
+    [ToastStatusEnum.Warning]: 'orange',
+    [ToastStatusEnum.Success]: 'green',
+  };
+
+  render() {
+    const { item } = this.props;
+    const buttonColor = this.buttonColorMap[item.type];
+
+    return (
+      <Card>
+        <Card.Content>
+          <Card.Header content={item.type} />
+          <Card.Description content={item.message} />
+        </Card.Content>
+        <Card.Content extra={true}>
+          <Button color={buttonColor} onClick={this._onClickRemoveNotification}>
+            Close
+          </Button>
+        </Card.Content>
+      </Card>
+    );
+  }
+
+  _onClickRemoveNotification = (event, data) => {
+    this.props.dispatch(ToastsAction.removeById(this.props.item.id));
+  };
+}
+
+export { ToastCard as Unconnected };
+export default connect(mapStateToProps)(ToastCard);

src/views/components/toast-card/ToastCard.module.scss

@@ -0,0 +1,2 @@
+.wrapper {
+}

src/views/components/toasts/Toasts.jsx

@@ -2,21 +2,13 @@ import styles from './Toasts.module.scss';
 
 import React from 'react';
 import { connect } from 'react-redux';
-import ToastsAction from '../../../stores/toasts/ToastsAction';
-import { Card, Button } from 'semantic-ui-react';
-import ToastStatusEnum from '../../../constants/ToastStatusEnum';
+import ToastCard from '../toast-card/ToastCard';
 
 const mapStateToProps = (state, ownProps) => ({
   toasts: state.toasts.items,
 });
 
 class Toasts extends React.Component {
-  buttonColorMap = {
-    [ToastStatusEnum.Error]: 'red',
-    [ToastStatusEnum.Warning]: 'orange',
-    [ToastStatusEnum.Success]: 'green',
-  };
-
   render() {
     const { toasts } = this.props;
 
@@ -26,30 +18,12 @@ class Toasts extends React.Component {
 
     return (
       <div className={styles.wrapper}>
-        {toasts.map((item) => {
-          const buttonColor = this.buttonColorMap[item.type];
-
-          return (
-            <Card key={item.id}>
-              <Card.Content>
-                <Card.Header content={item.type} />
-                <Card.Description content={item.message} />
-              </Card.Content>
-              <Card.Content extra={true}>
-                <Button color={buttonColor} onClick={this._onClickRemoveNotification(item.id)}>
-                  Close
-                </Button>
-              </Card.Content>
-            </Card>
-          );
-        })}
+        {toasts.map((model) => (
+          <ToastCard key={model.id} item={model} />
+        ))}
       </div>
     );
   }
-
-  _onClickRemoveNotification = (id) => (event, data) => {
-    this.props.dispatch(ToastsAction.removeById(id));
-  };
 }
 
 export { Toasts as Unconnected };