mirror of
https://github.com/aclindsa/moneygo.git
synced 2024-10-30 07:40:05 -04:00
Convert NewUserPanel to a Modal, and to use redux
This commit is contained in:
parent
4f940b31a1
commit
871aa88ea6
@ -9,6 +9,20 @@ var User = models.User;
|
|||||||
var Session = models.Session;
|
var Session = models.Session;
|
||||||
var Error = models.Error;
|
var Error = models.Error;
|
||||||
|
|
||||||
|
function createUser(user) {
|
||||||
|
return {
|
||||||
|
type: UserConstants.CREATE_USER,
|
||||||
|
user: user
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function userCreated(user) {
|
||||||
|
return {
|
||||||
|
type: UserConstants.USER_CREATED,
|
||||||
|
user: user
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function loginUser() {
|
function loginUser() {
|
||||||
return {
|
return {
|
||||||
type: UserConstants.LOGIN_USER
|
type: UserConstants.LOGIN_USER
|
||||||
@ -95,8 +109,34 @@ function initializeSession(dispatch, session) {
|
|||||||
dispatch(SecurityActions.fetchAll());
|
dispatch(SecurityActions.fetchAll());
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function create(user) {
|
||||||
|
return function(dispatch) {
|
||||||
|
dispatch(createUser(user));
|
||||||
|
$.ajax({
|
||||||
|
type: "POST",
|
||||||
|
dataType: "json",
|
||||||
|
url: "user/",
|
||||||
|
data: {user: user.toJSON()},
|
||||||
|
success: function(data, status, jqXHR) {
|
||||||
|
var e = new Error();
|
||||||
|
e.fromJSON(data);
|
||||||
|
if (e.isError()) {
|
||||||
|
dispatch(ErrorActions.serverError(e));
|
||||||
|
} else {
|
||||||
|
var u = new User();
|
||||||
|
u.fromJSON(data);
|
||||||
|
dispatch(userCreated(u));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error: function(jqXHR, status, error) {
|
||||||
|
dispatch(ErrorActions.ajaxError(e));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
function login(user) {
|
function login(user) {
|
||||||
return function (dispatch) {
|
return function(dispatch) {
|
||||||
dispatch(loginUser());
|
dispatch(loginUser());
|
||||||
|
|
||||||
$.ajax({
|
$.ajax({
|
||||||
@ -200,6 +240,7 @@ function update(user) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
|
create: create,
|
||||||
fetch: fetch,
|
fetch: fetch,
|
||||||
login: login,
|
login: login,
|
||||||
logout: logout,
|
logout: logout,
|
||||||
|
@ -7,7 +7,7 @@ var Tab = ReactBootstrap.Tab;
|
|||||||
var Modal = ReactBootstrap.Modal;
|
var Modal = ReactBootstrap.Modal;
|
||||||
|
|
||||||
var TopBarContainer = require('../containers/TopBarContainer');
|
var TopBarContainer = require('../containers/TopBarContainer');
|
||||||
var NewUserForm = require('./NewUserForm');
|
var NewUserModalContainer = require('../containers/NewUserModalContainer');
|
||||||
var AccountSettingsModalContainer = require('../containers/AccountSettingsModalContainer');
|
var AccountSettingsModalContainer = require('../containers/AccountSettingsModalContainer');
|
||||||
var AccountsTabContainer = require('../containers/AccountsTabContainer');
|
var AccountsTabContainer = require('../containers/AccountsTabContainer');
|
||||||
var SecuritiesTabContainer = require('../containers/SecuritiesTabContainer');
|
var SecuritiesTabContainer = require('../containers/SecuritiesTabContainer');
|
||||||
@ -16,75 +16,56 @@ module.exports = React.createClass({
|
|||||||
displayName: "MoneyGoApp",
|
displayName: "MoneyGoApp",
|
||||||
getInitialState: function() {
|
getInitialState: function() {
|
||||||
return {
|
return {
|
||||||
hash: "home",
|
showNewUserModal: false,
|
||||||
showAccountSettingsModal: false
|
showAccountSettingsModal: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
componentDidMount: function() {
|
componentDidMount: function() {
|
||||||
this.props.tryResumingSession();
|
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() {
|
handleAccountSettings: function() {
|
||||||
this.setState({showAccountSettingsModal: true});
|
this.setState({showAccountSettingsModal: true});
|
||||||
},
|
},
|
||||||
handleSettingsSubmitted: function(user) {
|
handleSettingsSubmitted: function(user) {
|
||||||
this.setState({
|
this.setState({showAccountSettingsModal: false});
|
||||||
showAccountSettingsModal: false
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
handleSettingsCanceled: function() {
|
handleSettingsCanceled: function() {
|
||||||
this.setState({showAccountSettingsModal: false});
|
this.setState({showAccountSettingsModal: false});
|
||||||
},
|
},
|
||||||
handleCreateNewUser: function() {
|
handleCreateNewUser: function() {
|
||||||
this.setHash("new_user");
|
this.setState({showNewUserModal: true});
|
||||||
},
|
},
|
||||||
handleGoHome: function() {
|
handleNewUserCreated: function() {
|
||||||
this.setHash("home");
|
this.setState({showNewUserModal: false});
|
||||||
|
},
|
||||||
|
handleNewUserCanceled: function() {
|
||||||
|
this.setState({showNewUserModal: false});
|
||||||
},
|
},
|
||||||
render: function() {
|
render: function() {
|
||||||
var mainContent;
|
var mainContent;
|
||||||
if (this.state.hash == "new_user") {
|
if (this.props.user.isUser())
|
||||||
mainContent = <NewUserForm onNewUser={this.handleGoHome} onCancel={this.handleGoHome}/>
|
mainContent = (
|
||||||
} else {
|
<Tabs defaultActiveKey={1} id='mainNavigationTabs'>
|
||||||
if (this.props.user.isUser())
|
<Tab title="Accounts" eventKey={1} >
|
||||||
mainContent = (
|
<AccountsTabContainer
|
||||||
<Tabs defaultActiveKey={1} id='mainNavigationTabs'>
|
className="fullheight" />
|
||||||
<Tab title="Accounts" eventKey={1} >
|
</Tab>
|
||||||
<AccountsTabContainer
|
<Tab title="Securities" eventKey={2} >
|
||||||
className="fullheight" />
|
<SecuritiesTabContainer
|
||||||
</Tab>
|
className="fullheight" />
|
||||||
<Tab title="Securities" eventKey={2} >
|
</Tab>
|
||||||
<SecuritiesTabContainer
|
<Tab title="Scheduled Transactions" eventKey={3} >Scheduled transactions go here...</Tab>
|
||||||
className="fullheight" />
|
<Tab title="Budgets" eventKey={4} >Budgets go here...</Tab>
|
||||||
</Tab>
|
<Tab title="Reports" eventKey={5} >Reports go here...</Tab>
|
||||||
<Tab title="Scheduled Transactions" eventKey={3} >Scheduled transactions go here...</Tab>
|
</Tabs>);
|
||||||
<Tab title="Budgets" eventKey={4} >Budgets go here...</Tab>
|
else
|
||||||
<Tab title="Reports" eventKey={5} >Reports go here...</Tab>
|
mainContent = (
|
||||||
</Tabs>);
|
<Jumbotron>
|
||||||
else
|
<center>
|
||||||
mainContent = (
|
<h1>Money<i>Go</i></h1>
|
||||||
<Jumbotron>
|
<p><i>Go</i> manage your money.</p>
|
||||||
<center>
|
</center>
|
||||||
<h1>Money<i>Go</i></h1>
|
</Jumbotron>);
|
||||||
<p><i>Go</i> manage your money.</p>
|
|
||||||
</center>
|
|
||||||
</Jumbotron>);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fullheight ui">
|
<div className="fullheight ui">
|
||||||
@ -92,6 +73,10 @@ module.exports = React.createClass({
|
|||||||
onCreateNewUser={this.handleCreateNewUser}
|
onCreateNewUser={this.handleCreateNewUser}
|
||||||
onAccountSettings={this.handleAccountSettings} />
|
onAccountSettings={this.handleAccountSettings} />
|
||||||
{mainContent}
|
{mainContent}
|
||||||
|
<NewUserModalContainer
|
||||||
|
show={this.state.showNewUserModal}
|
||||||
|
onSubmit={this.handleNewUserCreated}
|
||||||
|
onCancel={this.handleNewUserCanceled}/>
|
||||||
<AccountSettingsModalContainer
|
<AccountSettingsModalContainer
|
||||||
show={this.state.showAccountSettingsModal}
|
show={this.state.showAccountSettingsModal}
|
||||||
onSubmit={this.handleSettingsSubmitted}
|
onSubmit={this.handleSettingsSubmitted}
|
||||||
|
@ -2,7 +2,7 @@ var React = require('react');
|
|||||||
var ReactDOM = require('react-dom');
|
var ReactDOM = require('react-dom');
|
||||||
|
|
||||||
var ReactBootstrap = require('react-bootstrap');
|
var ReactBootstrap = require('react-bootstrap');
|
||||||
var Panel = ReactBootstrap.Panel;
|
var Modal = ReactBootstrap.Modal;
|
||||||
var Form = ReactBootstrap.Form;
|
var Form = ReactBootstrap.Form;
|
||||||
var FormGroup = ReactBootstrap.FormGroup;
|
var FormGroup = ReactBootstrap.FormGroup;
|
||||||
var FormControl = ReactBootstrap.FormControl;
|
var FormControl = ReactBootstrap.FormControl;
|
||||||
@ -16,6 +16,7 @@ var User = models.User;
|
|||||||
var Error = models.Error;
|
var Error = models.Error;
|
||||||
|
|
||||||
module.exports = React.createClass({
|
module.exports = React.createClass({
|
||||||
|
displayName: "NewUserModal",
|
||||||
getInitialState: function() {
|
getInitialState: function() {
|
||||||
return {error: "",
|
return {error: "",
|
||||||
name: "",
|
name: "",
|
||||||
@ -73,35 +74,17 @@ module.exports = React.createClass({
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.handleCreateNewUser(u);
|
this.props.createNewUser(u);
|
||||||
},
|
if (this.props.onSubmit != null)
|
||||||
handleCreateNewUser: function(user) {
|
this.props.onSubmit(u);
|
||||||
$.ajax({
|
|
||||||
type: "POST",
|
|
||||||
dataType: "json",
|
|
||||||
url: "user/",
|
|
||||||
data: {user: user.toJSON()},
|
|
||||||
success: function(data, status, jqXHR) {
|
|
||||||
var e = new Error();
|
|
||||||
e.fromJSON(data);
|
|
||||||
if (e.isError()) {
|
|
||||||
this.setState({error: e});
|
|
||||||
} else {
|
|
||||||
this.props.onNewUser();
|
|
||||||
}
|
|
||||||
}.bind(this),
|
|
||||||
error: function(jqXHR, status, error) {
|
|
||||||
var e = new Error();
|
|
||||||
e.ErrorId = 5;
|
|
||||||
e.ErrorString = "Request Failed: " + status + error;
|
|
||||||
this.setState({error: e});
|
|
||||||
}.bind(this),
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
render: function() {
|
render: function() {
|
||||||
var title = <h3>Create New User</h3>;
|
|
||||||
return (
|
return (
|
||||||
<Panel header={title} bsStyle="info">
|
<Modal show={this.props.show} onHide={this.handleCancel} bsSize="large">
|
||||||
|
<Modal.Header closeButton>
|
||||||
|
<Modal.Title>Create New user</Modal.Title>
|
||||||
|
</Modal.Header>
|
||||||
|
<Modal.Body>
|
||||||
<span color="red">{this.state.error}</span>
|
<span color="red">{this.state.error}</span>
|
||||||
<Form horizontal onSubmit={this.handleSubmit}>
|
<Form horizontal onSubmit={this.handleSubmit}>
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
@ -151,15 +134,17 @@ module.exports = React.createClass({
|
|||||||
<FormControl.Feedback/>
|
<FormControl.Feedback/>
|
||||||
</Col>
|
</Col>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
|
</Form>
|
||||||
<ButtonGroup className="pull-right">
|
</Modal.Body>
|
||||||
|
<Modal.Footer>
|
||||||
|
<ButtonGroup>
|
||||||
<Button onClick={this.handleCancel}
|
<Button onClick={this.handleCancel}
|
||||||
bsStyle="warning">Cancel</Button>
|
bsStyle="warning">Cancel</Button>
|
||||||
<Button type="submit"
|
<Button onClick={this.handleSubmit}
|
||||||
bsStyle="success">Create New User</Button>
|
bsStyle="success">Create New User</Button>
|
||||||
</ButtonGroup>
|
</ButtonGroup>
|
||||||
</Form>
|
</Modal.Footer>
|
||||||
</Panel>
|
</Modal>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
@ -1,6 +1,8 @@
|
|||||||
var keyMirror = require('keymirror');
|
var keyMirror = require('keymirror');
|
||||||
|
|
||||||
module.exports = keyMirror({
|
module.exports = keyMirror({
|
||||||
|
CREATE_USER: null,
|
||||||
|
USER_CREATED: null,
|
||||||
LOGIN_USER: null,
|
LOGIN_USER: null,
|
||||||
USER_LOGGEDIN: null,
|
USER_LOGGEDIN: null,
|
||||||
LOGOUT_USER: null,
|
LOGOUT_USER: null,
|
||||||
|
20
js/containers/NewUserModalContainer.js
Normal file
20
js/containers/NewUserModalContainer.js
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
var connect = require('react-redux').connect;
|
||||||
|
|
||||||
|
var UserActions = require('../actions/UserActions');
|
||||||
|
|
||||||
|
var NewUserModal = require('../components/NewUserModal');
|
||||||
|
|
||||||
|
function mapStateToProps(state) {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapDispatchToProps(dispatch) {
|
||||||
|
return {
|
||||||
|
createNewUser: function(user) {dispatch(UserActions.create(user))}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = connect(
|
||||||
|
mapStateToProps,
|
||||||
|
mapDispatchToProps
|
||||||
|
)(NewUserModal)
|
Loading…
Reference in New Issue
Block a user