Refactor to use BaseEditPage for shared layout

Some Nav buttons missing on the different pages should now appear in all three pages. Unique buttons are still only on those pages for now (/share nav button only appears on the /edit page, etc.)

client/homebrew/pages/homePage/homePage.jsx

@@ -6,15 +6,10 @@ import request from '../../utils/request-middleware.js';
 const { Meta } = require('vitreum/headtags');
 
 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 { fetchThemeBundle } = require('../../../../shared/helpers.js');
 
+const BaseEditPage = require('../basePages/editPage/editPage.jsx');
 const SplitPane = require('client/components/splitPane/splitPane.jsx');
 const Editor = require('../../editor/editor.jsx');
 const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
@@ -25,13 +20,13 @@ const HomePage = createClass({
 	displayName     : 'HomePage',
 	getDefaultProps : function() {
 		return {
-			brew : DEFAULT_BREW,
-			ver  : '0.0.0'
+			brew : DEFAULT_BREW
 		};
 	},
 	getInitialState : function() {
 		return {
 			brew                       : this.props.brew,
+			isSaving                   : false,
 			welcomeText                : this.props.brew.text,
 			error                      : undefined,
 			currentEditorViewPageNum   : 1,
@@ -47,7 +42,11 @@ const HomePage = createClass({
 		fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme);
 	},
 
-	handleSave : function(){
+	save : function(){
+		this.setState({
+			isSaving : true
+		});
+
 		request.post('/api')
 			.send(this.state.brew)
 			.end((err, res)=>{
@@ -57,6 +56,9 @@ const HomePage = createClass({
 				}
 				const brew = res.body;
 				window.location = `/edit/${brew.editId}`;
+			})
+			.catch((err)=>{
+				this.setState({ isSaving: false, error: err });
 			});
 	},
 	handleSplitMove : function(){
@@ -80,26 +82,38 @@ const HomePage = createClass({
 			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(){
-		return <Navbar ver={this.props.ver}>
+		return <>
 			<Nav.section>
 				{this.state.error ?
 					<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
 					null
 				}
-				<NewBrewItem />
-				<HelpNavItem />
-				<VaultNavItem />
-				<RecentNavItem />
-				<AccountNavItem />
 			</Nav.section>
-		</Navbar>;
+			</>;
 	},
 
 	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' />
-			{this.renderNavbar()}
 			<div className='content'>
 				<SplitPane onDragFinish={this.handleSplitMove}>
 					<Editor
@@ -127,14 +141,14 @@ const HomePage = createClass({
 					/>
 				</SplitPane>
 			</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' />
 			</div>
 
 			<a href='/new' className='floatingNewButton'>
 				Create your own <i className='fas fa-magic' />
 			</a>
-		</div>;
+		</BaseEditPage>
 	}
 });