Added in metadata editor

client/homebrew/pages/editPage/editPage.jsx

@@ -1,47 +1,52 @@
-var React = require('react');
-var _ = require('lodash');
-var cx = require('classnames');
-var request = require("superagent");
+const React = require('react');
+const _ = require('lodash');
+const cx = require('classnames');
+const request = require("superagent");
 
-var Nav = require('naturalcrit/nav/nav.jsx');
-var Navbar = require('../../navbar/navbar.jsx');
+const Nav = require('naturalcrit/nav/nav.jsx');
+const Navbar = require('../../navbar/navbar.jsx');
 
-var EditTitle = require('../../navbar/editTitle.navitem.jsx');
-var ReportIssue = require('../../navbar/issue.navitem.jsx');
-var PrintLink = require('../../navbar/print.navitem.jsx');
-var RecentlyEdited = require('../../navbar/recent.navitem.jsx').edited;
+const ReportIssue = require('../../navbar/issue.navitem.jsx');
+const PrintLink = require('../../navbar/print.navitem.jsx');
+const RecentlyEdited = require('../../navbar/recent.navitem.jsx').edited;
 
 
-var SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
-var Editor = require('../../editor/editor.jsx');
-var BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
+const SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
+const Editor = require('../../editor/editor.jsx');
+const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
-var Markdown = require('naturalcrit/markdown.js');
+const Markdown = require('naturalcrit/markdown.js');
 
 
 const SAVE_TIMEOUT = 3000;
 
 
 
-var EditPage = React.createClass({
+const EditPage = React.createClass({
 	getDefaultProps: function() {
 		return {
-			id : null,
 			brew : {
-				title : '',
 				text : '',
 				shareId : null,
 				editId : null,
 				createdAt : null,
 				updatedAt : null,
+
+				title : '',
+				description : '',
+				tags : '',
+				published : false,
+				authors : [],
+				systems : []
 			}
 		};
 	},
 
 	getInitialState: function() {
 		return {
-			title : this.props.brew.title,
-			text: this.props.brew.text,
+			brew : this.props.brew,
+
+
 			isSaving : false,
 			isPending : false,
 			errors : null,
@@ -60,7 +65,7 @@ var EditPage = React.createClass({
 		};
 
 		this.setState({
-			htmlErrors : Markdown.validate(this.state.text)
+			htmlErrors : Markdown.validate(this.state.brew.text)
 		})
 
 		document.addEventListener('keydown', this.handleControlKeys);
@@ -85,13 +90,15 @@ var EditPage = React.createClass({
 		this.refs.editor.update();
 	},
 
-	handleTitleChange : function(title){
+	handleMetadataChange : function(metadata){
 		this.setState({
-			title : title,
-			isPending : true
+			brew : _.merge({}, this.state.brew, metadata),
+			isPending : true,
+		}, ()=>{
+			console.log(this.hasChanges());
+			(this.hasChanges() ? this.debounceSave() : this.debounceSave.cancel());
 		});
 
-		(this.hasChanges() ? this.debounceSave() : this.debounceSave.cancel());
 	},
 
 	handleTextChange : function(text){
@@ -101,7 +108,7 @@ var EditPage = React.createClass({
 		if(htmlErrors.length) htmlErrors = Markdown.validate(text);
 
 		this.setState({
-			text : text,
+			brew : _.merge({}, this.state.brew, {text : text}),
 			isPending : true,
 			htmlErrors : htmlErrors
 		});
@@ -122,11 +129,9 @@ var EditPage = React.createClass({
 
 	hasChanges : function(){
 		if(this.savedBrew){
-			if(this.state.text !== this.savedBrew.text) return true;
-			if(this.state.title !== this.savedBrew.title) return true;
+			return !_.isEqual(this.state.brew, this.savedBrew)
 		}else{
-			if(this.state.text !== this.props.brew.text) return true;
-			if(this.state.title !== this.props.brew.title) return true;
+			return !_.isEqual(this.state.brew, this.props.brew)
 		}
 		return false;
 	},
@@ -136,15 +141,12 @@ var EditPage = React.createClass({
 		this.setState({
 			isSaving : true,
 			errors : null,
-			htmlErrors : Markdown.validate(this.state.text)
+			htmlErrors : Markdown.validate(this.state.brew.text)
 		});
 
 		request
 			.put('/api/update/' + this.props.brew.editId)
-			.send({
-				text : this.state.text,
-				title : this.state.title
-			})
+			.send(this.state.brew)
 			.end((err, res) => {
 				if(err){
 					this.setState({
@@ -184,17 +186,17 @@ var EditPage = React.createClass({
 		if(this.state.isSaving){
 			return <Nav.item className='save' icon="fa-spinner fa-spin">saving...</Nav.item>
 		}
-		if(!this.state.isPending && !this.state.isSaving){
-			return <Nav.item className='save saved'>saved.</Nav.item>
-		}
 		if(this.state.isPending && this.hasChanges()){
 			return <Nav.item className='save' onClick={this.save} color='blue' icon='fa-save'>Save Now</Nav.item>
 		}
+		if(!this.state.isPending && !this.state.isSaving){
+			return <Nav.item className='save saved'>saved.</Nav.item>
+		}
 	},
 	renderNavbar : function(){
 		return <Navbar>
 			<Nav.section>
-				<EditTitle title={this.state.title} onChange={this.handleTitleChange} />
+				<Nav.item className='brewTitle'>{this.state.brew.title}</Nav.item>
 			</Nav.section>
 			<Nav.section>
 				{this.renderSaveButton()}
@@ -216,8 +218,14 @@ var EditPage = React.createClass({
 
 			<div className='content'>
 				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
-					<Editor value={this.state.text} onChange={this.handleTextChange} ref='editor'/>
-					<BrewRenderer text={this.state.text} errors={this.state.htmlErrors} />
+					<Editor
+						ref='editor'
+						value={this.state.brew.text}
+						onChange={this.handleTextChange}
+						metadata={this.state.brew}
+						onMetadataChange={this.handleMetadataChange}
+					/>
+					<BrewRenderer text={this.state.brew.text} errors={this.state.htmlErrors} />
 				</SplitPane>
 			</div>
 		</div>