Adding new navitems and finishing the edit and share page

client/homebrew/pages/editPage/editPage.jsx

@@ -1,16 +1,32 @@
 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 EditTitle = require('../../navbar/editTitle.navitem.jsx');
+
+
+var SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
+var Editor = require('../../editor/editor.jsx');
+var BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
+
+
+
+
+
 
 var Statusbar = require('../../statusbar/statusbar.jsx');
 var PageContainer = require('../../pageContainer/pageContainer.jsx');
 var Editor = require('../../editor/editor.jsx');
 
-var FullClassGen = require('../../editor/snippets/fullclass.gen.js');
 
-var request = require("superagent");
 
-var SAVE_TIMEOUT = 3000;
+
+const SAVE_TIMEOUT = 3000;
 
 
 
@@ -18,8 +34,9 @@ var EditPage = React.createClass({
 	getDefaultProps: function() {
 		return {
 			id : null,
-			entry : {
-				text : "",
+			brew : {
+				title : '',
+				text : '',
 				shareId : null,
 				editId : null,
 				createdAt : null,
@@ -30,9 +47,13 @@ var EditPage = React.createClass({
 
 	getInitialState: function() {
 		return {
-			text: this.props.entry.text,
+			title : this.props.brew.title,
+			text: this.props.brew.text,
+			isSaving : false,
+			errors : null,
 			pending : false,
-			lastUpdated : this.props.entry.updatedAt
+
+			lastUpdated : this.props.brew.updatedAt
 		};
 	},
 
@@ -43,6 +64,21 @@ var EditPage = React.createClass({
 			return "You have unsaved changes!";
 		}
 	},
+	componentWillUnmount: function() {
+		window.onbeforeunload = function(){};
+	},
+
+	handleSplitMove : function(){
+		this.refs.editor.update();
+	},
+
+	handleTitleChange : function(title){
+		this.setState({
+			title : title,
+			pending : true
+		});
+		this.save();
+	},
 
 	handleTextChange : function(text){
 		this.setState({
@@ -52,9 +88,20 @@ var EditPage = React.createClass({
 		this.save();
 	},
 
+	handleDelete : function(){
+		if(!confirm("are you sure you want to delete this brew?")) return;
+		if(!confirm("are you REALLY sure? You will not be able to recover it")) return;
+
+		request.get('/homebrew/api/remove/' + this.props.brew.editId)
+			.send()
+			.end(function(err, res){
+				window.location.href = '/homebrew';
+			});
+	},
+
 	save : _.debounce(function(){
 		request
-			.put('/homebrew/update/' + this.props.id)
+			.put('/homebrew/api/update/' + this.props.id)
 			.send({text : this.state.text})
 			.end((err, res) => {
 				this.setState({
@@ -64,25 +111,44 @@ var EditPage = React.createClass({
 			})
 	}, SAVE_TIMEOUT),
 
+
+
+	renderNavbar : function(){
+		return <Navbar>
+			<Nav.section>
+				<EditTitle title={this.state.title} onChange={this.handleTitleChange} />
+			</Nav.section>
+
+			<Nav.section>
+				<Nav.item newTab={true} href='https://github.com/stolksdorf/naturalcrit/issues' color='red' icon='fa-bug'>
+					report issue
+				</Nav.item>
+
+				<Nav.item newTab={true} href={'/homebrew/share/' + this.props.brew.shareId} color='teal' icon='fa-share'>
+					Share
+				</Nav.item>
+
+				<Nav.item newTab={true} href={'/homebrew/print/' + this.props.brew.sharedId} color='orange' icon='fa-print'>
+					print
+				</Nav.item>
+
+				<Nav.item color='lightred' icon='fa-trash' onClick={this.handleDelete}>
+					Delete
+				</Nav.item>
+
+			</Nav.section>
+		</Navbar>
+	},
+
 	render : function(){
-		return <div className='editPage'>
+		return <div className='editPage page'>
+			{this.renderNavbar()}
 
-
-
-			<Statusbar
-				editId={this.props.entry.editId}
-				shareId={this.props.entry.shareId}
-				printId={this.props.entry.shareId}
-				lastUpdated={this.state.lastUpdated}
-				isPending={this.state.pending} />
-
-			<div className='paneSplit'>
-				<div className='leftPane'>
-					<Editor text={this.state.text} onChange={this.handleTextChange} />
-				</div>
-				<div className='rightPane'>
-					<PageContainer text={this.state.text} />
-				</div>
+			<div className='content'>
+				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
+					<Editor value={this.state.text} onChange={this.handleTextChange} ref='editor'/>
+					<BrewRenderer text={this.state.text} />
+				</SplitPane>
 			</div>
 		</div>
 	}