lunch/js/components/LunchApp.js

97 lines
2.5 KiB
JavaScript

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 LunchStats = require('../components/LunchStats');
var NewUserForm = require('./NewUserForm');
module.exports = React.createClass({
displayName: "LunchApp",
getInitialState: function() {
return {
hash: "home",
showAccountSettingsModal: false
};
},
componentDidMount: function() {
this.props.tryResumingSession();
this.handleHashChange();
if ("onhashchange" in window) {
window.onhashchange = this.handleHashChange;
}
},
handleHashChange: function() {
var hash = location.hash.replace(/^#/, '');
if (hash.length == 0)
hash = "home";
if (hash != this.state.hash)
this.setHash(hash);
},
setHash: function(hash) {
location.hash = hash;
if (this.state.hash != hash)
this.setState({hash: hash});
},
handleAccountSettings: function() {
this.setState({showAccountSettingsModal: true});
},
handleSettingsSubmitted: function(user) {
this.setState({
showAccountSettingsModal: false
});
},
handleSettingsCanceled: function() {
this.setState({showAccountSettingsModal: false});
},
handleCreateNewUser: function() {
this.setHash("new_user");
},
handleGoHome: function() {
this.setHash("home");
},
render: function() {
var mainContent;
if (this.state.hash == "new_user") {
mainContent = <NewUserForm onNewUser={this.handleGoHome} onCancel={this.handleGoHome}/>
} else {
if (this.props.user.isUser())
mainContent = (
<Tabs defaultActiveKey={1} id='mainNavigationTabs'>
<Tab title="Record Lunch" eventKey={1} >
<RecordLunchContainer />
</Tab>
<Tab title="Statistics" eventKey={2} >
<LunchStats />
</Tab>
</Tabs>);
else
mainContent = (
<Jumbotron>
<center>
<h1>Lunch App</h1>
</center>
</Jumbotron>);
}
return (
<div className="fullheight ui">
<TopBarContainer
onCreateNewUser={this.handleCreateNewUser}
onAccountSettings={this.handleAccountSettings} />
{mainContent}
<AccountSettingsModalContainer
show={this.state.showAccountSettingsModal}
onSubmit={this.handleSettingsSubmitted}
onCancel={this.handleSettingsCanceled}/>
</div>
);
}
});