From 6f9caf0590023586d6a6a8c7a9425d5446361bf6 Mon Sep 17 00:00:00 2001
From: Trevor Buckner <calculuschild@gmail.com>
Date: Sun, 10 Aug 2025 22:16:07 -0400
Subject: [PATCH] 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.)
---
 .../pages/basePages/editPage/editPage.jsx     | 37 +++++++++++++
 .../pages/basePages/editPage/editPage.less    |  0
 client/homebrew/pages/editPage/editPage.jsx   | 34 ++++--------
 client/homebrew/pages/homePage/homePage.jsx   | 54 ++++++++++++-------
 client/homebrew/pages/newPage/newPage.jsx     | 29 ++++------
 5 files changed, 92 insertions(+), 62 deletions(-)
 create mode 100644 client/homebrew/pages/basePages/editPage/editPage.jsx
 create mode 100644 client/homebrew/pages/basePages/editPage/editPage.less

diff --git a/client/homebrew/pages/basePages/editPage/editPage.jsx b/client/homebrew/pages/basePages/editPage/editPage.jsx
new file mode 100644
index 000000000..9229ad6ea
--- /dev/null
+++ b/client/homebrew/pages/basePages/editPage/editPage.jsx
@@ -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;
diff --git a/client/homebrew/pages/basePages/editPage/editPage.less b/client/homebrew/pages/basePages/editPage/editPage.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx
index d1f0ed21c..c439d1789 100644
--- a/client/homebrew/pages/editPage/editPage.jsx
+++ b/client/homebrew/pages/editPage/editPage.jsx
@@ -13,14 +13,9 @@ const { Meta } = require('vitreum/headtags');
 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 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 Editor = require('../../editor/editor.jsx');
 const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
@@ -441,11 +436,7 @@ const EditPage = createClass({
 	renderNavbar : function(){
 		const shareLink = this.processShareId();
 
-		return <Navbar>
-			<Nav.section>
-				<Nav.item className='brewTitle'>{this.state.brew.title}</Nav.item>
-			</Nav.section>
-
+		return <>
 			<Nav.section>
 				{this.renderGoogleDriveIcon()}
 				{this.state.error ?
@@ -455,8 +446,6 @@ const EditPage = createClass({
 						{this.renderAutoSaveButton()}
 					</Nav.dropdown>
 				}
-				<NewBrew />
-				<HelpNavItem/>
 				<Nav.dropdown>
 					<Nav.item color='teal' icon='fas fa-share-alt'>
 						share
@@ -471,20 +460,19 @@ const EditPage = createClass({
 						post to reddit
 					</Nav.item>
 				</Nav.dropdown>
-				<PrintNavItem />
-				<VaultNavItem />
-				<RecentNavItem brew={this.state.brew} storageKey='edit' />
-				<Account />
 			</Nav.section>
-
-		</Navbar>;
+		</>;
 	},
 
 	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' />
-			{this.renderNavbar()}
-
 			{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'>
 				<SplitPane onDragFinish={this.handleSplitMove}>
@@ -522,7 +510,7 @@ const EditPage = createClass({
 					/>
 				</SplitPane>
 			</div>
-		</div>;
+		</BaseEditPage>;
 	}
 });
 
diff --git a/client/homebrew/pages/homePage/homePage.jsx b/client/homebrew/pages/homePage/homePage.jsx
index eac0216fd..be2244503 100644
--- a/client/homebrew/pages/homePage/homePage.jsx
+++ b/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>
 	}
 });
 
diff --git a/client/homebrew/pages/newPage/newPage.jsx b/client/homebrew/pages/newPage/newPage.jsx
index ab7c22541..4b4040c10 100644
--- a/client/homebrew/pages/newPage/newPage.jsx
+++ b/client/homebrew/pages/newPage/newPage.jsx
@@ -7,13 +7,9 @@ import request from '../../utils/request-middleware.js';
 import Markdown from 'naturalcrit/markdown.js';
 
 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 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 Editor = require('../../editor/editor.jsx');
 const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
@@ -212,28 +208,23 @@ const NewPage = createClass({
 	},
 
 	renderNavbar : function(){
-		return <Navbar>
-
-			<Nav.section>
-				<Nav.item className='brewTitle'>{this.state.brew.title}</Nav.item>
-			</Nav.section>
-
+		return <>
 			<Nav.section>
 				{this.state.error ?
 					<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
 					this.renderSaveButton()
 				}
-				<PrintNavItem />
-				<HelpNavItem />
-				<RecentNavItem />
-				<AccountNavItem />
 			</Nav.section>
-		</Navbar>;
+		</>;
 	},
 
 	render : function(){
-		return <div className='newPage sitePage'>
-			{this.renderNavbar()}
+		return <BaseEditPage
+							className="newPage"
+							errorState={this.state.error}
+							parent={this}
+							brew={this.state.brew}
+							navButtons={this.renderNavbar()}>
 			<div className='content'>
 				<SplitPane onDragFinish={this.handleSplitMove}>
 					<Editor
@@ -268,7 +259,7 @@ const NewPage = createClass({
 					/>
 				</SplitPane>
 			</div>
-		</div>;
+		</BaseEditPage>;
 	}
 });