f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-13 21:42:45 +00:00
Code Wiki Activity

Edit page finally converted over

Browse Source
This commit is contained in:
Scott Tolksdorf
2016-12-27 17:24:27 -05:00
parent f4cf288f27
commit f75f60aa1e
6 changed files with 126 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
client/homebrew/navbar/continousSave.navitem.jsx
View File

@@ -1,51 +1,76 @@
var React = require('react'); const flux = require('pico-flux')
var _ = require('lodash'); const React = require('react');
var cx = require('classnames'); 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 onStoreChange = () => {
const MAIN_URL = "https://www.reddit.com/r/UnearthedArcana/submit?selftext=true" return {
status : Store.getStatus(),
errors : Store.getErrors()
}
};
const ContinousSave = React.createClass({
var RedditShare = React.createClass({
getDefaultProps: function() { getDefaultProps: function() {
return { return {
brew : { status : 'ready',
title : '', errors : undefined
sharedId : '',
text : ''
}
}; };
}, },
componentDidMount: function() {
getText : 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(){ handleClick : function(){
var url = [ Actions.save();
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');
}, },
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){}
return <Nav.item className='continousSave error' icon="fa-warning">
render : function(){ Oops!
return <Nav.item icon='fa-reddit-alien' color='red' onClick={this.handleClick}> <div className='errorContainer'>
share on reddit 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> </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);

51
client/homebrew/navbar/navbar.less
View File

@@ -13,32 +13,6 @@
color : @blue; 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{ .brewTitle.navItem{
font-size : 12px; font-size : 12px;
font-weight : 800; font-weight : 800;
@@ -132,4 +106,29 @@
background-color: @green; 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;
}
}
}
}
} }

206
client/homebrew/pages/editPage/editPage.jsx
View File

@@ -1,8 +1,6 @@
const React = require('react'); const React = require('react');
const _ = require('lodash'); const _ = require('lodash');
const cx = require('classnames'); const cx = require('classnames');
const request = require("superagent");
const Nav = require('naturalcrit/nav/nav.jsx'); const Nav = require('naturalcrit/nav/nav.jsx');
const Navbar = require('../../navbar/navbar.jsx'); const Navbar = require('../../navbar/navbar.jsx');
@@ -11,192 +9,48 @@ const ReportIssue = require('../../navbar/issue.navitem.jsx');
const PrintLink = require('../../navbar/print.navitem.jsx'); const PrintLink = require('../../navbar/print.navitem.jsx');
const Account = require('../../navbar/account.navitem.jsx'); const Account = require('../../navbar/account.navitem.jsx');
const Save = require('../../navbar/continousSave.navitem.jsx'); const Save = require('../../navbar/continousSave.navitem.jsx');
//const RecentlyEdited = require('../../navbar/recent.navitem.jsx').edited;
const Markdown = require('homebrewery/markdown.js');
const SAVE_TIMEOUT = 3000;
const BrewInterface = require('homebrewery/brewInterface/brewInterface.jsx'); const BrewInterface = require('homebrewery/brewInterface/brewInterface.jsx');
const Utils = require('homebrewery/utils.js'); const Utils = require('homebrewery/utils.js');
const Store = require('homebrewery/brew.store.js'); const Store = require('homebrewery/brew.store.js');
const Actions = require('homebrewery/brew.actions.js'); const Actions = require('homebrewery/brew.actions.js');
const EditPage = React.createClass({ const EditPage = React.createClass({
componentDidMount: function(){
document.addEventListener('keydown', this.handleControlKeys);
},
componentWillUnmount: function() {
document.removeEventListener('keydown', this.handleControlKeys);
},
handleControlKeys : Utils.controlKeys({
s : Actions.save,
p : Actions.print
}),
render : function(){
return <div className='editPage page'>
<SmartNav />
<div className='content'>
<BrewInterface />
</div>
</div>
}
});
const SmartNav = Store.createSmartComponent(React.createClass({
getDefaultProps: function() { getDefaultProps: function() {
return { return {
brew : {} brew : {}
}; };
}, },
render : function(){
getInitialState: function() {
return {
brew : this.props.brew,
isSaving : false,
isPending : false,
errors : null,
htmlErrors : Markdown.validate(this.props.brew.text),
lastUpdated : this.props.brew.updatedAt
};
},
savedBrew : null,
componentDidMount: function(){
//this.trySave();
window.onbeforeunload = ()=>{
if(Store.getStatus() !== 'ready') return 'You have unsaved changes!';
};
document.addEventListener('keydown', this.handleControlKeys);
},
componentWillUnmount: function() {
window.onbeforeunload = function(){};
document.removeEventListener('keydown', this.handleControlKeys);
},
handleControlKeys : Utils.controlKeys({
s : Actions.pendingSave,
p : ()=>{
window.open(`/print/${this.props.brew.shareId}?dialog=true`, '_blank').focus();
}
}),
/*
handleControlKeys : function(e){
if(!(e.ctrlKey || e.metaKey)) return;
const S_KEY = 83;
const P_KEY = 80;
if(e.keyCode == S_KEY) this.save();
if(e.keyCode == P_KEY)
if(e.keyCode == P_KEY || e.keyCode == S_KEY){
e.stopPropagation();
e.preventDefault();
}
},
handleSplitMove : function(){
this.refs.editor.update();
},
handleMetadataChange : function(metadata){
this.setState({
brew : _.merge({}, this.state.brew, metadata),
isPending : true,
}, ()=>{
this.trySave();
});
},
handleTextChange : function(text){
//If there are errors, run the validator on everychange to give quick feedback
var htmlErrors = this.state.htmlErrors;
if(htmlErrors.length) htmlErrors = Markdown.validate(text);
this.setState({
brew : _.merge({}, this.state.brew, {text : text}),
isPending : true,
htmlErrors : htmlErrors
});
this.trySave();
},
*/
hasChanges : function(){
if(this.savedBrew){
return !_.isEqual(this.state.brew, this.savedBrew)
}else{
return !_.isEqual(this.state.brew, this.props.brew)
}
return false;
},
trySave : function(){
if(!this.debounceSave) this.debounceSave = _.debounce(this.save, SAVE_TIMEOUT);
if(this.hasChanges()){
this.debounceSave();
}else{
this.debounceSave.cancel();
}
},
save : function(){
if(this.debounceSave && this.debounceSave.cancel) this.debounceSave.cancel();
this.setState({
isSaving : true,
errors : null,
htmlErrors : Markdown.validate(this.state.brew.text)
});
request
.put('/api/update/' + this.props.brew.editId)
.send(this.state.brew)
.end((err, res) => {
if(err){
this.setState({
errors : err,
})
}else{
this.savedBrew = res.body;
this.setState({
isPending : false,
isSaving : false,
lastUpdated : res.body.updatedAt
})
}
})
},
renderSaveButton : function(){
if(this.state.errors){
var errMsg = '';
try{
errMsg += this.state.errors.toString() + '\n\n';
errMsg += '```\n' + JSON.stringify(this.state.errors.response.error, null, ' ') + '\n```';
}catch(e){}
return <Nav.item className='save 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>
}
if(this.state.isSaving){
return <Nav.item className='save' icon="fa-spinner fa-spin">saving...</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> return <Navbar>
<Nav.section> <Nav.section>
<Nav.item className='brewTitle'>{this.state.brew.title}</Nav.item> <Nav.item className='brewTitle'>{this.props.brew.title}</Nav.item>
</Nav.section> </Nav.section>
<Nav.section> <Nav.section>
{this.renderSaveButton()} <Save />
{/*<RecentlyEdited brew={this.props.brew} />*/}
<ReportIssue /> <ReportIssue />
<Nav.item newTab={true} href={'/share/' + this.props.brew.shareId} color='teal' icon='fa-share-alt'> <Nav.item newTab={true} href={'/share/' + this.props.brew.shareId} color='teal' icon='fa-share-alt'>
Share Share
@@ -205,17 +59,9 @@ const EditPage = React.createClass({
<Account /> <Account />
</Nav.section> </Nav.section>
</Navbar> </Navbar>
},
render : function(){
return <div className='editPage page'>
{this.renderNavbar()}
<div className='content'>
<BrewInterface />
</div>
</div>
} }
}), ()=>{
return {brew : Store.getBrew()}
}); });
module.exports = EditPage; module.exports = EditPage;

25
client/homebrew/pages/editPage/editPage.less
View File

@@ -1,27 +1,4 @@
.editPage{ .editPage{
.navItem.save{
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;
}
}
}
}
} }

16
shared/homebrewery/brew.actions.js
View File

@@ -3,6 +3,9 @@ const dispatch = require('pico-flux').dispatch;
const request = require('superagent'); const request = require('superagent');
const Store = require('./brew.store.js'); const Store = require('./brew.store.js');
let pendingTimer;
const PENDING_TIMEOUT = 3000;
const Actions = { const Actions = {
init : (initState) => { init : (initState) => {
Store.init(initState); Store.init(initState);
@@ -17,9 +20,13 @@ const Actions = {
dispatch('UPDATE_META', meta); dispatch('UPDATE_META', meta);
}, },
pendingSave : () => {
clearTimeout(pendingTimer);
pendingTimer = setTimeout(Actions.save, PENDING_TIMEOUT);
dispatch('SET_STATUS', 'pending');
},
save : () => { save : () => {
clearTimeout(pendingTimer);
const brew = Store.getBrew(); const brew = Store.getBrew();
dispatch('SET_STATUS', 'saving'); dispatch('SET_STATUS', 'saving');
request request
@@ -27,8 +34,8 @@ const Actions = {
.send(brew) .send(brew)
.end((err, res) => { .end((err, res) => {
if(err) return dispatch('SET_STATUS', 'error', err); if(err) return dispatch('SET_STATUS', 'error', err);
dispatch('SET_STATUS', 'ready');
dispatch('SET_BREW', res.body); dispatch('SET_BREW', res.body);
dispatch('SET_STATUS', 'ready');
}); });
}, },
@@ -45,6 +52,9 @@ const Actions = {
localPrint : ()=>{ localPrint : ()=>{
localStorage.setItem('print', Store.getBrewText()); localStorage.setItem('print', Store.getBrewText());
window.open('/print?dialog=true&local=print','_blank'); window.open('/print?dialog=true&local=print','_blank');
},
print : ()=>{
window.open(`/print/${Store.getBrew().shareId}?dialog=true`, '_blank').focus();
} }
}; };

4
shared/homebrewery/brew.store.js
View File

@@ -37,8 +37,9 @@ const Store = flux.createStore({
State.brew = _.merge({}, State.brew, meta); State.brew = _.merge({}, State.brew, meta);
}, },
SET_STATUS : (status, error) => { SET_STATUS : (status, error) => {
State.status = status; if(status == State.status) return false;
if(error) State.errors = error; if(error) State.errors = error;
State.status = status;
} }
}); });
@@ -65,5 +66,4 @@ Store.getStatus = ()=>{
return State.status; return State.status;
}; };
module.exports = Store; module.exports = Store;