components/TeacherPanel/TeacherPanelNotices/TeacherPanelNoticesHeader/TeacherPanelNoticesHeader.jsx

/**
 * Заголовок панели уведомлений на странице учителя
 * @module TeacherPanelNoticesHeader
 * @author Ihor Bielchenko
 * @requires react
 * @requires react#Component
 * @requires react-redux#connect
 * @requires redux#bindActionCreators
 * @requires components/Common/Link.jsx
 * @requires img/receive.png
 * @requires img/send.png
 * @requires img/recycle.png
 * @requires actions/StateNoticesAction.js
 * @requires actions/StateConfigAction.js
 */

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Link from '../../../Common/Link.jsx';
import Receive from '../../../../img/receive.png';
import Send from '../../../../img/send.png';
import Recycle from '../../../../img/recycle.png';
import * as StateNoticesAction from '../../../../actions/StateNoticesAction.js';
import * as StateConfigAction from '../../../../actions/StateConfigAction.js';

/**
 * Заголовок панели уведомлений на странице учителя
 * @extends Component
 */
class TeacherPanelNoticesHeader extends Component {

	/**
	 * Удалить уведомления
	 * @fires click
	 * @param {Object} e
	 */
	clearNotices(e) {
		this.props.StateNoticesAction.clear(this.props.notices);
	}

	/**
	 * Render component
	 * @return {Object} jsx object
	 */
	render() {
		var i, r = 0,
			last, length,
			notreaded = '';

		/** Определение не прочитанных сообщений
		 */
		for(i = 0; i < this.props.notices.items.length; i++) {
			length = this.props.notices.items[i].messages.length;
			last = this.props.notices.items[i].messages[length - 1];
			
			if(last.readed === 0) {
				if(notreaded === '') {
					notreaded = this.props.notices.items[i];
				}
				r++;
			}
		}

		return <div className="top">
					<div className="text">
						<b>{this.props.notices.items.length}</b> {this.props.lang.notice_header}
					</div>

					<div className="options">
						<Link href=""
							onClick={(e) => {
								this.props.notices.current_dialog = this.props.notices.items !== 'undefined' ? 
									notreaded.id :
									0;
								this.props.StateNoticesAction.update(this.props.notices, () => {
									this.props.StateConfigAction.showElement(this.props.config, 'dialogs');
								});
							}}>
								<img src={Receive}
									alt="notice" />
							<div className="notice">{r}</div>
						</Link>

						<Link href="">
							<img src={Send}
								alt="sent" />
						</Link>

						<Link href=""
							onClick={this.clearNotices.bind(this)}>
								<img src={Recycle}
									alt="recycle" />
						</Link>
					</div>
				</div>
	}
}

/**
 * Init redux states
 * @param {Object} state
 * @return {Object}
 */
function mapStateToProps(state) {
	return {
		notices: state.notices,
		lang: state.lang,
		config: state.config
	}
}

/**
 * Init redux actions
 * @param {Function} dispatch
 * @return {Object}
 */
function mapDispatchToProps(dispatch) {
	return {
		StateNoticesAction: bindActionCreators(StateNoticesAction, dispatch),
		StateConfigAction: bindActionCreators(StateConfigAction, dispatch),
	}
}

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