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

client/homebrew/pages/homePage/homePage.jsx

@@ -4,7 +4,6 @@ var cx = require('classnames');
 
 var Nav = require('naturalcrit/nav/nav.jsx');
 var Navbar = require('../../navbar/navbar.jsx');
-var RedditShare = require('../../navbar/redditShare.navitem.jsx');
 
 
 
@@ -14,64 +13,35 @@ var BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
 
 
-
-
-
 var HomePage = React.createClass({
-
 	getDefaultProps: function() {
 		return {
 			welcomeText : ""
 		};
 	},
-
 	getInitialState: function() {
 		return {
 			text: this.props.welcomeText
 		};
 	},
-
-
 	handleSplitMove : function(){
 		this.refs.editor.update();
 	},
-
 	handleTextChange : function(text){
 		this.setState({
 			text : text
 		});
-
-		//localStorage.setItem(KEY, text);
 	},
-
 	renderNavbar : function(){
 		return <Navbar>
 			<Nav.section>
-				<Nav.item>Bad Ass Brew</Nav.item>
-			</Nav.section>
-
-			<Nav.section>
-				<RedditShare brew={{text : this.state.text}}/>
-
-
-				<Nav.item
-					newTab={true}
-					href='https://github.com/stolksdorf/naturalcrit/issues'
-					color='red'
-					icon='fa-bug'>
+				<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/changelog'
-					color='purple'
-					icon='fa-file-text-o'>
+				<Nav.item newTab={true} href='/homebrew/changelog' color='purple' icon='fa-file-text-o'>
 					Changelog
 				</Nav.item>
-				<Nav.item
-					href='/homebrew/new'
-					color='green'
-					icon='fa-external-link'>
+				<Nav.item href='/homebrew/new' color='green' icon='fa-external-link'>
 					New Brew
 				</Nav.item>
 			</Nav.section>
@@ -85,45 +55,15 @@ var HomePage = React.createClass({
 			<div className='content'>
 				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
 					<Editor value={this.state.text} onChange={this.handleTextChange} ref='editor'/>
-					<BrewRenderer brewText={this.state.text} />
+					<BrewRenderer text={this.state.text} />
 				</SplitPane>
-
-
 			</div>
 
-			{/*
 			<a href='/homebrew/new' className='floatingNewButton'>
 				Create your own <i className='fa fa-magic' />
 			</a>
-			*/}
 		</div>
 	}
 });
 
 module.exports = HomePage;
-
-/*
-<SplitPane>
-
-
-	<PageContainer text={this.state.text} />
-	<Editor text={this.state.text} onChange={this.handleTextChange} />
-</SplitPane>
-
-*/
-
-
-
-/* Test code
-<div className='content'>
-	<SplitPane>
-		<div className='woo'>
-			one
-		</div>
-		<div className='temp'>
-			yo
-			<div className='tooBig' />
-		</div>
-	</SplitPane>
-</div>
-*/

client/homebrew/pages/newPage/newPage.jsx

@@ -32,8 +32,9 @@ var NewPage = React.createClass({
 				text : storage
 			})
 		}
-		window.onbeforeunload = function(e){
-			//return "Your homebrew isn't saved. Are you sure you want to leave?";
+		window.onbeforeunload = (e)=>{
+			if(this.state.text == '') return;
+			return "Your homebrew isn't saved. Are you sure you want to leave?";
 		};
 	},
 
@@ -104,15 +105,9 @@ var NewPage = React.createClass({
 
 			<Nav.section>
 				{this.renderSaveButton()}
-
-				<Nav.item
-					newTab={true}
-					href='https://github.com/stolksdorf/naturalcrit/issues'
-					color='red'
-					icon='fa-bug'>
+				<Nav.item newTab={true} href='https://github.com/stolksdorf/naturalcrit/issues' color='red' icon='fa-bug'>
 					report issue
 				</Nav.item>
-
 			</Nav.section>
 		</Navbar>
 	},
@@ -125,7 +120,7 @@ var NewPage = React.createClass({
 			<div className='content'>
 				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
 					<Editor value={this.state.text} onChange={this.handleTextChange} ref='editor'/>
-					<BrewRenderer brewText={this.state.text} />
+					<BrewRenderer text={this.state.text} />
 				</SplitPane>
 			</div>
 		</div>

client/homebrew/pages/sharePage/sharePage.jsx

@@ -2,18 +2,22 @@ var React = require('react');
 var _ = require('lodash');
 var cx = require('classnames');
 
-var Statusbar = require('../../statusbar/statusbar.jsx');
+var Nav = require('naturalcrit/nav/nav.jsx');
+var Navbar = require('../../navbar/navbar.jsx');
 
-var PageContainer = require('../../pageContainer/pageContainer.jsx');
+var BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
+
+var replaceAll = function(str, find, replace) {
+	return str.replace(new RegExp(find, 'g'), replace);
+}
 
 var SharePage = React.createClass({
 	getDefaultProps: function() {
 		return {
-			id : null,
-			entry : {
-				text : "",
+			brew : {
+				title : '',
+				text : '',
 				shareId : null,
-				editId : null,
 				createdAt : null,
 				updatedAt : null,
 				views : 0
@@ -21,20 +25,38 @@ var SharePage = React.createClass({
 		};
 	},
 
-	render : function(){
-		return(
-			<div className='sharePage'>
-				<Statusbar
-					sourceText={this.props.entry.text}
-					lastUpdated={this.props.entry.updatedAt}
-					views={this.props.entry.views}
-					printId={this.props.entry.shareId}
-					shareId={this.props.entry.shareId}
-				/>
+	openSourceWindow : function(){
+		var sourceWindow = window.open();
+		var content = replaceAll(this.props.brew.text, '<', '&lt;');
+		content = replaceAll(content, '>', '&gt;');
+		sourceWindow.document.write('<code><pre>' + content + '</pre></code>');
+	},
 
-				<PageContainer text={this.props.entry.text} />
+
+	render : function(){
+
+		console.log('brew', this.props.brew);
+
+		return <div className='sharePage page'>
+			<Navbar>
+				<Nav.section>
+					<Nav.item className='brewTitle'>{this.props.brew.title}</Nav.item>
+				</Nav.section>
+
+				<Nav.section>
+					<Nav.item newTab={true} href={'/homebrew/print/' + this.props.brew.sharedId} color='orange' icon='fa-print'>
+						print
+					</Nav.item>
+					<Nav.item onClick={this.openSourceWindow} color='teal' icon='fa-code'>
+						source
+					</Nav.item>
+				</Nav.section>
+			</Navbar>
+
+			<div className='content'>
+				<BrewRenderer text={this.props.brew.text} />
 			</div>
-		);
+		</div>
 	}
 });