mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-01-24 12:03:00 +00:00
Compare commits
2 Commits
relocateDi
...
editBasePa
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
90ceb52ffc | ||
|
|
6f9caf0590 |
37
client/homebrew/pages/basePages/editPage/editPage.jsx
Normal file
37
client/homebrew/pages/basePages/editPage/editPage.jsx
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
require('./editPage.less');
|
||||||
|
const React = require('react');
|
||||||
|
|
||||||
|
const Nav = require('naturalcrit/nav/nav.jsx');
|
||||||
|
const Navbar = require('../../../navbar/navbar.jsx');
|
||||||
|
const NewBrewItem = require('../../../navbar/newbrew.navitem.jsx');
|
||||||
|
const HelpNavItem = require('../../../navbar/help.navitem.jsx');
|
||||||
|
const PrintNavItem = require('../../../navbar/print.navitem.jsx');
|
||||||
|
const ErrorNavItem = require('../../../navbar/error-navitem.jsx');
|
||||||
|
const AccountNavItem = require('../../../navbar/account.navitem.jsx');
|
||||||
|
const RecentNavItem = require('../../../navbar/recent.navitem.jsx').both;
|
||||||
|
const VaultNavItem = require('../../../navbar/vault.navitem.jsx');
|
||||||
|
|
||||||
|
const BaseEditPage = (props)=>{
|
||||||
|
return (
|
||||||
|
<div className={`sitePage ${props.className || ''}`}>
|
||||||
|
<Navbar>
|
||||||
|
<Nav.section>
|
||||||
|
<Nav.item className='brewTitle'>{props.brew.title}</Nav.item>
|
||||||
|
</Nav.section>
|
||||||
|
<Nav.section>
|
||||||
|
{props.navButtons}
|
||||||
|
<PrintNavItem />
|
||||||
|
<NewBrewItem />
|
||||||
|
<HelpNavItem />
|
||||||
|
<VaultNavItem />
|
||||||
|
<RecentNavItem brew={props.brew} storageKey={props.recentStorageKey} />
|
||||||
|
<AccountNavItem />
|
||||||
|
</Nav.section>
|
||||||
|
</Navbar>
|
||||||
|
|
||||||
|
{props.children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = BaseEditPage;
|
||||||
@@ -11,16 +11,10 @@ import request from '../../utils/request-middleware.js';
|
|||||||
const { Meta } = require('vitreum/headtags');
|
const { Meta } = require('vitreum/headtags');
|
||||||
|
|
||||||
const Nav = require('naturalcrit/nav/nav.jsx');
|
const Nav = require('naturalcrit/nav/nav.jsx');
|
||||||
const Navbar = require('../../navbar/navbar.jsx');
|
|
||||||
|
|
||||||
const NewBrew = require('../../navbar/newbrew.navitem.jsx');
|
|
||||||
const HelpNavItem = require('../../navbar/help.navitem.jsx');
|
|
||||||
const PrintNavItem = require('../../navbar/print.navitem.jsx');
|
|
||||||
const ErrorNavItem = require('../../navbar/error-navitem.jsx');
|
const ErrorNavItem = require('../../navbar/error-navitem.jsx');
|
||||||
const Account = require('../../navbar/account.navitem.jsx');
|
|
||||||
const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
|
|
||||||
const VaultNavItem = require('../../navbar/vault.navitem.jsx');
|
|
||||||
|
|
||||||
|
const BaseEditPage = require('../basePages/editPage/editPage.jsx');
|
||||||
const SplitPane = require('client/components/splitPane/splitPane.jsx');
|
const SplitPane = require('client/components/splitPane/splitPane.jsx');
|
||||||
const Editor = require('../../editor/editor.jsx');
|
const Editor = require('../../editor/editor.jsx');
|
||||||
const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
|
const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
|
||||||
@@ -441,11 +435,7 @@ const EditPage = createClass({
|
|||||||
renderNavbar : function(){
|
renderNavbar : function(){
|
||||||
const shareLink = this.processShareId();
|
const shareLink = this.processShareId();
|
||||||
|
|
||||||
return <Navbar>
|
return <>
|
||||||
<Nav.section>
|
|
||||||
<Nav.item className='brewTitle'>{this.state.brew.title}</Nav.item>
|
|
||||||
</Nav.section>
|
|
||||||
|
|
||||||
<Nav.section>
|
<Nav.section>
|
||||||
{this.renderGoogleDriveIcon()}
|
{this.renderGoogleDriveIcon()}
|
||||||
{this.state.error ?
|
{this.state.error ?
|
||||||
@@ -455,8 +445,6 @@ const EditPage = createClass({
|
|||||||
{this.renderAutoSaveButton()}
|
{this.renderAutoSaveButton()}
|
||||||
</Nav.dropdown>
|
</Nav.dropdown>
|
||||||
}
|
}
|
||||||
<NewBrew />
|
|
||||||
<HelpNavItem/>
|
|
||||||
<Nav.dropdown>
|
<Nav.dropdown>
|
||||||
<Nav.item color='teal' icon='fas fa-share-alt'>
|
<Nav.item color='teal' icon='fas fa-share-alt'>
|
||||||
share
|
share
|
||||||
@@ -471,20 +459,19 @@ const EditPage = createClass({
|
|||||||
post to reddit
|
post to reddit
|
||||||
</Nav.item>
|
</Nav.item>
|
||||||
</Nav.dropdown>
|
</Nav.dropdown>
|
||||||
<PrintNavItem />
|
|
||||||
<VaultNavItem />
|
|
||||||
<RecentNavItem brew={this.state.brew} storageKey='edit' />
|
|
||||||
<Account />
|
|
||||||
</Nav.section>
|
</Nav.section>
|
||||||
|
</>;
|
||||||
</Navbar>;
|
|
||||||
},
|
},
|
||||||
|
|
||||||
render : function(){
|
render : function(){
|
||||||
return <div className='editPage sitePage'>
|
return <BaseEditPage
|
||||||
|
className="editPage"
|
||||||
|
errorState={this.state.error}
|
||||||
|
parent={this}
|
||||||
|
brew={this.state.brew}
|
||||||
|
navButtons={this.renderNavbar()}
|
||||||
|
recentStorageKey='edit'>
|
||||||
<Meta name='robots' content='noindex, nofollow' />
|
<Meta name='robots' content='noindex, nofollow' />
|
||||||
{this.renderNavbar()}
|
|
||||||
|
|
||||||
{this.props.brew.lock && <LockNotification shareId={this.props.brew.shareId} message={this.props.brew.lock.editMessage} reviewRequested={this.props.brew.lock.reviewRequested} />}
|
{this.props.brew.lock && <LockNotification shareId={this.props.brew.shareId} message={this.props.brew.lock.editMessage} reviewRequested={this.props.brew.lock.reviewRequested} />}
|
||||||
<div className='content'>
|
<div className='content'>
|
||||||
<SplitPane onDragFinish={this.handleSplitMove}>
|
<SplitPane onDragFinish={this.handleSplitMove}>
|
||||||
@@ -522,7 +509,7 @@ const EditPage = createClass({
|
|||||||
/>
|
/>
|
||||||
</SplitPane>
|
</SplitPane>
|
||||||
</div>
|
</div>
|
||||||
</div>;
|
</BaseEditPage>;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -6,15 +6,10 @@ import request from '../../utils/request-middleware.js';
|
|||||||
const { Meta } = require('vitreum/headtags');
|
const { Meta } = require('vitreum/headtags');
|
||||||
|
|
||||||
const Nav = require('naturalcrit/nav/nav.jsx');
|
const Nav = require('naturalcrit/nav/nav.jsx');
|
||||||
const Navbar = require('../../navbar/navbar.jsx');
|
|
||||||
const NewBrewItem = require('../../navbar/newbrew.navitem.jsx');
|
|
||||||
const HelpNavItem = require('../../navbar/help.navitem.jsx');
|
|
||||||
const VaultNavItem = require('../../navbar/vault.navitem.jsx');
|
|
||||||
const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
|
|
||||||
const AccountNavItem = require('../../navbar/account.navitem.jsx');
|
|
||||||
const ErrorNavItem = require('../../navbar/error-navitem.jsx');
|
const ErrorNavItem = require('../../navbar/error-navitem.jsx');
|
||||||
const { fetchThemeBundle } = require('../../../../shared/helpers.js');
|
const { fetchThemeBundle } = require('../../../../shared/helpers.js');
|
||||||
|
|
||||||
|
const BaseEditPage = require('../basePages/editPage/editPage.jsx');
|
||||||
const SplitPane = require('client/components/splitPane/splitPane.jsx');
|
const SplitPane = require('client/components/splitPane/splitPane.jsx');
|
||||||
const Editor = require('../../editor/editor.jsx');
|
const Editor = require('../../editor/editor.jsx');
|
||||||
const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
|
const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
|
||||||
@@ -25,13 +20,13 @@ const HomePage = createClass({
|
|||||||
displayName : 'HomePage',
|
displayName : 'HomePage',
|
||||||
getDefaultProps : function() {
|
getDefaultProps : function() {
|
||||||
return {
|
return {
|
||||||
brew : DEFAULT_BREW,
|
brew : DEFAULT_BREW
|
||||||
ver : '0.0.0'
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
getInitialState : function() {
|
getInitialState : function() {
|
||||||
return {
|
return {
|
||||||
brew : this.props.brew,
|
brew : this.props.brew,
|
||||||
|
isSaving : false,
|
||||||
welcomeText : this.props.brew.text,
|
welcomeText : this.props.brew.text,
|
||||||
error : undefined,
|
error : undefined,
|
||||||
currentEditorViewPageNum : 1,
|
currentEditorViewPageNum : 1,
|
||||||
@@ -47,7 +42,11 @@ const HomePage = createClass({
|
|||||||
fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme);
|
fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme);
|
||||||
},
|
},
|
||||||
|
|
||||||
handleSave : function(){
|
save : function(){
|
||||||
|
this.setState({
|
||||||
|
isSaving : true
|
||||||
|
});
|
||||||
|
|
||||||
request.post('/api')
|
request.post('/api')
|
||||||
.send(this.state.brew)
|
.send(this.state.brew)
|
||||||
.end((err, res)=>{
|
.end((err, res)=>{
|
||||||
@@ -57,6 +56,9 @@ const HomePage = createClass({
|
|||||||
}
|
}
|
||||||
const brew = res.body;
|
const brew = res.body;
|
||||||
window.location = `/edit/${brew.editId}`;
|
window.location = `/edit/${brew.editId}`;
|
||||||
|
})
|
||||||
|
.catch((err)=>{
|
||||||
|
this.setState({ isSaving: false, error: err });
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
handleSplitMove : function(){
|
handleSplitMove : function(){
|
||||||
@@ -80,26 +82,38 @@ const HomePage = createClass({
|
|||||||
brew : { ...prevState.brew, text: text },
|
brew : { ...prevState.brew, text: text },
|
||||||
}));
|
}));
|
||||||
},
|
},
|
||||||
|
|
||||||
|
renderSaveButton : function(){
|
||||||
|
if(this.state.isSaving){
|
||||||
|
return <Nav.item icon='fas fa-spinner fa-spin' className='save'>
|
||||||
|
save...
|
||||||
|
</Nav.item>;
|
||||||
|
} else {
|
||||||
|
return <Nav.item icon='fas fa-save' className='save' onClick={this.save}>
|
||||||
|
save
|
||||||
|
</Nav.item>;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
renderNavbar : function(){
|
renderNavbar : function(){
|
||||||
return <Navbar ver={this.props.ver}>
|
return <>
|
||||||
<Nav.section>
|
<Nav.section>
|
||||||
{this.state.error ?
|
{this.state.error ?
|
||||||
<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
|
<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
|
||||||
null
|
null
|
||||||
}
|
}
|
||||||
<NewBrewItem />
|
|
||||||
<HelpNavItem />
|
|
||||||
<VaultNavItem />
|
|
||||||
<RecentNavItem />
|
|
||||||
<AccountNavItem />
|
|
||||||
</Nav.section>
|
</Nav.section>
|
||||||
</Navbar>;
|
</>;
|
||||||
},
|
},
|
||||||
|
|
||||||
render : function(){
|
render : function(){
|
||||||
return <div className='homePage sitePage'>
|
return <BaseEditPage
|
||||||
|
className="homePage"
|
||||||
|
errorState={this.state.error}
|
||||||
|
parent={this}
|
||||||
|
brew={this.state.brew}
|
||||||
|
navButtons={this.renderNavbar()}>
|
||||||
<Meta name='google-site-verification' content='NwnAQSSJZzAT7N-p5MY6ydQ7Njm67dtbu73ZSyE5Fy4' />
|
<Meta name='google-site-verification' content='NwnAQSSJZzAT7N-p5MY6ydQ7Njm67dtbu73ZSyE5Fy4' />
|
||||||
{this.renderNavbar()}
|
|
||||||
<div className='content'>
|
<div className='content'>
|
||||||
<SplitPane onDragFinish={this.handleSplitMove}>
|
<SplitPane onDragFinish={this.handleSplitMove}>
|
||||||
<Editor
|
<Editor
|
||||||
@@ -127,14 +141,14 @@ const HomePage = createClass({
|
|||||||
/>
|
/>
|
||||||
</SplitPane>
|
</SplitPane>
|
||||||
</div>
|
</div>
|
||||||
<div className={cx('floatingSaveButton', { show: this.state.welcomeText != this.state.brew.text })} onClick={this.handleSave}>
|
<div className={cx('floatingSaveButton', { show: this.state.welcomeText != this.state.brew.text })} onClick={this.save}>
|
||||||
Save current <i className='fas fa-save' />
|
Save current <i className='fas fa-save' />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a href='/new' className='floatingNewButton'>
|
<a href='/new' className='floatingNewButton'>
|
||||||
Create your own <i className='fas fa-magic' />
|
Create your own <i className='fas fa-magic' />
|
||||||
</a>
|
</a>
|
||||||
</div>;
|
</BaseEditPage>
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -7,13 +7,9 @@ import request from '../../utils/request-middleware.js';
|
|||||||
import Markdown from 'naturalcrit/markdown.js';
|
import Markdown from 'naturalcrit/markdown.js';
|
||||||
|
|
||||||
const Nav = require('naturalcrit/nav/nav.jsx');
|
const Nav = require('naturalcrit/nav/nav.jsx');
|
||||||
const PrintNavItem = require('../../navbar/print.navitem.jsx');
|
|
||||||
const Navbar = require('../../navbar/navbar.jsx');
|
|
||||||
const AccountNavItem = require('../../navbar/account.navitem.jsx');
|
|
||||||
const ErrorNavItem = require('../../navbar/error-navitem.jsx');
|
const ErrorNavItem = require('../../navbar/error-navitem.jsx');
|
||||||
const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
|
|
||||||
const HelpNavItem = require('../../navbar/help.navitem.jsx');
|
|
||||||
|
|
||||||
|
const BaseEditPage = require('../basePages/editPage/editPage.jsx');
|
||||||
const SplitPane = require('client/components/splitPane/splitPane.jsx');
|
const SplitPane = require('client/components/splitPane/splitPane.jsx');
|
||||||
const Editor = require('../../editor/editor.jsx');
|
const Editor = require('../../editor/editor.jsx');
|
||||||
const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
|
const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
|
||||||
@@ -212,28 +208,23 @@ const NewPage = createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
renderNavbar : function(){
|
renderNavbar : function(){
|
||||||
return <Navbar>
|
return <>
|
||||||
|
|
||||||
<Nav.section>
|
|
||||||
<Nav.item className='brewTitle'>{this.state.brew.title}</Nav.item>
|
|
||||||
</Nav.section>
|
|
||||||
|
|
||||||
<Nav.section>
|
<Nav.section>
|
||||||
{this.state.error ?
|
{this.state.error ?
|
||||||
<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
|
<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
|
||||||
this.renderSaveButton()
|
this.renderSaveButton()
|
||||||
}
|
}
|
||||||
<PrintNavItem />
|
|
||||||
<HelpNavItem />
|
|
||||||
<RecentNavItem />
|
|
||||||
<AccountNavItem />
|
|
||||||
</Nav.section>
|
</Nav.section>
|
||||||
</Navbar>;
|
</>;
|
||||||
},
|
},
|
||||||
|
|
||||||
render : function(){
|
render : function(){
|
||||||
return <div className='newPage sitePage'>
|
return <BaseEditPage
|
||||||
{this.renderNavbar()}
|
className="newPage"
|
||||||
|
errorState={this.state.error}
|
||||||
|
parent={this}
|
||||||
|
brew={this.state.brew}
|
||||||
|
navButtons={this.renderNavbar()}>
|
||||||
<div className='content'>
|
<div className='content'>
|
||||||
<SplitPane onDragFinish={this.handleSplitMove}>
|
<SplitPane onDragFinish={this.handleSplitMove}>
|
||||||
<Editor
|
<Editor
|
||||||
@@ -268,7 +259,7 @@ const NewPage = createClass({
|
|||||||
/>
|
/>
|
||||||
</SplitPane>
|
</SplitPane>
|
||||||
</div>
|
</div>
|
||||||
</div>;
|
</BaseEditPage>;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user