components/ReviewMessage/ReviewMessage.jsx

/**
 * Модуль для отправки отзыва
 * @module ReviewMessage
 * @author Ihor Bielchenko
 * @requires react
 * @requires react#Component
 * @requires redux#bindActionCreators
 * @requires react-redux#connect
 * @requires Base.js
 * @requires actions/StateConfigAction.js
 * @requires components/Common/Link.jsx
 * @requires img/title-otziv.png
 * @requires img/orange-pencil.png
 * @requires img/title-ok.png
 */

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

/**
 * Отправка отзыва
 * @extends Component
 */
class ReviewMessage extends Component {

	/**
	 * Закрыть попап
	 * @fires click
	 * @param {Object} e
	 */
	close(e) {
		this.props.StateConfigAction.showElement(this.props.config, 'review_message');
	}

	/**
	 * Отправка отзыва
	 * @fires click
	 * @param {Object} e
	 */
	send(e) {
		let el = document.getElementById('review-msg');

		if(typeof el.value !== 'undefined') {
			Base.serverSEND(JSON.stringify({
				action: 'teacher/review/add',
				properties: {
					content: el.value
				}
			}), (r) => {
				this.props.config.review_message_success = 1;
				this.props.StateConfigAction.update(this.props.config);
			});
		}
	}

	/**
	 * Render component
	 * @return {Object} jsx object
	 */
	render() {
		if(this.props.config.review_message_success === 1) {
			return <div className="modal fade show"
						id="popup13"
						tabIndex="-1"
						role="dialog">
							<div className="modal-dialog" role="document">
								<div className="modal-content">
									<div className="title">
										<img src={Ok} alt="success" />
										<span>{this.props.lang.review_title}</span>
									</div>

									<div className="main-text">
										{this.props.lang.review_sent_title}
									</div>

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

		return <div className="modal fade show" 
					id="popup14" 
					tabIndex="-1"
					role="dialog">
						<div className="modal-dialog" role="document">
							<div className="modal-content">
								<div className="title">
									<img src={Review} alt="review" />
									<span>{this.props.lang.reviews_title}</span>
								</div>

								<div className="title-mes">
										<img src={Pencil} alt="pencil" />
										<span>{this.props.lang.review_msg_text}</span>
										<textarea id="review-msg"></textarea>
									</div>
								
								<div className="button-wrap">
									<Link 
										data-dismiss="modal" 
										className="button disable-button"
										onClick={this.close.bind(this)}>{this.props.lang.reset_title}</Link>
									
									<Link data-dismiss="modal" 
										className="button"
										onClick={this.send.bind(this)}>{this.props.lang.send_title}</Link>
								</div>

							</div>
						</div>
					</div>
	}
}

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

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

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