1  import React from 'react';
 2  import { TransitionGroup, CSSTransition } from 'react-transition-group';
 3  import { connect } from 'react-redux';
 4  
 5  import { AppState } from 'features/reducers';
 6  import { notificationsTypes, notificationsActions } from 'features/notifications';
 7  import NotificationRow from './NotificationRow';
 8  import './Notifications.scss';
 9  
10  interface Props {
11    notifications: notificationsTypes.Notification[];
12    closeNotification: notificationsActions.TCloseNotification;
13  }
14  
15  export class Notifications extends React.Component<Props, {}> {
16    public render() {
17      return (
18        <TransitionGroup className="Notifications" aria-live="polite">
19          {this.props.notifications.map(n => {
20            return (
21              <CSSTransition classNames="NotificationAnimation" timeout={500} key={n.id}>
22                <NotificationRow notification={n} onClose={this.props.closeNotification} />
23              </CSSTransition>
24            );
25          })}
26        </TransitionGroup>
27      );
28    }
29  }
30  
31  const mapStateToProps = (state: AppState) => ({
32    notifications: state.notifications
33  });
34  
35  export default connect(mapStateToProps, {
36    closeNotification: notificationsActions.closeNotification
37  })(Notifications);