lunch/js/components/LunchApp.js

var React = require('react');

var ReactBootstrap = require('react-bootstrap');
var Jumbotron = ReactBootstrap.Jumbotron;
var Tabs = ReactBootstrap.Tabs;
var Tab = ReactBootstrap.Tab;
var Modal = ReactBootstrap.Modal;

var TopBarContainer = require('../containers/TopBarContainer');
var RecordLunchContainer = require('../containers/RecordLunchContainer');
var AccountSettingsModalContainer = require('../containers/AccountSettingsModalContainer');
var LunchStatsContainer = require('../containers/LunchStatsContainer');
var NewUserModalContainer = require('../containers/NewUserModalContainer');
var NewGroupModalContainer = require('../containers/NewGroupModalContainer');

module.exports = React.createClass({
	displayName: "LunchApp",
	getInitialState: function() {
		return {
			showNewUserModal: false,
			showNewGroupModal: false,
			showAccountSettingsModal: false
		};
	},
	componentDidMount: function() {
		this.props.tryResumingSession();
		this.props.fetchGroups();
	},
	handleAccountSettings: function() {
		this.setState({showAccountSettingsModal: true});
	},
	handleSettingsSubmitted: function(user) {
		this.setState({showAccountSettingsModal: false});
	},
	handleSettingsCanceled: function() {
		this.setState({showAccountSettingsModal: false});
	},
	handleCreateNewUser: function() {
		this.setState({showNewUserModal: true});
	},
	handleNewUserCreated: function() {
		this.setState({showNewUserModal: false});
	},
	handleNewUserCanceled: function() {
		this.setState({showNewUserModal: false});
	},
	handleCreateNewGroup: function() {
		this.setState({showNewGroupModal: true});
	},
	handleNewGroupCreated: function() {
		this.setState({showNewGroupModal: false});
	},
	handleNewGroupCanceled: function() {
		this.setState({showNewGroupModal: false});
	},
	render: function() {
		var mainContent;
		if (this.props.user.isUser())
			mainContent = (
				<Tabs defaultActiveKey={1} id='mainNavigationTabs'>
					<Tab title="Record Lunch" eventKey={1} >
						<RecordLunchContainer />
					</Tab>
					<Tab title="Reports" eventKey={2} >
						<LunchStatsContainer />
					</Tab>
				</Tabs>);
		else
			mainContent = (
				<Jumbotron>
					<center>
						<h1>Lunch App</h1>
					</center>
				</Jumbotron>);

		return (
			<div className="fullheight ui">
				<TopBarContainer
					onCreateNewUser={this.handleCreateNewUser}
					onCreateNewGroup={this.handleCreateNewGroup}
					onAccountSettings={this.handleAccountSettings} />
				{mainContent}
				<NewUserModalContainer
					show={this.state.showNewUserModal}
					onSubmit={this.handleNewUserCreated}
					onCancel={this.handleNewUserCanceled}/>
				<NewGroupModalContainer
					show={this.state.showNewGroupModal}
					onSubmit={this.handleNewGroupCreated}
					onCancel={this.handleNewGroupCanceled}/>
				<AccountSettingsModalContainer
					show={this.state.showAccountSettingsModal}
					onSubmit={this.handleSettingsSubmitted}
					onCancel={this.handleSettingsCanceled}/>
			</div>
		);
	}
});