components/ProfileSettings/ProfileSettings.jsx

/**
 * Попап настроек аккаунта
 * @module ProfileSettings
 * @author Ihor Bielchenko
 * @requires react
 * @requires react#Component
 * @requires react-redux
 * @requires redux#bindActionCreators
 * @requires components/Common/Link.jsx
 * @requires actions/StateConfigAction.js
 * @requires actions/StateUserAction.js
 * @requires img/title-ok.png
 */

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

/**
 * Попап настроек аккаунта
 * @extends Component
 */
class ProfileSettings extends Component {

	/**
	 * Отменить изменения
	 * @fires click
	 * @param {Object} e
	 */
	reset(e) {
		this.props.StateConfigAction.showElement(this.props.config, 'profile_settings');
	}

	/**
	 * Сохранить изменения
	 * @fires click
	 * @param {Object} e
	 */
	confirm(e) {
		let vkInputEl = document.getElementById('vk-profile-input');
		let okInputEl = document.getElementById('ok-profile-input');
		let getEmailNoticeEl = document.getElementById('get-notices-email');
		let getCodeNoticeEl = document.getElementById('get-code-notices');

		var i,
			emailNoticeFlag = 0,
			codeNoticeFlag = 0;

		for(i = 0; i < getEmailNoticeEl.classList.length; i++) {
			if(getEmailNoticeEl.classList[i] === 'checked') {
				emailNoticeFlag = 1;
				break;
			}
		}

		for(i = 0; i < getCodeNoticeEl.classList.length; i++) {
			if(getCodeNoticeEl.classList[i] === 'checked') {
				codeNoticeFlag = 1;
				break;
			}
		}

		this.props.StateUserAction.updateProfile(this.props.user, {
			vk_profile: vkInputEl.value,
			ok_profile: okInputEl.value,
			get_notices_to_email: emailNoticeFlag,
			get_code_notices: codeNoticeFlag
		}, {
			vk_profile: vkInputEl.value,
			ok_profile: okInputEl.value,
			get_notices_to_email: emailNoticeFlag,
			get_code_notices: codeNoticeFlag
		}, () => {
			this.props.config.profile_settings_success = 1;
			this.props.StateConfigAction.update(this.props.config);
		});
	}

	/**
	 * Выделение чекбокса
	 * @fires click
	 * @param {String} id
	 * @param {Object} e
	 */
	check(id, e) {
		let el = document.getElementById(id);
		var i,
			check = 0;

		for(i = 0; i < el.classList.length; i++) {
			if(el.classList[i] === 'checked') {
				check = 1;
				break;
			}
		}

		if(check === 0) {
			el.className += ' checked';
		}

		else {
			el.className = 'jq-checkbox';
		}
	}

	/**
	 * Закрыть окно успешного изменения настроек
	 * @fires click
	 * @param {Object} e
	 */
	close(e) {
		this.props.StateConfigAction.showElement(this.props.config, 'profile_settings_success');
	}

	/**
	 * Render component
	 * @return {Object} jsx object
	 */
	render() {
		let lang = this.props.lang;
		let user = this.props.user;

		if(this.props.config.profile_settings_success === 1) {
			return <div className="modal fade show" 
						id="popup5" 
						tabIndex="-1" 
						role="dialog">
							<div className="modal-dialog" role="document">
								<div className="modal-content">
									<div className="title">
										<img src={Ok} alt="icon" />
										<span>{lang.settings_title}</span>
									</div>
									<div className="main-text">
										{lang.save_success_msg}
									</div>

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

		return <div className="modal fade show" 
					id="popup4" 
					tabIndex="-1" 
					role="dialog">
					<div className="modal-dialog" role="document">
						<div className="modal-content">
							<div className="title">
								<img src={Ok} alt="icon" />
								<span>{lang.settings_title}</span>
							</div>

							<div className="block1">
								<div className="line">
									<span className="main-span">{lang.vk_profile_title}</span>
									<input type="text"
										id="vk-profile-input"
										defaultValue={user.vk_profile} />
								</div>

								<div className="line">
									<span className="main-span">{lang.ok_profile_title}</span>
									<input type="text"
										id="ok-profile-input"
										defaultValue={user.ok_profile} />
								</div>

								<label onClick={this.check.bind(this, 'get-notices-email')}>
									<div id="get-notices-email"
										className={user.get_notices_to_email === 1 ? 
											'jq-checkbox checked' : 
											'jq-checkbox'}>
										<div className="jq-checkbox__div"></div>
									</div>
									<span className="main-span">{lang.get_notice_title}</span>
								</label>

								<label onClick={this.check.bind(this, 'get-code-notices')}>
									<div id="get-code-notices"
										className={user.get_code_notices === 1 ? 
											'jq-checkbox checked' : 
											'jq-checkbox'}>
										<div className="jq-checkbox__div"></div>
									</div>
									<span className="main-span">{lang.get_code_notice}</span>
								</label>
							</div>

							<div className="button-wrap">
								<Link 
									data-dismiss="modal"
									className="button disable-button"
									onClick={this.reset.bind(this)}>{lang.reset_title}</Link>
								<Link
									data-dismiss="modal"
									className="button"
									onClick={this.confirm.bind(this)}>{this.props.lang.ready_title}</Link>
							</div>
						</div>
					</div>
				</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)(ProfileSettings);