containers/Cabinet.jsx

/**
 * Базовый модуль всего приложения
 * @module Editor
 * @author Ihor Bielchenko
 * @requires react
 * @requires react#Component
 * @requires redux#bindActionCreators
 * @requires react-redux#connect
 * @requires actions/StateConfigAction.js
 * @requires components/Header/Header.jsx
 * @requires components/GroupMainBar/GroupMainBar.jsx
 * @requires components/TeacherMenu/TeacherMenu.jsx
 * @requires components/TeacherPanel/TeacherPanel.jsx
 * @requires components/GroupTableItem/GroupTableItem.jsx
 * @requires components/ProfileSettings/ProfileSettings.jsx
 * @requires components/VideoTutorial/VideoTutorial.jsx
 * @requires components/ReviewMessage/ReviewMessage.jsx
 * @requires components/UserMainBar/UserMainBar.jsx
 * @requires Base.jsx
 */

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 Header from '../components/Header/Header.jsx';
import GroupMainBar from '../components/GroupMainBar/GroupMainBar.jsx';
import TeacherMenu from '../components/TeacherMenu/TeacherMenu.jsx';
import TeacherPanel from '../components/TeacherPanel/TeacherPanel.jsx';
import GroupTableItem from '../components/GroupTableItem/GroupTableItem.jsx';
import ProfileEdit from '../components/ProfileEdit/ProfileEdit.jsx';
import ProfileSettings from '../components/ProfileSettings/ProfileSettings.jsx';
import VideoTutorial from '../components/VideoTutorial/VideoTutorial.jsx';
import ReviewMessage from '../components/ReviewMessage/ReviewMessage.jsx';
import RegistrationCode from '../components/RegistrationCode/RegistrationCode.jsx';
import MessageArea from '../components/MessageArea/MessageArea.jsx';
import AddTask from '../components/AddTask/AddTask.jsx';
import AddGroup from '../components/AddGroup/AddGroup.jsx';
import EditGroup from '../components/EditGroup/EditGroup.jsx';
import UserMainBar from '../components/UserMainBar/UserMainBar.jsx';
import TeacherGroups from '../components/TeacherGroups/TeacherGroups.jsx';
import TaskHistory from '../components/TaskHistory/TaskHistory.jsx';
import Dialogs from '../components/Dialogs/Dialogs.jsx';
import Base from '../Base.js';

/**
 * Базовый компонент кабинета
 * @extends Component
 */
class Cabinet extends Component {

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

	/**
	 * Invoked immediately after a component is mounted
	 * @fires componentDidMount
	 */
	componentDidMount() {
		let self = this;

		var properties = self.getResourcesProperties();
		self.includeComponents(properties);
		
		document.addEventListener('change-page', (e) => {
			var properties = self.getResourcesProperties();
			self.includeComponents(properties);
		});

		window.onpopstate = () => {
			var properties = self.getResourcesProperties();
			self.includeComponents(properties);
		}
	}

	/**
	 * Получение массива параметров из адресной строки
	 * @return {Array}
	 */
	getResourcesProperties() {
		var properties = [],
			resources = window.location.pathname.split('/'),
			i;

		for(i = 0; i < resources.length; i++) {
			if(resources[i] !== '') {
				properties.push(resources[i]);
			}
		}

		return properties;
	}

