components/TeacherPanel/TeacherPanelLessons/TeacherPanelLessons.jsx

/**
 * Панель созданных уроков в кабинете учителя
 * @module TeacherPanelLessons
 * @author Ihor Bielchenko
 * @requires react
 * @requires react#Component
 * @requires react-redux
 * @requires components/TeacherPanel/TeacherPanelLessons/TeacherPanelLessonsHeader/TeacherPanelLessonsHeader.jsx
 * @requires components/TeacherPanel/TeacherPanelLessons/TeacherPanelLessonsItem/TeacherPanelLessonsItem.jsx
 * @requires img/arrow-bottom.png
 */

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

/**
 * Панель параметров группы в кабинете учителя
 * @extends Component
 */
class TeacherPanelLessons 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 lessons = [],
			elements = [],
			groups = this.props.user.groups,
			limit = 2,
			i;

		for(i = 0; i < groups.length; i++) {
			if(groups[i].id === this.props.user.current_group) {
				lessons = groups[i].lessons;
			}
		}

		if(this.state.more === 1) {
			limit = lessons.length;
		}

		for(i = 0; i < limit; i++) {
			if(typeof lessons[i] !== 'undefined') {
				elements.push(<TeacherPanelLessonsItem
					key={i}
					number={lessons[i].id}
					theme={lessons[i].name}
					doneTime={lessons[i].done_time} />);
			}
		}

		return <div className="right spisok-urokov">
					<TeacherPanelLessonsHeader />

					{elements.length > 0 ? 
						<div className="messages">
							{elements}
						</div> : ''}

					{lessons.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 {
		lessons: state.lessons,
		user: state.user,
	}
}

export default connect(mapStateToProps)(TeacherPanelLessons);