components/TeacherPanel/TeacherPanelNotices/TeacherPanelNotices.jsx

/**
 * Панель параметров группы в кабинете учителя
 * @module TeacherPanelNotices
 * @author Ihor Bielchenko
 * @requires react
 * @requires react#Component
 * @requires react-redux
 * @requires components/TeacherPanel/TeacherPanelNotices/TeacherPanelNoticesHeader/TeacherPanelNoticesHeader.jsx
 * @requires components/TeacherPanel/TeacherPanelNotices/TeacherPanelNoticesItem/TeacherPanelNoticesItem.jsx
 * @requires img/arrow-bottom.png
 */

import React, { Component } from 'react';
import { connect } from 'react-redux';
import TeacherPanelNoticesHeader from './TeacherPanelNoticesHeader/TeacherPanelNoticesHeader.jsx';
import TeacherPanelNoticesItem from './TeacherPanelNoticesItem/TeacherPanelNoticesItem.jsx';
import ArrowBottom from '../../../img/arrow-bottom.png';

/**
 * Панель параметров группы в кабинете учителя
 * @extends Component
 */
class TeacherPanelNotices extends Component {

	/**
	 * Объект состяния компонента
	 * @type {Object} 
	 * @inner
	 * @property {Number} more Флаг определяющий показ всех уведомлений 
	 */
	state = {
		more: 0
	}

	/**
	 * Показать все уведомления
	 * @fires click
	 * @param {Object} e
	 */
	more(e) {
		this.setState({more: 1});
	}

	/**
	 * Render component
	 * @return {Object} jsx object
	 */
	render() {
		var notices = [],
			limit = 2,
			i, last, length;

		if(this.state.more === 1) {
			limit = this.props.notices.items.length;
		}

		for(i = 0; i < limit; i++) {
			if(typeof this.props.notices.items[i] !== 'undefined') {
				length = this.props.notices.items[i].messages.length;
				last = this.props.notices.items[i].messages[length - 1];

				notices.push(<TeacherPanelNoticesItem
					key={i}
					time={last.time}
					username={this.props.notices.items[i].username}
					avatar={this.props.notices.items[i].avatar_62x62}
					introtext={last.introtext} />);
			}
		}

		return <div className="left message-block">
					<TeacherPanelNoticesHeader />
						
					{notices.length > 0 ? 
						<div className="messages">
							{notices}
						</div> : ''}

					{this.props.notices.items.length > 2 ?
						<div className="open"
							onClick={this.more.bind(this)}>
								{this.state.more === 0 ?
									<img src={ArrowBottom}
										alt="show-more" /> : ''}
						</div> : ''}
				</div>
	}
}

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

export default connect(mapStateToProps)(TeacherPanelNotices);