scinote-web/app/javascript/src/components/AlertsContainer/index.jsx

import React, { Component } from "react";
import { connect } from "react-redux";
import styled from "styled-components";
import TransitionGroup from 'react-transition-group/TransitionGroup';
import CSSTransition from 'react-transition-group/CSSTransition';
import PropTypes from "prop-types";
import { clearAlert } from "../actions/AlertsActions";
import Alert from "./components/Alert";

const Wrapper = styled.div`
  position: absolute;
  z-index: 1000;
  width: 100%;
`;

class AlertsContainer extends Component {
  constructor(props) {
    super(props);

    this.renderAlert = this.renderAlert.bind(this);
  }

  renderAlert(alert) {
    return (
      <Alert message={alert.message}
             type={alert.type}
             timeout={alert.timeout}
             onClose={() => this.props.onAlertClose(alert.id)}
      />
    );
  }

  render() {
    return (
      <Wrapper>
        <TransitionGroup>
          {this.props.alerts.map((alert) =>
            <CSSTransition key={alert.id}
                           timeout={500}
                           classNames="alert-animated">
              {this.renderAlert(alert)}
            </CSSTransition>
          )}
        </TransitionGroup>
      </Wrapper>
    );
  }
}

AlertsContainer.propTypes = {
  alerts: PropTypes.arrayOf(
    PropTypes.shape({
      message: PropTypes.string.isRequired,
      type: PropTypes.string.isRequired,
      id: PropTypes.string.isRequired,
      timeout: PropTypes.number,
      onClose: PropTypes.func
    }).isRequired
  ).isRequired,
  onAlertClose: PropTypes.func.isRequired
}

const mapStateToProps = ({ alerts }) => ({ alerts });

const mapDispatchToProps = dispatch => ({
  onAlertClose(id) {
    dispatch(clearAlert(id));
  }
});

export default connect(mapStateToProps, mapDispatchToProps)(AlertsContainer);