@bigfishtv/cockpit/src/components/notification/NotificationsHost.js

import React, { Component } from 'react'
import { connect } from 'react-redux'

import { dismissNotification } from '../../actions/notifications'
import Alert from '../notification/Alert'

const AUTO_DISMISS = 5000

/**
 * NotificationsHost handles the display of notifications as determined by the notification store
 */
@connect(({ notifications }) => ({ notifications }))
export default class NotificationsHost extends Component {
	constructor() {
		super()
		this.state = {
			ids: [],
		}
	}

	componentDidMount() {
		this.checkForNewNotifications()
	}

	componentDidUpdate(prevProps, prevState) {
		this.checkForNewNotifications()
	}

	/**
	 * Animate new notificatons in. Timeout required so CSS transitions work as expected.
	 */
	checkForNewNotifications() {
		const newNotifications = this.props.notifications.filter(notification => this.isNew(notification))
		if (newNotifications.length) {
			setTimeout(() => this.setState({ ids: this.props.notifications.map(notification => notification.id) }), 10)

			// automatically dismiss items
			newNotifications.map(notification =>
				setTimeout(
					() => this.props.dispatch(dismissNotification(notification.id)),
					notification.autoDismiss || AUTO_DISMISS
				)
			)
		}
	}

	/**
	 * determines if notification is newly added
	 * @param {Object}  notification
	 * @param {Integer} notification.id
	 * @return {Boolean}
	 */
	isNew(notification) {
		return this.state.ids.indexOf(notification.id) === -1
	}

	render() {
		let index = 0
		return (
			<div className="flash-message">
				{this.props.notifications.map(notification => (
					<Alert
						key={notification.id}
						index={this.isNew(notification) || notification.dismissed ? null : index++}
						onClick={() => this.props.dispatch(dismissNotification(notification.id))}
						{...notification}
					/>
				))}
			</div>
		)
	}
}