aclindsa/lunch
1
0
Fork 0
Code Releases Activity

Convert NewUserPanel to a Modal, and to use redux

Browse Source
This commit is contained in:
Aaron Lindsay
2017-01-08 20:51:58 -05:00
parent a1999a4d43
commit 6e34a72c22
5 changed files with 111 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
js/components/LunchApp.js
View File

@ -10,75 +10,56 @@ var TopBarContainer = require('../containers/TopBarContainer');
var RecordLunchContainer = require('../containers/RecordLunchContainer');
var AccountSettingsModalContainer = require('../containers/AccountSettingsModalContainer');
var LunchStatsContainer = require('../containers/LunchStatsContainer');
var NewUserForm = require('./NewUserForm');
var NewUserModalContainer = require('../containers//NewUserModalContainer');
module.exports = React.createClass({
displayName: "LunchApp",
getInitialState: function() {
return {
hash: "home",
showNewUserModal: false,
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
});
this.setState({showAccountSettingsModal: false});
},
handleSettingsCanceled: function() {
this.setState({showAccountSettingsModal: false});
},
handleCreateNewUser: function() {
this.setHash("new_user");
this.setState({showNewUserModal: true});
},
handleGoHome: function() {
this.setHash("home");
handleNewUserCreated: function() {
this.setState({showNewUserModal: false});
},
handleNewUserCanceled: function() {
this.setState({showNewUserModal: false});
},
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="Reports" eventKey={2} >
<LunchStatsContainer />
</Tab>
</Tabs>);
else
mainContent = (
<Jumbotron>
<center>
<h1>Lunch App</h1>
</center>
</Jumbotron>);
}
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">
@ -86,6 +67,10 @@ module.exports = React.createClass({
onCreateNewUser={this.handleCreateNewUser}
onAccountSettings={this.handleAccountSettings} />
{mainContent}
<NewUserModalContainer
show={this.state.showNewUserModal}
onSubmit={this.handleNewUserCreated}
onCancel={this.handleNewUserCanceled}/>
<AccountSettingsModalContainer
show={this.state.showAccountSettingsModal}
onSubmit={this.handleSettingsSubmitted}