Convert NewUserPanel to a Modal, and to use redux

js/actions/UserActions.js

@@ -9,6 +9,20 @@ var User = models.User;
 var Session = models.Session;
 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() {
 	return {
 		type: UserConstants.LOGIN_USER
@@ -97,8 +111,34 @@ function initializeSession(dispatch, session) {
 	dispatch(SuggestionActions.fetchPopular());
 }
 
+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) {
-	return function (dispatch) {
+	return function(dispatch) {
 		dispatch(loginUser());
 
 		$.ajax({
@@ -202,6 +242,7 @@ function update(user) {
 }
 
 module.exports = {
+	create: create,
 	fetch: fetch,
 	login: login,
 	logout: logout,

js/components/LunchApp.js

@@ -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}

js/components/NewUserModal.js

@@ -2,7 +2,7 @@ var React = require('react');
 var ReactDOM = require('react-dom');
 
 var ReactBootstrap = require('react-bootstrap');
-var Panel = ReactBootstrap.Panel;
+var Modal = ReactBootstrap.Modal;
 var Form = ReactBootstrap.Form;
 var FormGroup = ReactBootstrap.FormGroup;
 var FormControl = ReactBootstrap.FormControl;
@@ -16,6 +16,7 @@ var User = models.User;
 var Error = models.Error;
 
 module.exports = React.createClass({
+	displayName: "NewUserModal",
 	getInitialState: function() {
 		return {error: "",
 			name: "",
@@ -73,35 +74,17 @@ module.exports = React.createClass({
 			return;
 		}
 
-		this.handleCreateNewUser(u);
-	},
-	handleCreateNewUser: function(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()) {
-					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),
-		});
+		this.props.createNewUser(u);
+		if (this.props.onSubmit != null)
+			this.props.onSubmit(u);
 	},
 	render: function() {
-		var title = <h3>Create New User</h3>;
 		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>
 				<Form horizontal onSubmit={this.handleSubmit}>
 					<FormGroup>
@@ -151,15 +134,17 @@ module.exports = React.createClass({
 						<FormControl.Feedback/>
 						</Col>
 					</FormGroup>
-
-					<ButtonGroup className="pull-right">
+				</Form>
+				</Modal.Body>
+				<Modal.Footer>
+					<ButtonGroup>
 						<Button onClick={this.handleCancel}
 								bsStyle="warning">Cancel</Button>
-						<Button type="submit"
+						<Button onClick={this.handleSubmit}
 								bsStyle="success">Create New User</Button>
 					</ButtonGroup>
-				</Form>
-			</Panel>
+				</Modal.Footer>
+			</Modal>
 		);
 	}
 });

js/constants/UserConstants.js

@@ -1,6 +1,8 @@
 var keyMirror = require('keymirror');
 
 module.exports = keyMirror({
+	CREATE_USER: null,
+	USER_CREATED: null,
 	LOGIN_USER: null,
 	USER_LOGGEDIN: null,
 	LOGOUT_USER: null,

js/containers/NewUserModalContainer.js

@@ -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)