components/TaskHistory/TaskItem/TaskItem.jsx

/**
 * Блок статистики по конкретному уроку
 * @module TaskItem
 * @author Ihor Bielchenko
 * @requires react
 * @requires react#Component
 * @requires redux#bindActionCreators
 * @requires react-redux#connect
 * @requires actions/StateConfigAction.js
 * @requires actions/StateUserAction.js
 * @requires components/Common/Link.jsx
 * @requires img/arrow-right.png
 */

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Accordion, AccordionItem } from 'react-sanfona';
import * as StateConfigAction from '../../../actions/StateConfigAction.js';
import * as StateUserAction from '../../../actions/StateUserAction.js';
import Link from '../../Common/Link.jsx';
import ArrowR from '../../../img/arrow-right.png';

/**
 * Блок статистики по конкретному уроку
 * @extends Component
 * @property {Object} lesson Объект урока
 * @property {Number} index Индекс урока в массиве уроков
 */
class TaskItem extends Component {

	/**
	 * Объект состяния компонента
	 * @type {Object} 
	 * @inner
	 * @property {Number} expanded Показывает, раскрыт ли дочерний список или нет
	 */
	state = {
		expanded: 0
	}

	/**
	 * Удалить занятие
	 * @fires click
	 * @param {Object} e
	 */
	removeItem(e) {
		this.props.StateUserAction.removeTask(this.props.user, this.props.index);
	}

	/**
	 * Render component
	 * @return {Object} jsx object
	 */
	render() {
		let lang = this.props.lang;
		var words = [],
			i;
				
		for(i = 0; i < this.props.lesson.data.length; i++) {
			words.push(<div className="line under-line" key={i}>
							<div className="columns">
								<div className="c">{this.props.lesson.data[i].word}
									<img className="arrow-right" src={ArrowR} alt="arrow" />
								</div>
								<div className="c">{this.props.lesson.data[i].translate}</div>
								<div className="c"></div>
								<div className="c"></div>
							</div>
						</div>);
		}

		return <div className="card">
					<div className="card-header line" role="tab">	
						<div className="columns">
							<div className="c">{this.props.lesson.name}</div>
							<div className="c">{this.props.lesson.statistic}</div>
							<div className="c">
								<Link href="">
										{this.state.expanded === 0 ?
											<span className="show">{lang.show_words_title}</span> :
											<span className="hide">{lang.hide_words_title}</span>}
								</Link>
							</div>
							<div className="c">
								<Link className="delete" 
									href=""
									onClick={this.removeItem.bind(this)}>{lang.edit_remove_title}</Link>
							</div>
						</div>
					</div>

					<Accordion allowMultiple={false}>
						<AccordionItem 
							title={<div className="accordion-task-title"></div>}
							allowMultiple={false}
							onClose={() => this.setState({expanded: 0})}
							onExpand={() => this.setState({expanded: 1})}>
								<div className="collapse show">								
									<div className="line under-line">
										<div className="columns">
											<div className="c"><b>{lang.word_title}</b></div>
											<div className="c"><b>{lang.translate_title}</b></div>
											<div className="c"></div>
											<div className="c"></div>
										</div>
									</div>
								
									{words}
								</div>
						</AccordionItem>
					</Accordion>
				</div>
	}
}

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

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

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