Edit page finally converted over

client/homebrew/navbar/continousSave.navitem.jsx

@@ -1,51 +1,76 @@
-var React = require('react');
-var _ = require('lodash');
-var cx = require('classnames');
+const flux = require('pico-flux')
+const React = require('react');
+const _ = require('lodash');
+const cx = require('classnames');
 
-//var striptags = require('striptags');
+const Nav = require('naturalcrit/nav/nav.jsx');
 
-var Nav = require('naturalcrit/nav/nav.jsx');
+const Store = require('homebrewery/brew.store.js');
+const Actions = require('homebrewery/brew.actions.js');
 
-const MAX_URL_SIZE = 2083;
-const MAIN_URL = "https://www.reddit.com/r/UnearthedArcana/submit?selftext=true"
+const onStoreChange = () => {
+	return {
+		status : Store.getStatus(),
+		errors : Store.getErrors()
+	}
+};
 
-
-var RedditShare = React.createClass({
+const ContinousSave = React.createClass({
 	getDefaultProps: function() {
 		return {
-			brew : {
-				title : '',
-				sharedId : '',
-				text : ''
-			}
+			status : 'ready',
+			errors : undefined
 		};
 	},
-
-	getText : function(){
-
+	componentDidMount: function() {
+		flux.actionEmitter.on('dispatch', this.brewUpdate);
+		window.onbeforeunload = ()=>{
+			if(this.props.status !== 'ready') return 'You have unsaved changes!';
+		};
+	},
+	componentWillUnmount: function() {
+		flux.actionEmitter.removeListenr('dispatch', this.brewUpdate);
+		window.onbeforeunload = function(){};
+	},
+	brewUpdate : function(actionType){
+		if(actionType == 'UPDATE_BREW_TEXT' || actionType == 'UPDATE_META'){
+			Actions.pendingSave();
+		}
 	},
-
-
 	handleClick : function(){
-		var url = [
-			MAIN_URL,
-			'title=' + encodeURIComponent(this.props.brew.title ? this.props.brew.title : 'Check out my brew!'),
-
-			'text=' + encodeURIComponent(this.props.brew.text)
-
-
-		].join('&');
-
-		window.open(url, '_blank');
+		Actions.save();
 	},
+	renderError : function(){
+		let errMsg = '';
+		try{
+			errMsg += this.state.errors.toString() + '\n\n';
+			errMsg += '```\n' + JSON.stringify(this.state.errors.response.error, null, '  ') + '\n```';
+		}catch(e){}
 
-
-	render : function(){
-		return <Nav.item icon='fa-reddit-alien' color='red' onClick={this.handleClick}>
-			share on reddit
+		return <Nav.item className='continousSave error' icon="fa-warning">
+			Oops!
+			<div className='errorContainer'>
+				Looks like there was a problem saving. <br />
+				Report the issue <a target='_blank' href={'https://github.com/stolksdorf/naturalcrit/issues/new?body='+ encodeURIComponent(errMsg)}>
+					here
+				</a>.
+			</div>
 		</Nav.item>
 	},
+	render : function(){
+		if(this.props.status == 'error') return this.renderError();
+
+		if(this.props.status == 'saving'){
+			return <Nav.item className='continousSave' icon="fa-spinner fa-spin">saving...</Nav.item>
+		}
+		if(this.props.status == 'pending'){
+			return <Nav.item className='continousSave' onClick={this.handleClick} color='blue' icon='fa-save'>Save Now</Nav.item>
+		}
+		if(this.props.status == 'ready'){
+			return <Nav.item className='continousSave saved'>saved.</Nav.item>
+		}
+	},
 
 });
 
-module.exports = RedditShare;
+module.exports = Store.createSmartComponent(ContinousSave, onStoreChange);

client/homebrew/navbar/navbar.less

@@ -13,32 +13,6 @@
 			color : @blue;
 		}
 	}
-	.editTitle.navItem{
-		padding : 2px 12px;
-		input{
-			width            : 250px;
-			margin           : 0;
-			padding          : 2px;
-			background-color : #444;
-			font-family      : 'Open Sans', sans-serif;
-			font-size        : 12px;
-			font-weight      : 800;
-			color            : white;
-			text-align       : center;
-			border           : 1px solid @blue;
-			outline          : none;
-		}
-		.charCount{
-			display        : inline-block;
-			vertical-align : bottom;
-			margin-left    : 8px;
-			color          : #666;
-			text-align     : right;
-			&.max{
-				color : @red;
-			}
-		}
-	}
 	.brewTitle.navItem{
 		font-size      : 12px;
 		font-weight    : 800;
@@ -132,4 +106,29 @@
 			background-color: @green;
 		}
 	}
+
+	.continousSave.navItem{
+		width      : 105px;
+		text-align : center;
+		&.saved{
+			cursor : initial;
+			color  : #666;
+		}
+		&.error{
+			position         : relative;
+			background-color : @red;
+			.errorContainer{
+				position         : absolute;
+				top              : 29px;
+				left             : -20px;
+				z-index          : 1000;
+				width            : 120px;
+				padding          : 8px;
+				background-color : #333;
+				a{
+					color : @teal;
+				}
+			}
+		}
+	}
 }