components/Header/HeaderNav/HeaderNav.jsx

/**
 * Модуль навигации в хедере
 * @module HeaderNav
 * @author Ihor Bielchenko
 * @requires react
 * @requires react#Component
 * @requires react-redux
 * @requires redux#bindActionCreators
 * @requires actions/StateConfigAction.js
 * @requires components/Header/HeaderNav/HeaderNavItem/HeaderNavItem.jsx
 * @requires components/Header/HeaderNav/HeaderNavNotices/HeaderNavNotices.jsx
 * @requires img/header1.png
 * @requires img/header2.png
 * @requires img/header3.png
 * @requires Base.js
 */

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as StateConfigAction from '../../../actions/StateConfigAction.js';
import HeaderNavItem from './HeaderNavItem/HeaderNavItem.jsx';
import HeaderNavNotices from './HeaderNavNotices/HeaderNavNotices.jsx';
import HeaderNavProfileNav from './HeaderNavProfileNav/HeaderNavProfileNav.jsx';
import Header1 from '../../../img/header1.png';
import Header2 from '../../../img/header2.png';
import Header3 from '../../../img/header3.png';
import Base from '../../../Base.js';

/**
 * Компонент навигации в хедере
 * @extends Component
 */
class HeaderNav extends Component {

	/**
	 * Объект состяния компонента
	 * @type {Object} 
	 * @inner
	 * @property {String} element Опредиление выпадающего контейнера который нужно отображать
	 */
	state = {
		element: ''
	}

	/**
	 * Клик по элементу. Показ выпадающего списка
	 * @fires click
	 * @param {String} element Название контейнера который нужно отобразить
	 * @param {Object} e
	 */
	click(element, resource, e) {

		if(resource !== '') {
			Base.changeURL(resource);
		}

		this.props.StateConfigAction.showElement(this.props.config, element);
	}
	

	/**
	 * Render component
	 * @return {Object} jsx object
	 */
	render() {
		var i, n = 0,
			last, length;

		/** Определение не прочитанных сообщений
		 */
		for(i = 0; i < this.props.notices.items.length; i++) {
			length = this.props.notices.items[i].messages.length;
			last = this.props.notices.items[i].messages[length - 1];
			
			if(last.readed === 0) {
				n++;
			}
		}

		return <div className="right">
					<HeaderNavItem 
						icon="plus"
						content="+"
						image={Header1}
						onClick={this.click.bind(this, 'add_group', '')} />

					<HeaderNavItem
						content=""
						image={Header2}
						onClick={this.click.bind(this, 'profile_menu', '')}>
							{this.props.config.profile_menu === 1 ? 
								<HeaderNavProfileNav /> : ''}
					</HeaderNavItem>

					<HeaderNavItem 
						icon="count"
						content={n}
						image={Header3}
						onClick={this.click.bind(this, 'notices_menu', '')}>
							{this.props.config.notices_menu === 1 && n > 0 ?
								<HeaderNavNotices /> : ''}
					</HeaderNavItem>
				</div>
	}
}

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

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

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