	/**
	 * Определение страницы
	 * @param {Array} properties Массив параметров страницы
	 * @return {Array}
	 */
	includeComponents(properties = []) {
		/** Параметр первого уровня
		 */
		switch(properties[0]) {

			/** Кабинет учителя
			 */
			case 'teacher':

				/** Параметр второго уровня
				 */
				switch(properties[1]) {

					/** Группа
					 */
					case 'group':
						if(typeof properties[2] !== 'undefined' && 
							typeof properties[3] === 'undefined' && 
							this.state.resource !== 'teacher/group') {
								Base.sendXHR('teacher/group/'+ properties[2], 'GET', (r) => {
									var g = Number(properties[2]),
										i,
										group = '';

									if(isNaN(g)) {
										this.setState({resource: '404'});
									}

									else {
										for(i = 0; i < this.props.user.groups.length; i++) {
											if(this.props.user.groups[i].id === g) {
												group = this.props.user.groups[i];
												break;
											}
										}

										if(group === '') {
											this.setState({resource: '404'});
										}

										else {
											this.props.user.current_group = g;
											this.props.StateUserAction.update(this.props.user, () => {
												this.setState({resource: 'teacher/group'});
											});
										}
									}
								});
						}
						break;

					/** Группы
					 */
					case 'groups':
						if(typeof properties[3] === 'undefined' && 
							this.state.resource !== 'teacher/groups') {
								Base.sendXHR('teacher/groups', 'GET', (r) => {
									this.props.user.current_group = 0;
									this.props.StateUserAction.update(this.props.user, () => {
										this.setState({resource: 'teacher/groups'});
									});
								});
						}
						break;

					/** Страница 404
					 */
					default:
						if(this.state.resource !== '404') {
							this.setState({resource: '404'});
						}
						break;

				}
				break;

			/** Кабинет ученика
			 */
			case 'student':
				break;

			/** Страница 404
			 */
			default:
				this.setState({resource: '404'});
				break;
		}
	}

	/**
	 * Render component
	 * @return {Object} jsx object
	 */
	render() {
		var components = [];
		switch(this.state.resource) {
			case 'teacher/group':
				if(this.props.user.current_group !== 0) {
					components.push(<Header key={components.length} />);
					components.push(<GroupMainBar key={components.length} />);
					components.push(<TeacherMenu key={components.length} />);
					components.push(<TeacherPanel key={components.length} />);
					components.push(<GroupTableItem key={components.length} />);

					if(this.props.config.add_group === 1) {
						components.push(<AddGroup key={components.length} />);
					}

					if(this.props.config.profile_edit === 1) {
						components.push(<ProfileEdit key={components.length} />);
					}

					if(this.props.config.profile_settings === 1) {
						components.push(<ProfileSettings key={components.length} />);
					}

					if(this.props.config.video_tutorial === 1) {
						components.push(<VideoTutorial key={components.length} />);
					}

					if(this.props.config.review_message === 1) {
						components.push(<ReviewMessage key={components.length} />);
					}

					if(this.props.config.registration_code === 1) {
						components.push(<RegistrationCode key={components.length} />);
					}

					if(this.props.config.message_area === 1) {
						components.push(<MessageArea key={components.length} />);
					}

					if(this.props.config.add_task === 1) {
						components.push(<AddTask key={components.length} />);
					}

					if(this.props.config.edit_group === 1) {
						components.push(<EditGroup key={components.length} />);
					}

					if(this.props.config.task_history === 1) {
						components.push(<TaskHistory key={components.length} />);
					}

					if(this.props.config.dialogs === 1) {
						components.push(<Dialogs key={components.length} />);
					}
				}

				else Base.changeURL('/teacher/groups');
				break;

			case 'teacher/groups':
				components.push(<Header key={components.length} />);
				components.push(<UserMainBar key={components.length} />);
				components.push(<TeacherGroups key={components.length} />);

				if(this.props.config.add_group === 1) {
					components.push(<AddGroup key={components.length} />);
				}

				if(this.props.config.profile_edit === 1) {
					components.push(<ProfileEdit key={components.length} />);
				}

				if(this.props.config.profile_settings === 1) {
					components.push(<ProfileSettings key={components.length} />);
				}

				if(this.props.config.video_tutorial === 1) {
					components.push(<VideoTutorial key={components.length} />);
				}

				if(this.props.config.review_message === 1) {
					components.push(<ReviewMessage key={components.length} />);
				}

				if(this.props.config.dialogs === 1) {
					components.push(<Dialogs key={components.length} />);
				}

				break;

			default:
				break;
		}

		return <div>{components}</div>
	}
}

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

/**
 * 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)(Cabinet);