components/ProfileEdit/ProfileEditForm/ProfileEditFormGroups/ProfileEditFormGroups.jsx

/**
 * Контейнер полей для редактирования групп в попапе редактирования профиля
 * @module ProfileEditFormGroups
 * @author Ihor Bielchenko
 * @requires react
 * @requires react#Component
 * @requires react-redux#connect
 * @requires redux#bindActionCreators
 * @requires actions/StateConfigAction.js
 * @requires actions/StateUserAction.js
 * @requires components/ProfileEdit/ProfileEditForm/ProfileEditFormGroups/ProfileEditFormGroupsItem/ProfileEditFormGroupsItem.jsx
 */

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as StateConfigAction from '../../../../actions/StateConfigAction.js';
import * as StateUserAction from '../../../../actions/StateUserAction.js';
import Link from '../../../Common/Link.jsx';
import ProfileEditFormGroupsItem from './ProfileEditFormGroupsItem/ProfileEditFormGroupsItem.jsx';
import Ok from '../../../../img/title-ok.png';
import Pencil from '../../../../img/orange-pencil.png';
import AddGroupIcon from '../../../../img/gruppa-dobavit.png'

/**
 * Контейнер полей для редактирования групп в попапе редактирования профиля
 * @extends Component
 */
class ProfileEditFormGroups extends Component {

	/**
	 * Объект состяния компонента
	 * @type {Object} 
	 * @inner
	 * @property {Number} id ID группы, которую надо удалить
	 */
	state = {
		id: 0
	}

	/**
	 * Удалить текщую группу
	 * @fires click
	 * @param {Number} id ID группы, которую надо удалить
	 * @param {Object} e
	 */
	remove(id, e) {
		this.props.config.remove_group_inner = 1;
		this.props.StateConfigAction.update(this.props.config, () => {
			this.setState({id: id});
		});
	}

	/**
	 * Заурыть окно успешного удаления группы
	 * @fires click
	 * @param {Object} e
	 */
	reset(e) {
		this.props.config.remove_group_inner = 0;
		this.props.config.remove_group_inner_success = 0;
		this.props.StateConfigAction.update(this.props.config);
	}

	/**
	 * Подтвердить удаление текущей группы
	 * @fires click
	 * @param {Object} e
	 */
	confirmRemoveGroup(e) {
		var group,
			i;
		let el = document.getElementById('confirm-remove-group');

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

		if(el.value === group.name) {
			this.props.StateUserAction.removeGroup(this.props.user, this.state.id, () => {
				this.props.config.remove_group_inner = 0;
				this.props.config.remove_group_inner_success = 1;
				this.props.StateConfigAction.update(this.props.config);
			});
		}
	}

	/**
	 * Render component
	 * @return {Object} jsx object
	 */
	render() {
		var i,
			groups = [];

		for(i = 0; i < this.props.user.groups.length; i++) {
			groups.push(<ProfileEditFormGroupsItem key={i}
							id={this.props.user.groups[i].id}
							name={this.props.user.groups[i].name}
							remove={this.remove.bind(this, this.props.user.groups[i].id)} />);
		}

		if(this.props.config.remove_group_inner_success === 1) {
			return <div className="modal fade show" 
						id="popup17" 
						tabIndex="-1" 
						role="dialog">
						<div className="modal-dialog" role="document">
							<div className="modal-content">
								<div className="title">
									<img src={Ok} alt="ok" />
									<span>{this.props.lang.remove_group_title}</span>
								</div>
								<div className="main-text">
									{this.props.lang.group_success_removed_title}
								</div>
								<Link 
									data-dismiss="modal" 
									className="button"
									onClick={this.reset.bind(this)}>{this.props.lang.close_msg_title}</Link>
							</div>
						</div>
					</div>
		}

		if(this.props.config.remove_group_inner === 1) {
			return <div className="modal fade show" 
					id="popup18"
					tabIndex="-1"
					role="dialog">
						<div className="modal-dialog" role="document">
							<div className="modal-content">
								<div className="title">
									<img src={AddGroupIcon} alt="add-group" />
									<span>{this.props.lang.remove_group_title}</span>
								</div>
								<div className="blue-fon">
									<div className="title-mes">
										<img src={Pencil} alt="pencil" />
										<input type="text"
												id="confirm-remove-group" 
												placeholder={this.props.lang.remove_group_msg} />
									</div>
									<hr className="main-hr" />	
								</div>

								<div className="button-wrap">
									<Link onClick={this.reset.bind(this)}
										className="button disable-button"
										data-dismiss="modal">{this.props.lang.reset_title}</Link>

									<Link className="button"
										data-dismiss="modal"
										onClick={this.confirmRemoveGroup.bind(this)}>
											{this.props.lang.confirm_title}
									</Link>
								</div>
							</div>
						</div>
				</div>
		}

		return <div className="block6">
					{groups.length > 0 ? 
						<span className="main-span">{this.props.lang.teacher_groups_title}</span> : ''}
					{groups}
				</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)(ProfileEditFormGroups);