Added in new page, however edit page is still broken

client/homebrew/homebrew.jsx

@@ -7,6 +7,7 @@ var CreateRouter = require('pico-router').createRouter;
 var HomePage = require('./pages/homePage/homePage.jsx');
 var EditPage = require('./pages/editPage/editPage.jsx');
 var SharePage = require('./pages/sharePage/sharePage.jsx');
+var NewPage = require('./pages/newPage/newPage.jsx');
 
 var Router;
 var Homebrew = React.createClass({
@@ -36,6 +37,9 @@ var Homebrew = React.createClass({
 			'/homebrew/changelog' : (args) => {
 				return <SharePage entry={{text : this.props.changelog}} />
 			},
+			'/homebrew/new' : (args) => {
+				return <NewPage />
+			},
 			'/homebrew*' : <HomePage welcomeText={this.props.welcomeText} />,
 		});
 	},

client/homebrew/pages/homePage/homePage.jsx

@@ -2,30 +2,20 @@ var React = require('react');
 var _ = require('lodash');
 var cx = require('classnames');
 
-//var Statusbar = require('../statusbar/statusbar.jsx');
-//var PageContainer = require('../pageContainer/pageContainer.jsx');
-//var Editor = require('../editor/editor.jsx');
-
-
-
 var Nav = require('naturalcrit/nav/nav.jsx');
 var Navbar = require('../../navbar/navbar.jsx');
-
 var RedditShare = require('../../navbar/redditShare.navitem.jsx');
 
+
+
 var SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
-
-
-
-//var CodeEditor = require('naturalcrit/codeEditor/codeEditor.jsx');
-
 var Editor = require('../../editor/editor.jsx');
 var BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
 
 
 
-//var KEY = 'naturalCrit-homebrew';
+
 
 var HomePage = React.createClass({
 
@@ -41,16 +31,6 @@ var HomePage = React.createClass({
 		};
 	},
 
-	componentDidMount: function() {
-		/*
-		var storage = localStorage.getItem(KEY);
-		if(storage){
-			this.setState({
-				text : storage
-			})
-		}
-		*/
-	},
 
 	handleSplitMove : function(){
 		this.refs.editor.update();
@@ -72,6 +52,8 @@ var HomePage = React.createClass({
 
 			<Nav.section>
 				<RedditShare brew={{text : this.state.text}}/>
+
+
 				<Nav.item
 					newTab={true}
 					href='https://github.com/stolksdorf/naturalcrit/issues'
@@ -80,6 +62,7 @@ var HomePage = React.createClass({
 					report issue
 				</Nav.item>
 				<Nav.item
+					newTab={true}
 					href='/homebrew/changelog'
 					color='purple'
 					icon='fa-file-text-o'>
@@ -96,26 +79,24 @@ var HomePage = React.createClass({
 	},
 
 	render : function(){
-		return(
-			<div className='homePage page'>
-				{this.renderNavbar()}
+		return <div className='homePage page'>
+			{this.renderNavbar()}
 
-				<div className='content'>
-					<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
-						<Editor value={this.state.text} onChange={this.handleTextChange} ref='editor'/>
-						<BrewRenderer brewText={this.state.text} />
-					</SplitPane>
+			<div className='content'>
+				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
+					<Editor value={this.state.text} onChange={this.handleTextChange} ref='editor'/>
+					<BrewRenderer brewText={this.state.text} />
+				</SplitPane>
 
 
-				</div>
-
-				{/*
-				<a href='/homebrew/new' className='floatingNewButton'>
-					Create your own <i className='fa fa-magic' />
-				</a>
-				*/}
 			</div>
-		);
+
+			{/*
+			<a href='/homebrew/new' className='floatingNewButton'>
+				Create your own <i className='fa fa-magic' />
+			</a>
+			*/}
+		</div>
 	}
 });
 

client/homebrew/pages/newPage/newPage.jsx

@@ -0,0 +1,129 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+var request = require("superagent");
+
+var Nav = require('naturalcrit/nav/nav.jsx');
+var Navbar = require('../../navbar/navbar.jsx');
+
+
+var SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
+var Editor = require('../../editor/editor.jsx');
+var BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
+
+
+const KEY = 'naturalCrit-homebrew-new';
+
+var NewPage = React.createClass({
+	getInitialState: function() {
+		return {
+			title : 'EDIT ME',
+			text: '',
+			isSaving : false
+		};
+	},
+
+
+	componentDidMount: function() {
+		var storage = localStorage.getItem(KEY);
+		if(storage){
+			this.setState({
+				text : storage
+			})
+		}
+
+		window.onbeforeunload = function(e){
+			return "Your homebrew isn't saved. Are you sure you want to leave?";
+		};
+	},
+
+
+	componentWillUnmount: function() {
+		window.onbeforeunload = function(){};
+	},
+
+	handleSplitMove : function(){
+		this.refs.editor.update();
+	},
+
+	handleTextChange : function(text){
+		this.setState({
+			text : text
+		});
+		localStorage.setItem(KEY, text);
+	},
+
+	handleSave : function(){
+		this.setState({
+			isSaving : true
+		});
+		request.post('/homebrew/api')
+			.send({
+				title : this.state.title,
+				text : this.state.text
+			})
+			.end((err, res)=>{
+
+				if(err){
+					this.setState({
+						isSaving : false
+					});
+					return;
+				}
+				window.onbeforeunload = function(){};
+				var brew = res.body;
+				localStorage.removeItem(KEY);
+				window.location = '/homebrew/edit/' + brew.editId;
+			})
+	},
+
+	renderSaveButton : function(){
+		if(this.state.isSaving){
+			return <Nav.item icon='fa-spinner sa-spin' className='saveButton'>
+				save...
+			</Nav.item>
+		}else{
+			return <Nav.item icon='fa-save' className='saveButton' onClick={this.handleSave}>
+				save
+			</Nav.item>
+		}
+	},
+
+
+	renderNavbar : function(){
+		return <Navbar>
+			<Nav.section>
+				<Nav.item>{this.state.title}</Nav.item>
+			</Nav.section>
+
+			<Nav.section>
+				{this.renderSaveButton()}
+
+				<Nav.item
+					newTab={true}
+					href='https://github.com/stolksdorf/naturalcrit/issues'
+					color='red'
+					icon='fa-bug'>
+					report issue
+				</Nav.item>
+
+			</Nav.section>
+		</Navbar>
+	},
+
+	render : function(){
+		return <div className='newPage page'>
+			{this.renderNavbar()}
+
+
+			<div className='content'>
+				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
+					<Editor value={this.state.text} onChange={this.handleTextChange} ref='editor'/>
+					<BrewRenderer brewText={this.state.text} />
+				</SplitPane>
+			</div>
+		</div>
+	}
+});
+
+module.exports = NewPage;

client/homebrew/pages/newPage/newPage.less

@@ -0,0 +1,10 @@
+.newPage{
+
+	.saveButton{
+		background-color: @orange;
+		&:hover{
+			background-color: @green;
+		}
+	}
+
+}