components/Header/HeaderNav/HeaderNavProfileNav/HeaderNavProfileNav.jsx

/**
 * Выпадающее меню профиля в хедере
 * @module HeaderNavProfileNav
 * @author Ihor Bielchenko
 * @requires react
 * @requires react#Component
 * @requires redux#bindActionCreators
 * @requires react-redux#connect
 * @requires components/Header/HeaderNav/HeaderNavProfileNav/HeaderNavProfileNavItem/HeaderNavProfileNavItem.jsx
 * @requires actions/StateConfigAction.js
 * @requires img/option-icon1.png
 * @requires img/option-icon2.png
 * @requires img/option-icon3.png
 * @requires img/option-icon4.png
 * @requires img/option-icon5.png
 * @requires img/option-icon6.png
 */

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import HeaderNavProfileNavItem from './HeaderNavProfileNavItem/HeaderNavProfileNavItem.jsx';
import * as StateConfigAction from '../../../../actions/StateConfigAction.js';
import Icon1 from '../../../../img/option-icon1.png';
import Icon2 from '../../../../img/option-icon2.png';
import Icon3 from '../../../../img/option-icon3.png';
import Icon4 from '../../../../img/option-icon4.png';
import Icon5 from '../../../../img/option-icon5.png';
import Icon6 from '../../../../img/option-icon6.png';

/**
 * Выпадающее меню профиля в хедере
 * @extends Component
 */
class HeaderNavProfileNav extends Component {

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

	/**
	 * Показ окна настройки соц сетей
	 * @fires click
	 * @param {Object} e
	 */
	settingsProfile(e) {
		this.props.StateConfigAction.showElement(this.props.config, 'profile_settings');
	}

	/**
	 * Показ окна с видео инструкцией
	 * @fires click
	 * @param {Object} e
	 */
	videoTutorial(e) {
		this.props.StateConfigAction.showElement(this.props.config, 'video_tutorial');
	}

	/**
	 * Показ окна для отправки отзыва
	 * @fires click
	 * @param {Object} e
	 */
	reviewMessage(e) {
		this.props.StateConfigAction.showElement(this.props.config, 'review_message');
	}

	/**
	 * Render component
	 * @return {Object} jsx object
	 */
	render() {
		let lang = this.props.lang;
		return <div className="options-popup">
					<HeaderNavProfileNavItem 
						href=""
						icon={Icon1}
						onClick={this.editProfile.bind(this)}
						title={lang.pforile_title} />

					<HeaderNavProfileNavItem 
						href="#"
						icon={Icon2}
						onClick={this.settingsProfile.bind(this)}
						title={lang.settings_title} />

					<HeaderNavProfileNavItem 
						href="#"
						icon={Icon3}
						onClick={this.reviewMessage.bind(this)}
						title={lang.reviews_title} />

					<HeaderNavProfileNavItem 
						href="/teacher/groups"
						icon={Icon4}
						title={lang.groups_title} />

					<HeaderNavProfileNavItem 
						href="#"
						icon={Icon5}
						title={lang.tutorial_title}
						onClick={this.videoTutorial.bind(this)} />

					<HeaderNavProfileNavItem 
						href="#"
						icon={Icon6}
						title={lang.exid_title} />
				</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)(HeaderNavProfileNav);