components/ProfileEdit/ProfileEdit.jsx

/**
 * Попап редактирования профиля
 * @module ProfileEdit
 * @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.js
 * @requires components/ProfileEdit/ProfileEditHeader/ProfileEditHeader.js
 * @requires components/ProfileEdit/ProfileEditForm/ProfileEditForm.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 ProfileEditHeader from './ProfileEditHeader/ProfileEditHeader.jsx';
import ProfileEditForm from './ProfileEditForm/ProfileEditForm.jsx';
import Ok from '../../img/title-ok.png';

/**
 * Попап редактирования профиля
 * @extends Component
 */
class ProfileEdit extends Component {

	/**
	 * Закрытие попапа редактирования профиля
	 * @fires click
	 * @param {Object} e
	 */
	reset(e) {
		this.props.StateConfigAction.showElement(this.props.config, 'profile_edit');
	}

	/**
	 * Обновить парметры пользователя
	 * @fires click
	 * @param {Object} e
	 */
	update(e) {
		let firstNameEl = document.getElementById('user-first-name');
		let lastNameEl = document.getElementById('user-last-name');
		let currentPasswordEl = document.getElementById('user-current-password');
		let newPasswordEl = document.getElementById('user-new-password');
		let userEmailEl = document.getElementById('user-email');
		let userCityEl = document.getElementById('user-city');
		let userSchoolEl = document.getElementById('user-school');

		this.props.StateUserAction.updateProfile(this.props.user, {
			first_name: firstNameEl.value,
			last_name: lastNameEl.value,
			email: userEmailEl.value,
			city: userCityEl.value,
			school: userSchoolEl.value
		}, {
			first_name: firstNameEl.value,
			last_name: lastNameEl.value,
			email: userEmailEl.value,
			city: userCityEl.value,
			school: userSchoolEl.value,
			current_password: currentPasswordEl.value,
			new_password: newPasswordEl.value,
		}, (r) => {

			/** Попытка отправить маленькие автатарки на сервер
			 */
			this.props.StateUserAction.updateProfile(this.props.user, {}, {
				avatar_32x32: this.props.user.avatar_32x32,
				avatar_62x62: this.props.user.avatar_62x62,
			}, (r) => {

				/** Попытка отправить большие автатарки на сервер
				 */
				this.props.StateUserAction.updateProfile(this.props.user, {}, {
					avatar_90x90: this.props.user.avatar_90x90,
					avatar_150x150: this.props.user.avatar_150x150,
				});
			});

			this.props.config.profile_edit_success = 1;
			this.props.StateConfigAction.update(this.props.config);
		});
	}

	/**
	 * Удаление профиля
	 * @fires click
	 * @param {Object} e
	 */
	removeProfile(e) {
		this.reset();
	}

	/**
	 * Render component
	 * @return {Object} jsx object
	 */
	render() {
		if(this.props.config.profile_edit_success === 1) {
			return <div id="popup1"
						className="modal fade show"
						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.edit_profile_title}</span>
									</div>
								
									<div className="main-text uppercase">
										{this.props.lang.save_success_msg}
									</div>
								
									<Link className="button"
										data-dismiss="modal"
										onClick={this.removeProfile.bind(this)}>{this.props.lang.close_msg_title}</Link>
								</div>
							</div>
					</div>
		}

		if(this.props.config.confirm_remove_profile === 1) {
			return <div className="modal fade show" id="popup2" 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.edit_profile_title}</span>
								</div>
								<div className="main-text uppercase">
									{this.props.lang.remove_profile_msg}
								</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.reset.bind(this)}>{this.props.lang.confirm_title}</Link>
								</div>
								
							</div>
						</div>
					</div>
		}

		return <div id="popup3"
					className="popup3 modal fade show" 
					tabIndex="-1" 
					role="dialog">
						<div className="modal-dialog" role="document">
							<div className="modal-content">
								<ProfileEditHeader />
								<ProfileEditForm />

								<div className="button-wrap">
									<Link className="button disable-button"
										onClick={this.reset.bind(this)}>{this.props.lang.reset_title}</Link>
									<Link className="button"
										onClick={this.update.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)(ProfileEdit);