stitch-ui/src/alert/components/AlertContainer.js

import React from "react"; // eslint-disable-line no-unused-vars
import CSSTransitionGroup from "react-transition-group/CSSTransitionGroup";
import { connect } from "react-redux";
import { OrderedMap } from "immutable";
import Alert from "./Alert";

const mapStateToProps = (state, ownProps) => {
  const alerts = state.alerts.alerts.get(ownProps.alertKey) || new OrderedMap();
  return { alerts };
};

export const AlertContainer = connect(mapStateToProps)(props =>
  <div className="alert-container">
    <CSSTransitionGroup
      transitionName="alert"
      transitionEnterTimeout={500}
      transitionLeaveTimeout={300}
    >
      {Array.from(props.alerts.entries()).map(x =>
        <Alert key={x[0]} message={x[1]} />
      )}
    </CSSTransitionGroup>
  </div>
);

export default AlertContainer;