lint

make newPage functional
Merge pull request #4407 from naturalcrit/MakeHomePageFunctionalComponent
2026-01-24 07:43:01 +00:00 · 2025-09-02 22:26:01 -04:00 · 2025-09-02 22:21:49 -04:00 · 2025-08-30 20:20:16 -04:00 · 2025-08-30 20:14:29 -04:00 · 2025-08-30 19:47:10 -04:00
16 changed files with 670 additions and 714 deletions
--- a/client/homebrew/brewRenderer/brewRenderer.jsx
+++ b/client/homebrew/brewRenderer/brewRenderer.jsx
@@ -39,8 +39,8 @@ const BrewPage = (props)=>{
 		index    : 0,
 		...props
 	};
-	const pageRef = useRef(null);
-	const cleanText = safeHTML(`${props.contents}\n<div class="columnSplit"></div>\n`);
+	const pageRef   = useRef(null);
+	const cleanText = safeHTML(props.contents);

 	useEffect(()=>{
 		if(!pageRef.current) return;
--- a/client/homebrew/navbar/error-navitem.jsx
+++ b/client/homebrew/navbar/error-navitem.jsx
@@ -1,157 +1,138 @@
 require('./error-navitem.less');
 const React = require('react');
 const Nav = require('naturalcrit/nav/nav.jsx');
-const createClass = require('create-react-class');

-const ErrorNavItem = createClass({
-	getDefaultProps : function() {
-		return {
-			error  : '',
-			parent : null
-		};
-	},
-	render : function() {
-		const clearError = ()=>{
-			const state = {
-				error : null
-			};
-			if(this.props.parent.state.isSaving) {
-				state.isSaving = false;
-			}
-			this.props.parent.setState(state);
-		};
+const ErrorNavItem = ({error = '', clearError})=>{
+	const response    = error.response;
+	const errorCode   = error.code
+	const status      = response?.status;
+	const HBErrorCode = response?.body?.HBErrorCode;
+	const message     = response?.body?.message;

-		const error       = this.props.error;
-		const response    = error.response;
-		const status      = response?.status;
-		const errorCode   = error.code
-		const HBErrorCode = response?.body?.HBErrorCode;
-		const message     = response?.body?.message;
-		let errMsg = '';
-		try {
-			errMsg += `${error.toString()}\n\n`;
-			errMsg += `\`\`\`\n${error.stack}\n`;
-			errMsg += `${JSON.stringify(response?.error, null, '  ')}\n\`\`\``;
-			console.log(errMsg);
-		} catch (e){}
-
-		if(status === 409) {
-			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-				Oops!
-				<div className='errorContainer' onClick={clearError}>
-					{message ?? 'Conflict: please refresh to get latest changes'}
-				</div>
-			</Nav.item>;
-		}
-
-		if(status === 412) {
-			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-				Oops!
-				<div className='errorContainer' onClick={clearError}>
-					{message ?? 'Your client is out of date. Please save your changes elsewhere and refresh.'}
-				</div>
-			</Nav.item>;
-		}
-
-		if(HBErrorCode === '04') {
-			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-				Oops!
-				<div className='errorContainer' onClick={clearError}>
-					You are no longer signed in as an author of
-					this brew! Were you signed out from a different
-					window? Visit our log in page, then try again!
-					<br></br>
-					<a target='_blank' rel='noopener noreferrer'
-						href={`https://www.naturalcrit.com/login?redirect=${window.location.href}`}>
-						<div className='confirm'>
-							Sign In
-						</div>
-					</a>
-					<div className='deny'>
-						Not Now
-					</div>
-				</div>
-			</Nav.item>;
-		}
-
-		if(response?.body?.errors?.[0].reason == 'storageQuotaExceeded') {
-			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-			Oops!
-				<div className='errorContainer' onClick={clearError}>
-				Can't save because your Google Drive seems to be full!
-				</div>
-			</Nav.item>;
-		}
-
-		if(response?.req.url.match(/^\/api.*Google.*$/m)){
-			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-				Oops!
-				<div className='errorContainer' onClick={clearError}>
-					Looks like your Google credentials have
-					expired! Visit our log in page to sign out
-					and sign back in with Google,
-					then try saving again!
-					<br></br>
-					<a target='_blank' rel='noopener noreferrer'
-						href={`https://www.naturalcrit.com/login?redirect=${window.location.href}`}>
-						<div className='confirm'>
-							Sign In
-						</div>
-					</a>
-					<div className='deny'>
-						Not Now
-					</div>
-				</div>
-			</Nav.item>;
-		}
-
-		if(HBErrorCode === '09') {
-			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-				Oops!
-				<div className='errorContainer' onClick={clearError}>
-					Looks like there was a problem retreiving
-					the theme, or a theme that it inherits,
-					for this brew. Verify that brew <a className='lowercase' target='_blank' rel='noopener noreferrer' href={`/share/${response.body.brewId}`}>
-						{response.body.brewId}</a> still exists!
-				</div>
-			</Nav.item>;
-		}
-
-		if(HBErrorCode === '10') {
-			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-				Oops!
-				<div className='errorContainer' onClick={clearError}>
-					Looks like the brew you have selected
-					as a theme is not tagged for use as a
-					theme. Verify that
-					brew <a className='lowercase' target='_blank' rel='noopener noreferrer' href={`/share/${response.body.brewId}`}>
-						{response.body.brewId}</a> has the <span className='lowercase'>meta:theme</span> tag!
-				</div>
-			</Nav.item>;
-		}
-
-		if(errorCode === 'ECONNABORTED') {
-			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-				Oops!
-				<div className='errorContainer' onClick={clearError}>
-					The request to the server was interrupted or timed out.
-					This can happen due to a network issue, or if
-					trying to save a particularly large brew.
-					Please check your internet connection and try again.
-				</div>
-			</Nav.item>;
-		}
+	let errMsg = '';
+	try {
+		errMsg += `${error.toString()}\n\n`;
+		errMsg += `\`\`\`\n${error.stack}\n`;
+		errMsg += `${JSON.stringify(response?.error, null, '  ')}\n\`\`\``;
+		console.log(errMsg);
+	} catch (e){}

+	if(status === 409) {
 		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
 			Oops!
-			<div className='errorContainer'>
-				Looks like there was a problem saving. <br />
-				Report the issue <a target='_blank' rel='noopener noreferrer' href={`https://github.com/naturalcrit/homebrewery/issues/new?template=save_issue.yml&error-code=${encodeURIComponent(errMsg)}`}>
-				here
-				</a>.
+			<div className='errorContainer' onClick={clearError}>
+				{message ?? 'Conflict: please refresh to get latest changes'}
 			</div>
 		</Nav.item>;
 	}
-});
+
+	if(status === 412) {
+		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+			Oops!
+			<div className='errorContainer' onClick={clearError}>
+				{message ?? 'Your client is out of date. Please save your changes elsewhere and refresh.'}
+			</div>
+		</Nav.item>;
+	}
+
+	if(HBErrorCode === '04') {
+		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+			Oops!
+			<div className='errorContainer' onClick={clearError}>
+				You are no longer signed in as an author of
+				this brew! Were you signed out from a different
+				window? Visit our log in page, then try again!
+				<br></br>
+				<a target='_blank' rel='noopener noreferrer'
+					href={`https://www.naturalcrit.com/login?redirect=${window.location.href}`}>
+					<div className='confirm'>
+						Sign In
+					</div>
+				</a>
+				<div className='deny'>
+					Not Now
+				</div>
+			</div>
+		</Nav.item>;
+	}
+
+	if(response?.body?.errors?.[0].reason == 'storageQuotaExceeded') {
+		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+		Oops!
+			<div className='errorContainer' onClick={clearError}>
+			Can't save because your Google Drive seems to be full!
+			</div>
+		</Nav.item>;
+	}
+
+	if(response?.req.url.match(/^\/api.*Google.*$/m)){
+		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+			Oops!
+			<div className='errorContainer' onClick={clearError}>
+				Looks like your Google credentials have
+				expired! Visit our log in page to sign out
+				and sign back in with Google,
+				then try saving again!
+				<br></br>
+				<a target='_blank' rel='noopener noreferrer'
+					href={`https://www.naturalcrit.com/login?redirect=${window.location.href}`}>
+					<div className='confirm'>
+						Sign In
+					</div>
+				</a>
+				<div className='deny'>
+					Not Now
+				</div>
+			</div>
+		</Nav.item>;
+	}
+
+	if(HBErrorCode === '09') {
+		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+			Oops!
+			<div className='errorContainer' onClick={clearError}>
+				Looks like there was a problem retreiving
+				the theme, or a theme that it inherits,
+				for this brew. Verify that brew <a className='lowercase' target='_blank' rel='noopener noreferrer' href={`/share/${response.body.brewId}`}>
+					{response.body.brewId}</a> still exists!
+			</div>
+		</Nav.item>;
+	}
+
+	if(HBErrorCode === '10') {
+		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+			Oops!
+			<div className='errorContainer' onClick={clearError}>
+				Looks like the brew you have selected
+				as a theme is not tagged for use as a
+				theme. Verify that
+				brew <a className='lowercase' target='_blank' rel='noopener noreferrer' href={`/share/${response.body.brewId}`}>
+					{response.body.brewId}</a> has the <span className='lowercase'>meta:theme</span> tag!
+			</div>
+		</Nav.item>;
+	}
+
+	if(errorCode === 'ECONNABORTED') {
+		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+			Oops!
+			<div className='errorContainer' onClick={clearError}>
+				The request to the server was interrupted or timed out.
+				This can happen due to a network issue, or if
+				trying to save a particularly large brew.
+				Please check your internet connection and try again.
+			</div>
+		</Nav.item>;
+	}
+
+	return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+		Oops!
+		<div className='errorContainer'>
+			Looks like there was a problem saving. <br />
+			Report the issue <a target='_blank' rel='noopener noreferrer' href={`https://github.com/naturalcrit/homebrewery/issues/new?template=save_issue.yml&error-code=${encodeURIComponent(errMsg)}`}>
+			here
+			</a>.
+		</div>
+	</Nav.item>;
+};

 module.exports = ErrorNavItem;
--- a/client/homebrew/navbar/newbrew.navitem.jsx
+++ b/client/homebrew/navbar/newbrew.navitem.jsx
@@ -5,33 +5,45 @@ const { splitTextStyleAndMetadata } = require('../../../shared/helpers.js'); //

 const BREWKEY  = 'homebrewery-new';
 const STYLEKEY = 'homebrewery-new-style';
-const METAKEY  = 'homebrewery-new-meta';
+const METAKEY = 'homebrewery-new-meta';

 const NewBrew = ()=>{
 	const handleFileChange = (e)=>{
 		const file = e.target.files[0];
-		if(file) {
-			const reader = new FileReader();
-			reader.onload = (e)=>{
-				const fileContent = e.target.result;
-				const newBrew = {
-					text  : fileContent,
-					style : ''
-				};
-				if(fileContent.startsWith('```metadata')) {
-					splitTextStyleAndMetadata(newBrew); // Modify newBrew directly
-					localStorage.setItem(BREWKEY, newBrew.text);
-					localStorage.setItem(STYLEKEY, newBrew.style);
-					localStorage.setItem(METAKEY, JSON.stringify(_.pick(newBrew, ['title', 'description', 'tags', 'systems', 'renderer', 'theme', 'lang'])));
-					window.location.href = '/new';
-				} else {
-					alert('This file is invalid, please, enter a valid file');
-				}
-			};
-			reader.readAsText(file);
-		}
+		if(!file) return;
+
+		const currentNew = localStorage.getItem(BREWKEY);
+		if(currentNew && !confirm(
+			`You have some text in the new brew space, if you load a file that text will be lost, are you sure you want to load the file?`
+		)) return;
+
+		const reader = new FileReader();
+		reader.onload = (e)=>{
+			const fileContent = e.target.result;
+			const newBrew = { text: fileContent, style: '' };
+
+			if(fileContent.startsWith('```metadata')) {
+				splitTextStyleAndMetadata(newBrew);
+				localStorage.setItem(BREWKEY, newBrew.text);
+				localStorage.setItem(STYLEKEY, newBrew.style);
+				localStorage.setItem(METAKEY, JSON.stringify(
+					_.pick(newBrew, ['title', 'description', 'tags', 'systems', 'renderer', 'theme', 'lang'])
+				));
+				window.location.href = '/new';
+				return;
+			}
+
+			const type = file.name.split('.').pop().toLowerCase();
+			
+			alert(`This file is invalid: ${!type ? "Missing file extension" :`.${type} files are not supported`}. Only .txt files exported from the Homebrewery are allowed.`);
+
+
+			console.log(file);
+		};
+		reader.readAsText(file);
 	};

+
 	return (
 		<Nav.dropdown>
 			<Nav.item
--- a/client/homebrew/pages/basePages/editPage/editPage.jsx
+++ b/client/homebrew/pages/basePages/editPage/editPage.jsx
@@ -1,37 +0,0 @@
-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;
--- a/client/homebrew/pages/basePages/editPage/editPage.less
+++ b/client/homebrew/pages/basePages/editPage/editPage.less
--- a/client/homebrew/pages/basePages/uiPage/uiPage.less
+++ b/client/homebrew/pages/basePages/uiPage/uiPage.less
@@ -29,6 +29,7 @@
 						&::before {
 							margin-right : 5px;
 							font-family  : 'Font Awesome 6 Free';
+							font-weight  : 900;
 							content      : '\f00c';
 						}
 					}
--- a/client/homebrew/pages/editPage/editPage.jsx
+++ b/client/homebrew/pages/editPage/editPage.jsx
@@ -11,10 +11,16 @@ 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 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');
@@ -91,7 +97,7 @@ const EditPage = createClass({
 			htmlErrors : Markdown.validate(prevState.brew.text)
 		}));

-		fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme);
+		fetchThemeBundle((err)=>{this.setState({ error: err })}, (theme)=>{this.setState({ themeBundle: theme })}, this.props.brew.renderer, this.props.brew.theme);

 		document.addEventListener('keydown', this.handleControlKeys);
 	},
@@ -167,7 +173,7 @@ const EditPage = createClass({

 	handleMetaChange : function(metadata, field=undefined){
 		if(field == 'theme' || field == 'renderer')	// Fetch theme bundle only if theme or renderer was changed
-			fetchThemeBundle(this, metadata.renderer, metadata.theme);
+			fetchThemeBundle((err)=>{this.setState({ error: err })}, (theme)=>{this.setState({ themeBundle: theme })}, metadata.renderer, metadata.theme);

 		this.setState((prevState)=>({
 			brew : {
@@ -432,19 +438,32 @@ const EditPage = createClass({
 		return `https://www.reddit.com/r/UnearthedArcana/submit?title=${encodeURIComponent(title.toWellFormed())}&text=${encodeURIComponent(text)}`;
 	},

+	clearError : function(){
+		setState({
+			error    : null,
+			isSaving : false
+		})
+	},
+
 	renderNavbar : function(){
 		const shareLink = this.processShareId();

-		return <>
+		return <Navbar>
+			<Nav.section>
+				<Nav.item className='brewTitle'>{this.state.brew.title}</Nav.item>
+			</Nav.section>
+
 			<Nav.section>
 				{this.renderGoogleDriveIcon()}
 				{this.state.error ?
-					<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
+					<ErrorNavItem error={this.state.error} clearError={this.clearError}></ErrorNavItem> :
 					<Nav.dropdown className='save-menu'>
 						{this.renderSaveButton()}
 						{this.renderAutoSaveButton()}
 					</Nav.dropdown>
 				}
+				<NewBrew />
+				<HelpNavItem/>
 				<Nav.dropdown>
 					<Nav.item color='teal' icon='fas fa-share-alt'>
 						share
@@ -459,19 +478,20 @@ 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 <BaseEditPage
-							className="editPage"
-							errorState={this.state.error}
-							parent={this}
-							brew={this.state.brew}
-							navButtons={this.renderNavbar()}
-							recentStorageKey='edit'>
+		return <div className='editPage sitePage'>
 			<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}>
@@ -509,7 +529,7 @@ const EditPage = createClass({
 					/>
 				</SplitPane>
 			</div>
-		</BaseEditPage>;
+		</div>;
 	}
 });

--- a/client/homebrew/pages/homePage/homePage.jsx
+++ b/client/homebrew/pages/homePage/homePage.jsx
@@ -1,155 +1,142 @@
-require('./homePage.less');
-const React = require('react');
-const createClass = require('create-react-class');
-const cx = require('classnames');
-import request from '../../utils/request-middleware.js';
-const { Meta } = require('vitreum/headtags');
+import './homePage.less';

-const Nav = require('naturalcrit/nav/nav.jsx');
-const ErrorNavItem = require('../../navbar/error-navitem.jsx');
-const { fetchThemeBundle } = require('../../../../shared/helpers.js');
+import React                           from 'react';
+import { useEffect, useState, useRef } from 'react';
+import request                         from '../../utils/request-middleware.js';
+import { Meta }                        from 'vitreum/headtags';

-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');
+import Nav                             from 'naturalcrit/nav/nav.jsx';
+import Navbar                          from '../../navbar/navbar.jsx';
+import NewBrewItem                     from '../../navbar/newbrew.navitem.jsx';
+import HelpNavItem                     from '../../navbar/help.navitem.jsx';
+import VaultNavItem                    from '../../navbar/vault.navitem.jsx';
+import { both as RecentNavItem }       from '../../navbar/recent.navitem.jsx';
+import AccountNavItem                  from '../../navbar/account.navitem.jsx';
+import ErrorNavItem                    from '../../navbar/error-navitem.jsx';
+import { fetchThemeBundle }            from '../../../../shared/helpers.js';

-const { DEFAULT_BREW } = require('../../../../server/brewDefaults.js');
+import SplitPane                       from 'client/components/splitPane/splitPane.jsx';
+import Editor                          from '../../editor/editor.jsx';
+import BrewRenderer                    from '../../brewRenderer/brewRenderer.jsx';

-const HomePage = createClass({
-	displayName     : 'HomePage',
-	getDefaultProps : function() {
-		return {
-			brew : DEFAULT_BREW
-		};
-	},
-	getInitialState : function() {
-		return {
-			brew                       : this.props.brew,
-			isSaving                   : false,
-			welcomeText                : this.props.brew.text,
-			error                      : undefined,
-			currentEditorViewPageNum   : 1,
-			currentEditorCursorPageNum : 1,
-			currentBrewRendererPageNum : 1,
-			themeBundle                : {}
-		};
-	},
+import { DEFAULT_BREW }                from '../../../../server/brewDefaults.js';

-	editor : React.createRef(null),
+const HomePage =(props)=>{
+	props = {
+		brew : DEFAULT_BREW,
+		ver  : '0.0.0',
+    ...props
+  };

-	componentDidMount : function() {
-		fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme);
-	},
+	const [brew                      , setBrew]                       = useState(props.brew);
+	const [welcomeText               , setWelcomeText]                = useState(props.brew.text);
+	const [error                     , setError]                      = useState(undefined);
+	const [currentEditorViewPageNum  , setCurrentEditorViewPageNum]   = useState(1);
+	const [currentEditorCursorPageNum, setCurrentEditorCursorPageNum] = useState(1);
+	const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1);
+	const [themeBundle               , setThemeBundle]                = useState({});
+	const [isSaving                  , setIsSaving]                   = useState(false);

-	save : function(){
-		this.setState({
-			isSaving : true
-		});
+	const editorRef = useRef(null);

+	useEffect(()=>{
+		fetchThemeBundle(setError, setThemeBundle, brew.renderer, brew.theme);
+	}, []);
+
+	const save = ()=>{
 		request.post('/api')
-			.send(this.state.brew)
+			.send(brew)
 			.end((err, res)=>{
 				if(err) {
-					this.setState({ error: err });
+					setError(err);
 					return;
 				}
-				const brew = res.body;
-				window.location = `/edit/${brew.editId}`;
-			})
-			.catch((err)=>{
-				this.setState({ isSaving: false, error: err });
+				const saved = res.body;
+				window.location = `/edit/${saved.editId}`;
 			});
-	},
-	handleSplitMove : function(){
-		this.editor.current.update();
-	},
+	};

-	handleEditorViewPageChange : function(pageNumber){
-		this.setState({ currentEditorViewPageNum: pageNumber });
-	},
+	const handleSplitMove = ()=>{
+		editorRef.current.update();
+	};

-	handleEditorCursorPageChange : function(pageNumber){
-		this.setState({ currentEditorCursorPageNum: pageNumber });
-	},
+	const handleEditorViewPageChange = (pageNumber)=>{
+		setCurrentEditorViewPageNum(pageNumber);
+	};
+	
+	const handleEditorCursorPageChange = (pageNumber)=>{
+		setCurrentEditorCursorPageNum(pageNumber);
+	};
+	
+	const handleBrewRendererPageChange = (pageNumber)=>{
+		setCurrentBrewRendererPageNum(pageNumber);
+	};

-	handleBrewRendererPageChange : function(pageNumber){
-		this.setState({ currentBrewRendererPageNum: pageNumber });
-	},
+	const handleTextChange = (text)=>{
+		setBrew((prevBrew) => ({ ...prevBrew, text }));
+	};

-	handleTextChange : function(text){
-		this.setState((prevState)=>({
-			brew : { ...prevState.brew, text: text },
-		}));
-	},
+	const clearError = ()=>{
+		setError(null);
+		setIsSaving(false);
+	};

-	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 <>
+	const renderNavbar = ()=>{
+		return <Navbar ver={props.ver}>
 			<Nav.section>
-				{this.state.error ?
-					<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
+				{error ?
+					<ErrorNavItem error={error} clearError={clearError}></ErrorNavItem> :
 					null
 				}
+				<NewBrewItem />
+				<HelpNavItem />
+				<VaultNavItem />
+				<RecentNavItem />
+				<AccountNavItem />
 			</Nav.section>
-			</>;
-	},
+		</Navbar>;
+	};

-	render : function(){
-		return <BaseEditPage
-							className="homePage"
-							errorState={this.state.error}
-							parent={this}
-							brew={this.state.brew}
-							navButtons={this.renderNavbar()}>
+	return (
+		<div className='homePage sitePage'>
 			<Meta name='google-site-verification' content='NwnAQSSJZzAT7N-p5MY6ydQ7Njm67dtbu73ZSyE5Fy4' />
+			{renderNavbar()}
 			<div className='content'>
-				<SplitPane onDragFinish={this.handleSplitMove}>
+				<SplitPane onDragFinish={handleSplitMove}>
 					<Editor
-						ref={this.editor}
-						brew={this.state.brew}
-						onTextChange={this.handleTextChange}
-						renderer={this.state.brew.renderer}
+						ref={editorRef}
+						brew={brew}
+						onTextChange={handleTextChange}
+						renderer={brew.renderer}
 						showEditButtons={false}
-						themeBundle={this.state.themeBundle}
-						onCursorPageChange={this.handleEditorCursorPageChange}
-						onViewPageChange={this.handleEditorViewPageChange}
-						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
+						themeBundle={themeBundle}
+						onCursorPageChange={handleEditorCursorPageChange}
+						onViewPageChange={handleEditorViewPageChange}
+						currentEditorViewPageNum={currentEditorViewPageNum}
+						currentEditorCursorPageNum={currentEditorCursorPageNum}
+						currentBrewRendererPageNum={currentBrewRendererPageNum}
 					/>
 					<BrewRenderer
-						text={this.state.brew.text}
-						style={this.state.brew.style}
-						renderer={this.state.brew.renderer}
-						onPageChange={this.handleBrewRendererPageChange}
-						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
-						themeBundle={this.state.themeBundle}
+						text={brew.text}
+						style={brew.style}
+						renderer={brew.renderer}
+						onPageChange={handleBrewRendererPageChange}
+						currentEditorViewPageNum={currentEditorViewPageNum}
+						currentEditorCursorPageNum={currentEditorCursorPageNum}
+						currentBrewRendererPageNum={currentBrewRendererPageNum}
+						themeBundle={themeBundle}
 					/>
 				</SplitPane>
 			</div>
-			<div className={cx('floatingSaveButton', { show: this.state.welcomeText != this.state.brew.text })} onClick={this.save}>
+			<div className={`floatingSaveButton${welcomeText !== brew.text ? ' show' : ''}`} onClick={save}>
 				Save current <i className='fas fa-save' />
 			</div>

 			<a href='/new' className='floatingNewButton'>
 				Create your own <i className='fas fa-magic' />
 			</a>
-		</BaseEditPage>
-	}
-});
+		</div>
+	)
+};

 module.exports = HomePage;
--- a/client/homebrew/pages/newPage/newPage.jsx
+++ b/client/homebrew/pages/newPage/newPage.jsx
@@ -1,266 +1,251 @@
 /*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
-require('./newPage.less');
-const React = require('react');
-const createClass = require('create-react-class');
-import request from '../../utils/request-middleware.js';
+import './newPage.less';

-import Markdown from 'naturalcrit/markdown.js';
+import React, { useState, useEffect, useRef } from 'react';
+import request                                from '../../utils/request-middleware.js';
+import Markdown                               from 'naturalcrit/markdown.js';

-const Nav = require('naturalcrit/nav/nav.jsx');
-const ErrorNavItem = require('../../navbar/error-navitem.jsx');
+import Nav                       from 'naturalcrit/nav/nav.jsx';
+import Navbar                    from '../../navbar/navbar.jsx';
+import AccountNavItem            from '../../navbar/account.navitem.jsx';
+import ErrorNavItem              from '../../navbar/error-navitem.jsx';
+import HelpNavItem               from '../../navbar/help.navitem.jsx';
+import PrintNavItem              from '../../navbar/print.navitem.jsx';
+import { both as RecentNavItem } from '../../navbar/recent.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');
+import SplitPane    from 'client/components/splitPane/splitPane.jsx';
+import Editor       from '../../editor/editor.jsx';
+import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';

-const { DEFAULT_BREW } = require('../../../../server/brewDefaults.js');
-const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpers.js');
+import { DEFAULT_BREW }                       from '../../../../server/brewDefaults.js';
+import { printCurrentBrew, fetchThemeBundle, splitTextStyleAndMetadata } from '../../../../shared/helpers.js';

 const BREWKEY  = 'homebrewery-new';
 const STYLEKEY = 'homebrewery-new-style';
 const METAKEY  = 'homebrewery-new-meta';
-let SAVEKEY;
+const SAVEKEY  = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${global.account?.username || ''}`;

+const NewPage = (props)=>{
+	props = {
+		brew : DEFAULT_BREW,
+		...props
+	};

-const NewPage = createClass({
-	displayName     : 'NewPage',
-	getDefaultProps : function() {
-		return {
-			brew : DEFAULT_BREW
+	const [currentBrew               , setCurrentBrew               ] = useState(props.brew);
+	const [isSaving                  , setIsSaving                  ] = useState(false);
+	const [saveGoogle                , setSaveGoogle                ] = useState(global.account?.googleId ? true : false);
+	const [error                     , setError                     ] = useState(null);
+	const [HTMLErrors                , setHTMLErrors                ] = useState(Markdown.validate(props.brew.text));
+	const [currentEditorViewPageNum  , setCurrentEditorViewPageNum  ] = useState(1);
+	const [currentEditorCursorPageNum, setCurrentEditorCursorPageNum] = useState(1);
+	const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1);
+	const [themeBundle               , setThemeBundle               ] = useState({});
+
+	const editorRef = useRef(null);
+
+	useEffect(()=>{
+		document.addEventListener('keydown', handleControlKeys);
+		loadBrew();
+		fetchThemeBundle(setError, setThemeBundle, currentBrew.renderer, currentBrew.theme);
+
+		return ()=>{
+			document.removeEventListener('keydown', handleControlKeys);
 		};
-	},
+	}, []);

-	getInitialState : function() {
-		const brew = this.props.brew;
-
-		return {
-			brew                       : brew,
-			isSaving                   : false,
-			saveGoogle                 : (global.account && global.account.googleId ? true : false),
-			error                      : null,
-			htmlErrors                 : Markdown.validate(brew.text),
-			currentEditorViewPageNum   : 1,
-			currentEditorCursorPageNum : 1,
-			currentBrewRendererPageNum : 1,
-			themeBundle                : {}
-		};
-	},
-
-	editor : React.createRef(null),
-
-	componentDidMount : function() {
-		document.addEventListener('keydown', this.handleControlKeys);
-
-		const brew = this.state.brew;
-
-		if(!this.props.brew.shareId && typeof window !== 'undefined') { //Load from localStorage if in client browser
+	const loadBrew = ()=>{
+		const brew = { ...currentBrew };
+		if(!brew.shareId && typeof window !== 'undefined') { //Load from localStorage if in client browser
 			const brewStorage  = localStorage.getItem(BREWKEY);
 			const styleStorage = localStorage.getItem(STYLEKEY);
-			const metaStorage = JSON.parse(localStorage.getItem(METAKEY));
+			const metaStorage  = JSON.parse(localStorage.getItem(METAKEY));

-			brew.text  = brewStorage  ?? brew.text;
-			brew.style = styleStorage ?? brew.style;
-			// brew.title = metaStorage?.title || this.state.brew.title;
-			// brew.description = metaStorage?.description || this.state.brew.description;
+			brew.text     = brewStorage           ?? brew.text;
+			brew.style    = styleStorage          ?? brew.style;
 			brew.renderer = metaStorage?.renderer ?? brew.renderer;
 			brew.theme    = metaStorage?.theme    ?? brew.theme;
 			brew.lang     = metaStorage?.lang     ?? brew.lang;
 		}

-		SAVEKEY = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${global.account?.username || ''}`;
 		const saveStorage = localStorage.getItem(SAVEKEY) || 'HOMEBREWERY';

-		this.setState({
-			brew       : brew,
-			saveGoogle : (saveStorage == 'GOOGLE-DRIVE' && this.state.saveGoogle)
-		});
-
-		fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme);
+		setCurrentBrew(brew);
+		setSaveGoogle(saveStorage == 'GOOGLE-DRIVE' && saveGoogle);

 		localStorage.setItem(BREWKEY, brew.text);
 		if(brew.style)
 			localStorage.setItem(STYLEKEY, brew.style);
-		localStorage.setItem(METAKEY, JSON.stringify({ 'renderer': brew.renderer, 'theme': brew.theme, 'lang': brew.lang }));
-		if(window.location.pathname != '/new') {
+		localStorage.setItem(METAKEY, JSON.stringify({ renderer: brew.renderer, theme: brew.theme, lang: brew.lang }));
+		if(window.location.pathname !== '/new')
 			window.history.replaceState({}, window.location.title, '/new/');
-		}
-	},
-	componentWillUnmount : function() {
-		document.removeEventListener('keydown', this.handleControlKeys);
-	},
+	};

-	handleControlKeys : function(e){
+	const handleControlKeys = (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) printCurrentBrew();
-		if(e.keyCode == P_KEY || e.keyCode == S_KEY){
-			e.stopPropagation();
+		if(e.keyCode === S_KEY) save();
+		if(e.keyCode === P_KEY) printCurrentBrew();
+		if(e.keyCode === S_KEY || e.keyCode === P_KEY) {
 			e.preventDefault();
+			e.stopPropagation();
 		}
-	},
+	};

-	handleSplitMove : function(){
-		this.editor.current.update();
-	},
+	const handleSplitMove = ()=>{
+		editorRef.current.update();
+	};

-	handleEditorViewPageChange : function(pageNumber){
-		this.setState({ currentEditorViewPageNum: pageNumber });
-	},
+	const handleEditorViewPageChange = (pageNumber)=>{
+		setCurrentEditorViewPageNum(pageNumber);
+	};

-	handleEditorCursorPageChange : function(pageNumber){
-		this.setState({ currentEditorCursorPageNum: pageNumber });
-	},
+	const handleEditorCursorPageChange = (pageNumber)=>{
+		setCurrentEditorCursorPageNum(pageNumber);
+	};

-	handleBrewRendererPageChange : function(pageNumber){
-		this.setState({ currentBrewRendererPageNum: pageNumber });
-	},
+	const handleBrewRendererPageChange = (pageNumber)=>{
+		setCurrentBrewRendererPageNum(pageNumber);
+	};

-	handleTextChange : function(text){
-		//If there are errors, run the validator on every change to give quick feedback
-		let htmlErrors = this.state.htmlErrors;
-		if(htmlErrors.length) htmlErrors = Markdown.validate(text);
+	const handleTextChange = (text)=>{
+		//If there are HTML errors, run the validator on every change to give quick feedback
+		if(HTMLErrors.length)
+			HTMLErrors = Markdown.validate(text);

-		this.setState((prevState)=>({
-			brew       : { ...prevState.brew, text: text },
-			htmlErrors : htmlErrors,
-		}));
+		setHTMLErrors(HTMLErrors);
+		setCurrentBrew((prevBrew)=>({ ...prevBrew, text }));
 		localStorage.setItem(BREWKEY, text);
-	},
+	};

-	handleStyleChange : function(style){
-		this.setState((prevState)=>({
-			brew : { ...prevState.brew, style: style },
-		}));
+	const handleStyleChange = (style)=>{
+		setCurrentBrew((prevBrew)=>({ ...prevBrew, style }));
 		localStorage.setItem(STYLEKEY, style);
-	},
+	};

-	handleSnipChange : function(snippet){
-		//If there are errors, run the validator on every change to give quick feedback
-		let htmlErrors = this.state.htmlErrors;
-		if(htmlErrors.length) htmlErrors = Markdown.validate(snippet);
+	const handleSnipChange = (snippet)=>{
+		//If there are HTML errors, run the validator on every change to give quick feedback
+		if(HTMLErrors.length)
+			HTMLErrors = Markdown.validate(snippet);

-		this.setState((prevState)=>({
-			brew       : { ...prevState.brew, snippets: snippet },
-			htmlErrors : htmlErrors,
-		}), ()=>{if(this.state.autoSave) this.trySave();});
-	},
+		setHTMLErrors(HTMLErrors);
+		setCurrentBrew((prevBrew)=>({ ...prevBrew, snippets: snippet }));
+	};

-	handleMetaChange : function(metadata, field=undefined){
-		if(field == 'theme' || field == 'renderer')	// Fetch theme bundle only if theme or renderer was changed
-			fetchThemeBundle(this, metadata.renderer, metadata.theme);
+	const handleMetaChange = (metadata, field = undefined)=>{
+		if(field === 'theme' || field === 'renderer')
+			fetchThemeBundle(setError, setThemeBundle, metadata.renderer, metadata.theme);

-		this.setState((prevState)=>({
-			brew : { ...prevState.brew, ...metadata },
-		}), ()=>{
-			localStorage.setItem(METAKEY, JSON.stringify({
-				// 'title'       : this.state.brew.title,
-				// 'description' : this.state.brew.description,
-				'renderer' : this.state.brew.renderer,
-				'theme'    : this.state.brew.theme,
-				'lang'     : this.state.brew.lang
-			}));
-		});
-		;
-	},
+		setCurrentBrew((prev)=>({ ...prev, ...metadata }));
+		localStorage.setItem(METAKEY, JSON.stringify({
+			renderer : metadata.renderer,
+			theme    : metadata.theme,
+			lang     : metadata.lang
+		}));
+	};

-	save : async function(){
-		this.setState({
-			isSaving : true
-		});
+	const save = async ()=>{
+  	setIsSaving(true);

-		let brew = this.state.brew;
-		// Split out CSS to Style if CSS codefence exists
-		if(brew.text.startsWith('```css') && brew.text.indexOf('```\n\n') > 0) {
-			const index = brew.text.indexOf('```\n\n');
-			brew.style = `${brew.style ? `${brew.style}\n` : ''}${brew.text.slice(7, index - 1)}`;
-			brew.text = brew.text.slice(index + 5);
-		}
+		const updatedBrew = { ...currentBrew };
+		splitTextStyleAndMetadata(updatedBrew);
+
+		const pageRegex = updatedBrew.renderer === 'legacy' ? /\\page/g : /^\\page$/gm;
+		updatedBrew.pageCount = (updatedBrew.text.match(pageRegex) || []).length + 1;

-		brew.pageCount=((brew.renderer=='legacy' ? brew.text.match(/\\page/g) : brew.text.match(/^\\page$/gm)) || []).length + 1;
 		const res = await request
-			.post(`/api${this.state.saveGoogle ? '?saveToGoogle=true' : ''}`)
-			.send(brew)
+			.post(`/api${saveGoogle ? '?saveToGoogle=true' : ''}`)
+			.send(updatedBrew)
 			.catch((err)=>{
-				this.setState({ isSaving: false, error: err });
+				setIsSaving(false);
+				setError(err);
 			});
+
+		setIsSaving(false);
 		if(!res) return;

-		brew = res.body;
+		const savedBrew = res.body;
+
 		localStorage.removeItem(BREWKEY);
 		localStorage.removeItem(STYLEKEY);
 		localStorage.removeItem(METAKEY);
-		window.location = `/edit/${brew.editId}`;
-	},
+		window.location = `/edit/${savedBrew.editId}`;
+	};

-	renderSaveButton : function(){
-		if(this.state.isSaving){
+	const renderSaveButton = ()=>{
+		if(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}>
+			return <Nav.item icon='fas fa-save' className='save' onClick={save}>
 				save
 			</Nav.item>;
 		}
-	},
+	};

-	renderNavbar : function(){
-		return <>
+	const clearError = ()=>{
+		setError(null);
+		setIsSaving(false);
+	};
+
+	const renderNavbar = ()=>(
+		<Navbar>
 			<Nav.section>
-				{this.state.error ?
-					<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
-					this.renderSaveButton()
-				}
+				<Nav.item className='brewTitle'>{currentBrew.title}</Nav.item>
 			</Nav.section>
-		</>;
-	},

-	render : function(){
-		return <BaseEditPage
-							className="newPage"
-							errorState={this.state.error}
-							parent={this}
-							brew={this.state.brew}
-							navButtons={this.renderNavbar()}>
+			<Nav.section>
+				{error
+					? <ErrorNavItem error={error} clearError={clearError} />
+					: renderSaveButton()}
+				<PrintNavItem />
+				<HelpNavItem />
+				<RecentNavItem />
+				<AccountNavItem />
+			</Nav.section>
+		</Navbar>
+	);
+
+	return (
+		<div className='newPage sitePage'>
+			{renderNavbar()}
 			<div className='content'>
-				<SplitPane onDragFinish={this.handleSplitMove}>
+				<SplitPane onDragFinish={handleSplitMove}>
 					<Editor
-						ref={this.editor}
-						brew={this.state.brew}
-						onTextChange={this.handleTextChange}
-						onStyleChange={this.handleStyleChange}
-						onMetaChange={this.handleMetaChange}
-						onSnipChange={this.handleSnipChange}
-						renderer={this.state.brew.renderer}
-						userThemes={this.props.userThemes}
-						themeBundle={this.state.themeBundle}
-						onCursorPageChange={this.handleEditorCursorPageChange}
-						onViewPageChange={this.handleEditorViewPageChange}
-						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
+						ref={editorRef}
+						brew={currentBrew}
+						onTextChange={handleTextChange}
+						onStyleChange={handleStyleChange}
+						onMetaChange={handleMetaChange}
+						onSnipChange={handleSnipChange}
+						renderer={currentBrew.renderer}
+						userThemes={props.userThemes}
+						themeBundle={themeBundle}
+						onCursorPageChange={handleEditorCursorPageChange}
+						onViewPageChange={handleEditorViewPageChange}
+						currentEditorViewPageNum={currentEditorViewPageNum}
+						currentEditorCursorPageNum={currentEditorCursorPageNum}
+						currentBrewRendererPageNum={currentBrewRendererPageNum}
 					/>
 					<BrewRenderer
-						text={this.state.brew.text}
-						style={this.state.brew.style}
-						renderer={this.state.brew.renderer}
-						theme={this.state.brew.theme}
-						themeBundle={this.state.themeBundle}
-						errors={this.state.htmlErrors}
-						lang={this.state.brew.lang}
-						onPageChange={this.handleBrewRendererPageChange}
-						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
+						text={currentBrew.text}
+						style={currentBrew.style}
+						renderer={currentBrew.renderer}
+						theme={currentBrew.theme}
+						themeBundle={themeBundle}
+						errors={HTMLErrors}
+						lang={currentBrew.lang}
+						onPageChange={handleBrewRendererPageChange}
+						currentEditorViewPageNum={currentEditorViewPageNum}
+						currentEditorCursorPageNum={currentEditorCursorPageNum}
+						currentBrewRendererPageNum={currentBrewRendererPageNum}
 						allowPrint={true}
 					/>
 				</SplitPane>
 			</div>
-		</BaseEditPage>;
-	}
-});
+		</div>
+	);
+};

 module.exports = NewPage;
--- a/client/homebrew/pages/sharePage/sharePage.jsx
+++ b/client/homebrew/pages/sharePage/sharePage.jsx
@@ -17,15 +17,11 @@ const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpe
 const SharePage = (props)=>{
 	const { brew = DEFAULT_BREW_LOAD, disableMeta = false } = props;

-	const [state, setState] = useState({
-		themeBundle                : {},
-		currentBrewRendererPageNum : 1,
-	});
+	const [themeBundle,                setThemeBundle]                = useState({});
+	const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1);

 	const handleBrewRendererPageChange = useCallback((pageNumber)=>{
-		setState((prevState)=>({
-			currentBrewRendererPageNum : pageNumber,
-			...prevState }));
+		setCurrentBrewRendererPageNum(pageNumber);
 	}, []);

 	const handleControlKeys = (e)=>{
@@ -40,11 +36,7 @@ const SharePage = (props)=>{

 	useEffect(()=>{
 		document.addEventListener('keydown', handleControlKeys);
-		fetchThemeBundle(
-			{ setState },
-			brew.renderer,
-			brew.theme
-		);
+		fetchThemeBundle(undefined, setThemeBundle, brew.renderer, brew.theme);

 		return ()=>{
 			document.removeEventListener('keydown', handleControlKeys);
@@ -114,9 +106,9 @@ const SharePage = (props)=>{
 					lang={brew.lang}
 					renderer={brew.renderer}
 					theme={brew.theme}
-					themeBundle={state.themeBundle}
+					themeBundle={themeBundle}
 					onPageChange={handleBrewRendererPageChange}
-					currentBrewRendererPageNum={state.currentBrewRendererPageNum}
+					currentBrewRendererPageNum={currentBrewRendererPageNum}
 					allowPrint={true}
 				/>
 			</div>
--- a/client/homebrew/pages/userPage/userPage.jsx
+++ b/client/homebrew/pages/userPage/userPage.jsx
@@ -39,10 +39,14 @@ const UserPage = (props)=>{
 		}] : [])
 	];

+	const clearError = ()=>{
+		setError(null);
+	};
+
 	const navItems = (
 		<Navbar>
 			<Nav.section>
-				{error && (<ErrorNavItem error={error} parent={null}></ErrorNavItem>)}
+				{error && (<ErrorNavItem error={error} clearError={clearError}></ErrorNavItem>)}
 				<NewBrew />
 				<HelpNavItem />
 				<VaultNavitem />
--- a/client/homebrew/utils/request-middleware.spec.js
+++ b/client/homebrew/utils/request-middleware.spec.js
@@ -0,0 +1,74 @@
+import requestMiddleware from './request-middleware';
+
+jest.mock('superagent');
+import request from 'superagent';
+
+describe('request-middleware', ()=>{
+	let version;
+
+	let setFn;
+	let testFn;
+
+	beforeEach(()=>{
+		jest.resetAllMocks();
+		version = global.version;
+
+		global.version = '999';
+
+		setFn = jest.fn();
+		testFn = jest.fn(()=>{ return { set: setFn }; });
+	});
+
+	afterEach(()=>{
+		global.version = version;
+	});
+
+	it('should add header to get', ()=>{
+		// Ensure tests functions have been reset
+		expect(testFn).not.toHaveBeenCalled();
+		expect(setFn).not.toHaveBeenCalled();
+
+		request.get = testFn;
+
+		requestMiddleware.get('path');
+
+		expect(testFn).toHaveBeenCalledWith('path');
+		expect(setFn).toHaveBeenCalledWith('Homebrewery-Version', '999');
+	});
+
+	it('should add header to put', ()=>{
+		expect(testFn).not.toHaveBeenCalled();
+		expect(setFn).not.toHaveBeenCalled();
+
+		request.put = testFn;
+
+		requestMiddleware.put('path');
+
+		expect(testFn).toHaveBeenCalledWith('path');
+		expect(setFn).toHaveBeenCalledWith('Homebrewery-Version', '999');
+	});
+
+	it('should add header to post', ()=>{
+		expect(testFn).not.toHaveBeenCalled();
+		expect(setFn).not.toHaveBeenCalled();
+
+		request.post = testFn;
+
+		requestMiddleware.post('path');
+
+		expect(testFn).toHaveBeenCalledWith('path');
+		expect(setFn).toHaveBeenCalledWith('Homebrewery-Version', '999');
+	});
+
+	it('should add header to delete', ()=>{
+		expect(testFn).not.toHaveBeenCalled();
+		expect(setFn).not.toHaveBeenCalled();
+
+		request.delete = testFn;
+
+		requestMiddleware.delete('path');
+
+		expect(testFn).toHaveBeenCalledWith('path');
+		expect(setFn).toHaveBeenCalledWith('Homebrewery-Version', '999');
+	});
+});
--- a/package-lock.json
+++ b/package-lock.json
@@ -63,9 +63,9 @@
        "written-number": "^0.11.1"
      },
      "devDependencies": {
-        "@stylistic/stylelint-plugin": "^3.1.3",
+        "@stylistic/stylelint-plugin": "^4.0.0",
        "babel-plugin-transform-import-meta": "^2.3.3",
-        "eslint": "^9.31.0",
+        "eslint": "^9.34.0",
        "eslint-plugin-jest": "^29.0.1",
        "eslint-plugin-react": "^7.37.5",
        "globals": "^16.3.0",
@@ -73,9 +73,9 @@
        "jest-expect-message": "^1.1.3",
        "jsdom-global": "^3.0.2",
        "postcss-less": "^6.0.0",
-        "stylelint": "^16.22.0",
-        "stylelint-config-recess-order": "^7.1.0",
-        "stylelint-config-recommended": "^16.0.0",
+        "stylelint": "^16.23.1",
+        "stylelint-config-recess-order": "^7.2.0",
+        "stylelint-config-recommended": "^17.0.0",
        "supertest": "^7.1.4"
      },
      "engines": {
@@ -1884,9 +1884,9 @@
      }
    },
    "node_modules/@csstools/media-query-list-parser": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-3.0.1.tgz",
-      "integrity": "sha512-HNo8gGD02kHmcbX6PvCoUuOQvn4szyB9ca63vZHKX5A81QytgDG4oxG4IaEfHTlEZSZ6MjPEMWIVU+zF2PZcgw==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-4.0.3.tgz",
+      "integrity": "sha512-HAYH7d3TLRHDOUQK4mZKf9k9Ph/m8Akstg66ywKR4SFAigjs3yBiUeZtFxywiTm5moZMAp/5W/ZuFnNXXYLuuQ==",
      "dev": true,
      "funding": [
        {
@@ -1898,12 +1898,13 @@
          "url": "https://opencollective.com/csstools"
        }
      ],
+      "license": "MIT",
      "engines": {
        "node": ">=18"
      },
      "peerDependencies": {
-        "@csstools/css-parser-algorithms": "^3.0.1",
-        "@csstools/css-tokenizer": "^3.0.1"
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
      }
    },
    "node_modules/@dmsnell/diff-match-patch": {
@@ -2021,18 +2022,19 @@
      }
    },
    "node_modules/@eslint/config-helpers": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.3.0.tgz",
-      "integrity": "sha512-ViuymvFmcJi04qdZeDc2whTHryouGcDlaxPqarTD0ZE10ISpxGUVZGZDx4w01upyIynL3iu6IXH2bS1NhclQMw==",
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.3.1.tgz",
+      "integrity": "sha512-xR93k9WhrDYpXHORXpxVL5oHj3Era7wo6k/Wd8/IsQNnZUTzkGS29lyn3nAT05v6ltUuTFVCCYDEGfy2Or/sPA==",
      "dev": true,
+      "license": "Apache-2.0",
      "engines": {
        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
      }
    },
    "node_modules/@eslint/core": {
-      "version": "0.14.0",
-      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.14.0.tgz",
-      "integrity": "sha512-qIbV0/JZr7iSDjqAc60IqbLdsj9GDt16xQtWD+B78d/HAlvysGdZZ6rpJHGAc2T0FQx1X6thsSPdnoiGKdNtdg==",
+      "version": "0.15.2",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.15.2.tgz",
+      "integrity": "sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==",
      "dev": true,
      "license": "Apache-2.0",
      "dependencies": {
@@ -2080,9 +2082,9 @@
      }
    },
    "node_modules/@eslint/js": {
-      "version": "9.31.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.31.0.tgz",
-      "integrity": "sha512-LOm5OVt7D4qiKCqoiPbA7LWmI+tbw1VbTUowBcUMgQSuM6poJufkFkYDcQpo5KfgD39TnNySV26QjOh7VFpSyw==",
+      "version": "9.34.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.34.0.tgz",
+      "integrity": "sha512-EoyvqQnBNsV1CWaEJ559rxXL4c8V92gxirbawSmVUOWXlsRxxQXl6LmCpdUblgxgSkDIqKnhzba2SjRTI/A5Rw==",
      "dev": true,
      "license": "MIT",
      "engines": {
@@ -2102,13 +2104,13 @@
      }
    },
    "node_modules/@eslint/plugin-kit": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.1.tgz",
-      "integrity": "sha512-0J+zgWxHN+xXONWIyPWKFMgVuJoZuGiIFu8yxk7RJjxkzpGmyja5wRFqZIVtjDVOQpV+Rw0iOAjYPE2eQyjr0w==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.5.tgz",
+      "integrity": "sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==",
      "dev": true,
      "license": "Apache-2.0",
      "dependencies": {
-        "@eslint/core": "^0.14.0",
+        "@eslint/core": "^0.15.2",
        "levn": "^0.4.1"
      },
      "engines": {
@@ -2832,37 +2834,11 @@
      }
    },
    "node_modules/@keyv/serialize": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@keyv/serialize/-/serialize-1.0.3.tgz",
-      "integrity": "sha512-qnEovoOp5Np2JDGonIDL6Ayihw0RhnRh6vxPuHo4RDn1UOzwEo4AeIfpL6UGIrsceWrCMiVPgwRjbHu4vYFc3g==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@keyv/serialize/-/serialize-1.1.0.tgz",
+      "integrity": "sha512-RlDgexML7Z63Q8BSaqhXdCYNBy/JQnqYIwxofUrNLGCblOMHp+xux2Q8nLMLlPpgHQPoU0Do8Z6btCpRBEqZ8g==",
      "dev": true,
-      "dependencies": {
-        "buffer": "^6.0.3"
-      }
-    },
-    "node_modules/@keyv/serialize/node_modules/buffer": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
-      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "dependencies": {
-        "base64-js": "^1.3.1",
-        "ieee754": "^1.2.1"
-      }
+      "license": "MIT"
    },
    "node_modules/@mongodb-js/saslprep": {
      "version": "1.3.0",
@@ -3005,17 +2981,17 @@
      }
    },
    "node_modules/@stylistic/stylelint-plugin": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/@stylistic/stylelint-plugin/-/stylelint-plugin-3.1.3.tgz",
-      "integrity": "sha512-85fsmzgsIVmyG3/GFrjuYj6Cz8rAM7IZiPiXCMiSMfoDOC1lOrzrXPDk24WqviAghnPqGpx8b0caK2PuewWGFg==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@stylistic/stylelint-plugin/-/stylelint-plugin-4.0.0.tgz",
+      "integrity": "sha512-CFwt3K4Y/7bygNCLCQ8Sy4Hzgbhxq3BsNW0FIuYxl17HD3ywptm54ocyeiLVRrk5jtz1Zwks7Xr9eiZt8SWHAw==",
      "dev": true,
+      "license": "MIT",
      "dependencies": {
-        "@csstools/css-parser-algorithms": "^3.0.1",
-        "@csstools/css-tokenizer": "^3.0.1",
-        "@csstools/media-query-list-parser": "^3.0.1",
-        "is-plain-object": "^5.0.0",
-        "postcss": "^8.4.41",
-        "postcss-selector-parser": "^6.1.2",
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4",
+        "@csstools/media-query-list-parser": "^4.0.3",
+        "postcss": "^8.5.6",
+        "postcss-selector-parser": "^7.1.0",
        "postcss-value-parser": "^4.2.0",
        "style-search": "^0.1.0"
      },
@@ -3023,7 +2999,7 @@
        "node": "^18.12 || >=20.9"
      },
      "peerDependencies": {
-        "stylelint": "^16.8.0"
+        "stylelint": "^16.22.0"
      }
    },
    "node_modules/@tybys/wasm-util": {
@@ -4675,22 +4651,24 @@
      }
    },
    "node_modules/cacheable": {
-      "version": "1.10.1",
-      "resolved": "https://registry.npmjs.org/cacheable/-/cacheable-1.10.1.tgz",
-      "integrity": "sha512-Fa2BZY0CS9F0PFc/6aVA6tgpOdw+hmv9dkZOlHXII5v5Hw+meJBIWDcPrG9q/dXxGcNbym5t77fzmawrBQfTmQ==",
+      "version": "1.10.3",
+      "resolved": "https://registry.npmjs.org/cacheable/-/cacheable-1.10.3.tgz",
+      "integrity": "sha512-M6p10iJ/VT0wT7TLIGUnm958oVrU2cUK8pQAVU21Zu7h8rbk/PeRtRWrvHJBql97Bhzk3g1N6+2VKC+Rjxna9Q==",
      "dev": true,
+      "license": "MIT",
      "dependencies": {
        "hookified": "^1.10.0",
-        "keyv": "^5.3.4"
+        "keyv": "^5.4.0"
      }
    },
    "node_modules/cacheable/node_modules/keyv": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/keyv/-/keyv-5.3.4.tgz",
-      "integrity": "sha512-ypEvQvInNpUe+u+w8BIcPkQvEqXquyyibWE/1NB5T2BTzIpS5cGEV1LZskDzPSTvNAaT4+5FutvzlvnkxOSKlw==",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-5.5.0.tgz",
+      "integrity": "sha512-QG7qR2tijh1ftOvClut4YKKg1iW6cx3GZsKoGyJPxHkGWK9oJhG9P3j5deP0QQOGDowBMVQFaP+Vm4NpGYvmIQ==",
      "dev": true,
+      "license": "MIT",
      "dependencies": {
-        "@keyv/serialize": "^1.0.3"
+        "@keyv/serialize": "^1.1.0"
      }
    },
    "node_modules/cached-path-relative": {
@@ -4885,13 +4863,16 @@
      }
    },
    "node_modules/cipher-base": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz",
-      "integrity": "sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.6.tgz",
+      "integrity": "sha512-3Ek9H3X6pj5TgenXYtNWdaBon1tgYCaebd+XPg0keyjEbEfkD4KkmAxkQ/i1vYvxdcT5nscLBfq9VJRmCBcFSw==",
      "license": "MIT",
      "dependencies": {
-        "inherits": "^2.0.1",
-        "safe-buffer": "^5.0.1"
+        "inherits": "^2.0.4",
+        "safe-buffer": "^5.2.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
      }
    },
    "node_modules/cjs-module-lexer": {
@@ -6080,20 +6061,20 @@
      }
    },
    "node_modules/eslint": {
-      "version": "9.31.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.31.0.tgz",
-      "integrity": "sha512-QldCVh/ztyKJJZLr4jXNUByx3gR+TDYZCRXEktiZoUR3PGy4qCmSbkxcIle8GEwGpb5JBZazlaJ/CxLidXdEbQ==",
+      "version": "9.34.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.34.0.tgz",
+      "integrity": "sha512-RNCHRX5EwdrESy3Jc9o8ie8Bog+PeYvvSR8sDGoZxNFTvZ4dlxUB3WzQ3bQMztFrSRODGrLLj8g6OFuGY/aiQg==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.2.0",
        "@eslint-community/regexpp": "^4.12.1",
        "@eslint/config-array": "^0.21.0",
-        "@eslint/config-helpers": "^0.3.0",
-        "@eslint/core": "^0.15.0",
+        "@eslint/config-helpers": "^0.3.1",
+        "@eslint/core": "^0.15.2",
        "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "9.31.0",
-        "@eslint/plugin-kit": "^0.3.1",
+        "@eslint/js": "9.34.0",
+        "@eslint/plugin-kit": "^0.3.5",
        "@humanfs/node": "^0.16.6",
        "@humanwhocodes/module-importer": "^1.0.1",
        "@humanwhocodes/retry": "^0.4.2",
@@ -6258,19 +6239,6 @@
        "url": "https://opencollective.com/eslint"
      }
    },
-    "node_modules/eslint/node_modules/@eslint/core": {
-      "version": "0.15.1",
-      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.15.1.tgz",
-      "integrity": "sha512-bkOp+iumZCCbt1K1CmWf0R9pM5yKpDv+ZXtvSyQpudrI9kuFLp+bM2WOPXImuD/ceQuaa8f5pj93Y7zyECIGNA==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@types/json-schema": "^7.0.15"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      }
-    },
    "node_modules/eslint/node_modules/escape-string-regexp": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -7648,10 +7616,11 @@
      }
    },
    "node_modules/hookified": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/hookified/-/hookified-1.10.0.tgz",
-      "integrity": "sha512-dJw0492Iddsj56U1JsSTm9E/0B/29a1AuoSLRAte8vQg/kaTGF3IgjEWT8c8yG4cC10+HisE1x5QAwR0Xwc+DA==",
-      "dev": true
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/hookified/-/hookified-1.11.0.tgz",
+      "integrity": "sha512-aDdIN3GyU5I6wextPplYdfmWCo+aLmjjVbntmX6HLD5RCi/xKsivYEBhnRD+d9224zFf008ZpLMPlWF0ZodYZw==",
+      "dev": true,
+      "license": "MIT"
    },
    "node_modules/html-encoding-sniffer": {
      "version": "4.0.0",
@@ -11573,10 +11542,11 @@
      }
    },
    "node_modules/postcss-selector-parser": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
-      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
+      "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
      "dev": true,
+      "license": "MIT",
      "dependencies": {
        "cssesc": "^3.0.0",
        "util-deprecate": "^1.0.2"
@@ -12560,16 +12530,23 @@
      "license": "ISC"
    },
    "node_modules/sha.js": {
-      "version": "2.4.11",
-      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
-      "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
+      "version": "2.4.12",
+      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.12.tgz",
+      "integrity": "sha512-8LzC5+bvI45BjpfXU8V5fdU2mfeKiQe1D1gIMn7XUlF3OTUrpdJpPPH4EMAnF0DsHHdSZqCdSss5qCmJKuiO3w==",
      "license": "(MIT AND BSD-3-Clause)",
      "dependencies": {
-        "inherits": "^2.0.1",
-        "safe-buffer": "^5.0.1"
+        "inherits": "^2.0.4",
+        "safe-buffer": "^5.2.1",
+        "to-buffer": "^1.2.0"
      },
      "bin": {
        "sha.js": "bin.js"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
      }
    },
    "node_modules/shasum": {
@@ -13306,9 +13283,9 @@
      "license": "ISC"
    },
    "node_modules/stylelint": {
-      "version": "16.22.0",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.22.0.tgz",
-      "integrity": "sha512-SVEMTdjKNV4ollUrIY9ordZ36zHv2/PHzPjfPMau370MlL2VYXeLgSNMMiEbLGRO8RmD2R8/BVUeF2DfnfkC0w==",
+      "version": "16.23.1",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.23.1.tgz",
+      "integrity": "sha512-dNvDTsKV1U2YtiUDfe9d2gp902veFeo3ecCWdGlmLm2WFrAV0+L5LoOj/qHSBABQwMsZPJwfC4bf39mQm1S5zw==",
      "dev": true,
      "funding": [
        {
@@ -13335,7 +13312,7 @@
        "debug": "^4.4.1",
        "fast-glob": "^3.3.3",
        "fastest-levenshtein": "^1.0.16",
-        "file-entry-cache": "^10.1.1",
+        "file-entry-cache": "^10.1.3",
        "global-modules": "^2.0.0",
        "globby": "^11.1.0",
        "globjoin": "^0.1.4",
@@ -13369,19 +13346,20 @@
      }
    },
    "node_modules/stylelint-config-recess-order": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-recess-order/-/stylelint-config-recess-order-7.1.0.tgz",
-      "integrity": "sha512-rFc4Z6SCGgEohr1khsmAZ83X56Tdi2dHY/GB7VT3qJkpKU1V2w+mYlK+b7Za5gpsxEng3jnb4FzWyIl/KTH0AQ==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recess-order/-/stylelint-config-recess-order-7.2.0.tgz",
+      "integrity": "sha512-3Y97dhsWkUHFKRLGNLF6LE5JuNB2EVAZKYJ41wBRK4gplYdk7eHhSIwE24hanu0AoNmv5534Djip70pE+y5qkA==",
      "dev": true,
+      "license": "ISC",
      "peerDependencies": {
        "stylelint": ">=16.18",
        "stylelint-order": ">=7"
      }
    },
    "node_modules/stylelint-config-recommended": {
-      "version": "16.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-16.0.0.tgz",
-      "integrity": "sha512-4RSmPjQegF34wNcK1e1O3Uz91HN8P1aFdFzio90wNK9mjgAI19u5vsU868cVZboKzCaa5XbpvtTzAAGQAxpcXA==",
+      "version": "17.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-17.0.0.tgz",
+      "integrity": "sha512-WaMSdEiPfZTSFVoYmJbxorJfA610O0tlYuU2aEwY33UQhSPgFbClrVJYWvy3jGJx+XW37O+LyNLiZOEXhKhJmA==",
      "dev": true,
      "funding": [
        {
@@ -13398,7 +13376,7 @@
        "node": ">=18.12.0"
      },
      "peerDependencies": {
-        "stylelint": "^16.16.0"
+        "stylelint": "^16.23.0"
      }
    },
    "node_modules/stylelint-order": {
@@ -13418,29 +13396,6 @@
        "stylelint": "^16.18.0"
      }
    },
-    "node_modules/stylelint/node_modules/@csstools/media-query-list-parser": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-4.0.3.tgz",
-      "integrity": "sha512-HAYH7d3TLRHDOUQK4mZKf9k9Ph/m8Akstg66ywKR4SFAigjs3yBiUeZtFxywiTm5moZMAp/5W/ZuFnNXXYLuuQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/csstools"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/csstools"
-        }
-      ],
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "@csstools/css-parser-algorithms": "^3.0.5",
-        "@csstools/css-tokenizer": "^3.0.4"
-      }
-    },
    "node_modules/stylelint/node_modules/@csstools/selector-specificity": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-5.0.0.tgz",
@@ -13472,21 +13427,23 @@
      "license": "MIT"
    },
    "node_modules/stylelint/node_modules/file-entry-cache": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-10.1.1.tgz",
-      "integrity": "sha512-zcmsHjg2B2zjuBgjdnB+9q0+cWcgWfykIcsDkWDB4GTPtl1eXUA+gTI6sO0u01AqK3cliHryTU55/b2Ow1hfZg==",
+      "version": "10.1.3",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-10.1.3.tgz",
+      "integrity": "sha512-D+w75Ub8T55yor7fPgN06rkCAUbAYw2vpxJmmjv/GDAcvCnv9g7IvHhIZoxzRZThrXPFI2maeY24pPbtyYU7Lg==",
      "dev": true,
+      "license": "MIT",
      "dependencies": {
-        "flat-cache": "^6.1.10"
+        "flat-cache": "^6.1.12"
      }
    },
    "node_modules/stylelint/node_modules/flat-cache": {
-      "version": "6.1.11",
-      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-6.1.11.tgz",
-      "integrity": "sha512-zfOAns94mp7bHG/vCn9Ru2eDCmIxVQ5dELUHKjHfDEOJmHNzE+uGa6208kfkgmtym4a0FFjEuFksCXFacbVhSg==",
+      "version": "6.1.12",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-6.1.12.tgz",
+      "integrity": "sha512-U+HqqpZPPXP5d24bWuRzjGqVqUcw64k4nZAbruniDwdRg0H10tvN7H6ku1tjhA4rg5B9GS3siEvwO2qjJJ6f8Q==",
      "dev": true,
+      "license": "MIT",
      "dependencies": {
-        "cacheable": "^1.10.1",
+        "cacheable": "^1.10.3",
        "flatted": "^3.3.3",
        "hookified": "^1.10.0"
      }
@@ -13500,20 +13457,6 @@
        "node": ">= 4"
      }
    },
-    "node_modules/stylelint/node_modules/postcss-selector-parser": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
-      "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
    "node_modules/stylelint/node_modules/resolve-from": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
--- a/package.json
+++ b/package.json
@@ -136,9 +136,9 @@
    "written-number": "^0.11.1"
  },
  "devDependencies": {
-    "@stylistic/stylelint-plugin": "^3.1.3",
+    "@stylistic/stylelint-plugin": "^4.0.0",
    "babel-plugin-transform-import-meta": "^2.3.3",
-    "eslint": "^9.31.0",
+    "eslint": "^9.34.0",
    "eslint-plugin-jest": "^29.0.1",
    "eslint-plugin-react": "^7.37.5",
    "globals": "^16.3.0",
@@ -146,9 +146,9 @@
    "jest-expect-message": "^1.1.3",
    "jsdom-global": "^3.0.2",
    "postcss-less": "^6.0.0",
-    "stylelint": "^16.22.0",
-    "stylelint-config-recess-order": "^7.1.0",
-    "stylelint-config-recommended": "^16.0.0",
+    "stylelint": "^16.23.1",
+    "stylelint-config-recess-order": "^7.2.0",
+    "stylelint-config-recommended": "^17.0.0",
    "supertest": "^7.1.4"
  }
 }
--- a/server/app.js
+++ b/server/app.js
@@ -487,8 +487,8 @@ app.get('/account', asyncHandler(async (req, res, next)=>{
 		const query = { authors: req.account.username, googleId: { $exists: false } };
 		const mongoCount = await HomebrewModel.countDocuments(query)
 			.catch((err)=>{
-				mongoCount = 0;
 				console.log(err);
+				return 0;
 			});

 		data.accountDetails = {
--- a/shared/helpers.js
+++ b/shared/helpers.js
@@ -116,27 +116,21 @@ const printCurrentBrew = ()=>{
 	}
 };

-const fetchThemeBundle = async (obj, renderer, theme)=>{
+const fetchThemeBundle = async (setError, setThemeBundle, renderer, theme)=>{
 	if(!renderer || !theme) return;
 	const res = await request
 			.get(`/api/theme/${renderer}/${theme}`)
 			.catch((err)=>{
-				obj.setState({ error: err });
+				setError(err)
 			});
 	if(!res) {
-		obj.setState((prevState)=>({
-			...prevState,
-			themeBundle : {}
-		}));
+		setThemeBundle({});
 		return;
 	}
 	const themeBundle = res.body;
 	themeBundle.joinedStyles = themeBundle.styles.map((style)=>`<style>${style}</style>`).join('\n\n');
-	obj.setState((prevState)=>({
-		...prevState,
-		themeBundle : themeBundle,
-		error       : null
-	}));
+	setThemeBundle(themeBundle);
+	setError(null);
 };

 const debugTextMismatch = (clientTextRaw, serverTextRaw, label) => {
Author	SHA1	Message	Date
Trevor Buckner	b187b981ea	lint	2025-09-02 22:26:01 -04:00
Trevor Buckner	1aeded648e	make newPage functional	2025-09-02 22:21:49 -04:00
Trevor Buckner	c1ebc68cd4	Merge pull request #4407 from naturalcrit/MakeHomePageFunctionalComponent Refactor homePage.jsx into a functional component	2025-08-30 20:20:16 -04:00
Trevor Buckner	93b86632fc	Change from require to import	2025-08-30 20:14:29 -04:00
Trevor Buckner	d01860d4de	Merge branch 'master' into MakeHomePageFunctionalComponent	2025-08-30 19:47:10 -04:00
Trevor Buckner	86ac11e512	Merge pull request #4406 from naturalcrit/Convert-ErrorNavItem-to-functional-component Refactor ErrorNavItem to not need "this" parameter	2025-08-30 19:43:36 -04:00
Trevor Buckner	9c336062c6	Fix typo	2025-08-30 19:39:15 -04:00
Trevor Buckner	2cd47c46f6	Merge branch 'master' into Convert-ErrorNavItem-to-functional-component	2025-08-30 19:35:50 -04:00
Trevor Buckner	8671404bdc	Refactor ErrorNavItem to not need "this" parameter Toward making edit/new/home pages functional, which do not have "this"	2025-08-30 19:35:22 -04:00
Trevor Buckner	601fc732b0	Merge pull request #4404 from naturalcrit/MakeFetchThemeHelperWorkWithFunctional Changes fetchThemeBundle helper to not need "this" parameter	2025-08-30 19:07:46 -04:00
Trevor Buckner	fb3ab47ab0	Merge branch 'master' into MakeFetchThemeHelperWorkWithFunctional	2025-08-30 19:03:57 -04:00
Trevor Buckner	518a3434be	Changes fetchThemeBundle helper to not need "this" parameter Looks a bit ugly but this is temporary toward converting edit/home/new into functional components	2025-08-30 19:02:39 -04:00
Trevor Buckner	d01f4fb77e	Merge pull request #4403 from naturalcrit/revert-4212-issue_4201 Revert "Add missing punctuation and sentence structure characters to mustache style assignment regex"	2025-08-30 18:58:37 -04:00
Trevor Buckner	6600d9344c	Revert "Add missing punctuation and sentence structure characters to mustache style assignment regex"	2025-08-30 18:53:55 -04:00
Trevor Buckner	0371635e11	Merge pull request #4402 from dbolack-ab/issue_4401 Prevent extra columns	2025-08-30 18:52:26 -04:00
Trevor Buckner	53f6e48f8f	cleanup extra `\n` being added	2025-08-30 18:51:59 -04:00
Trevor Buckner	da578c53a8	Remove extraneous changes Overcorrecting in the other direction	2025-08-30 18:50:49 -04:00
David Bolack	986bfdd00a	Prevent extra columns	2025-08-30 17:37:23 -05:00
Trevor Buckner	15c04ef37e	Update homePage.jsx	2025-08-30 17:14:37 -04:00
Trevor Buckner	8cf55932a9	Fix useEffect and Refs; Update fetchThemeBundle to work with functional	2025-08-30 17:10:20 -04:00
Trevor Buckner	759dcb5833	Change functions to const vars	2025-08-30 16:49:54 -04:00
Trevor Buckner	83c3eacf83	Change props and state to functional style	2025-08-30 16:45:47 -04:00
Víctor Losada Hernández	7198c21229	Merge pull request #4398 from naturalcrit/dependabot/npm_and_yarn/dev-dependencies-97ef339e7a Bump eslint from 9.33.0 to 9.34.0 in the dev-dependencies group	2025-08-25 09:34:38 +02:00
dependabot[bot]	f1ad1b9124	Bump eslint from 9.33.0 to 9.34.0 in the dev-dependencies group Bumps the dev-dependencies group with 1 update: [eslint](https://github.com/eslint/eslint). Updates `eslint` from 9.33.0 to 9.34.0 - [Release notes](https://github.com/eslint/eslint/releases) - [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md) - [Commits](https://github.com/eslint/eslint/compare/v9.33.0...v9.34.0) --- updated-dependencies: - dependency-name: eslint dependency-version: 9.34.0 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-dependencies ... Signed-off-by: dependabot[bot] <support@github.com>	2025-08-25 04:44:12 +00:00
Víctor Losada Hernández	593a98db9a	Merge pull request #4395 from naturalcrit/dependabot/npm_and_yarn/sha.js-2.4.12 Bump sha.js from 2.4.11 to 2.4.12	2025-08-24 22:19:42 +02:00
dependabot[bot]	e25c3daad6	Bump sha.js from 2.4.11 to 2.4.12 Bumps [sha.js](https://github.com/crypto-browserify/sha.js) from 2.4.11 to 2.4.12. - [Changelog](https://github.com/browserify/sha.js/blob/master/CHANGELOG.md) - [Commits](https://github.com/crypto-browserify/sha.js/compare/v2.4.11...v2.4.12) --- updated-dependencies: - dependency-name: sha.js dependency-version: 2.4.12 dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2025-08-24 20:15:31 +00:00
Víctor Losada Hernández	96b175e74d	Merge pull request #4394 from naturalcrit/dependabot/npm_and_yarn/cipher-base-1.0.6 Bump cipher-base from 1.0.4 to 1.0.6	2025-08-24 22:14:05 +02:00
dependabot[bot]	8924685c26	Bump cipher-base from 1.0.4 to 1.0.6 Bumps [cipher-base](https://github.com/crypto-browserify/cipher-base) from 1.0.4 to 1.0.6. - [Changelog](https://github.com/browserify/cipher-base/blob/master/CHANGELOG.md) - [Commits](https://github.com/crypto-browserify/cipher-base/compare/v1.0.4...v1.0.6) --- updated-dependencies: - dependency-name: cipher-base dependency-version: 1.0.6 dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2025-08-24 16:30:44 +00:00
Víctor Losada Hernández	74c9d7b3f1	Merge pull request #4396 from naturalcrit/dependabot/npm_and_yarn/stylelint-config-recommended-17.0.0 Bump stylelint-config-recommended from 16.0.0 to 17.0.0	2025-08-24 18:29:18 +02:00
dependabot[bot]	cd378cad0c	Bump stylelint-config-recommended from 16.0.0 to 17.0.0 Bumps [stylelint-config-recommended](https://github.com/stylelint/stylelint-config-recommended) from 16.0.0 to 17.0.0. - [Release notes](https://github.com/stylelint/stylelint-config-recommended/releases) - [Changelog](https://github.com/stylelint/stylelint-config-recommended/blob/main/CHANGELOG.md) - [Commits](https://github.com/stylelint/stylelint-config-recommended/compare/16.0.0...17.0.0) --- updated-dependencies: - dependency-name: stylelint-config-recommended dependency-version: 17.0.0 dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com>	2025-08-24 16:25:55 +00:00
Víctor Losada Hernández	ce304996f0	Merge pull request #4212 from dbolack-ab/issue_4201 Add missing punctuation and sentence structure characters to mustache style assignment regex	2025-08-24 14:14:07 +02:00
David Bolack	029c105ff1	Fix \} in divblocks	2025-08-23 14:04:37 -05:00
David Bolack	1f81cc9af0	Merge branch 'issue_4201' of github.com:dbolack-ab/homebrewery into issue_4201	2025-08-23 12:02:32 -05:00
David Bolack	6ac6eae863	Merge branch 'master' into issue_4201	2025-08-23 12:02:11 -05:00
Víctor Losada Hernández	a47a1a25a4	Merge pull request #4393 from naturalcrit/refine-import-file-error-feedback fix file import error 2	2025-08-21 16:58:23 +02:00
Víctor Losada Hernández	0500ac305a	Merge branch 'refine-import-file-error-feedback' of https://github.com/naturalcrit/homebrewery into refine-import-file-error-feedback	2025-08-21 16:55:13 +02:00
Víctor Losada Hernández	e1a441b04a	Merge branch 'master' of https://github.com/naturalcrit/homebrewery into refine-import-file-error-feedback	2025-08-21 16:54:55 +02:00
Víctor Losada Hernández	b98c297079	Merge branch 'master' into refine-import-file-error-feedback	2025-08-21 16:54:28 +02:00
Víctor Losada Hernández	90dfc75ce9	Merge branch 'refine-import-file-error-feedback' of https://github.com/naturalcrit/homebrewery into refine-import-file-error-feedback	2025-08-21 16:53:39 +02:00
Víctor Losada Hernández	dd46a059c5	aah, i forgot to add the latest commit	2025-08-21 16:53:36 +02:00
Víctor Losada Hernández	2d881b8dc9	Merge pull request #4391 from naturalcrit/refine-import-file-error-feedback Refine import file error feedback	2025-08-21 16:42:45 +02:00
Víctor Losada Hernández	e023bfeef6	Merge branch 'master' into refine-import-file-error-feedback	2025-08-21 16:38:43 +02:00
Víctor Losada Hernández	8b351925c1	Merge pull request #4361 from naturalcrit/dependabot/npm_and_yarn/stylistic/stylelint-plugin-4.0.0 Bump @stylistic/stylelint-plugin from 3.1.3 to 4.0.0	2025-08-21 16:37:06 +02:00
Víctor Losada Hernández	5ddd631dfd	Merge branch 'master' into dependabot/npm_and_yarn/stylistic/stylelint-plugin-4.0.0	2025-08-21 16:34:00 +02:00
Víctor Losada Hernández	5ff6327c72	Merge pull request #4364 from G-Ambatte/addRequestMiddlewareTests Add tests for request-middleware.js	2025-08-21 16:30:20 +02:00
Víctor Losada Hernández	c993a1a8c9	Merge branch 'master' into addRequestMiddlewareTests	2025-08-21 16:26:59 +02:00
Víctor Losada Hernández	b9372f17d9	Merge branch 'master' into issue_4201	2025-08-21 16:10:04 +02:00
Víctor Losada Hernández	6b7c57f0e4	Merge pull request #4368 from naturalcrit/fixAccountPageFAIcons Fix Account page FA icon font weights	2025-08-21 16:05:52 +02:00
Víctor Losada Hernández	6c5063a30d	Merge branch 'master' into fixAccountPageFAIcons	2025-08-21 16:02:21 +02:00
Víctor Losada Hernández	e20da7c67f	Merge pull request #4382 from emmanuel-ferdman/master Handle mongo count qurey error by returning default value	2025-08-21 16:02:09 +02:00
Víctor Losada Hernández	3596eabbf5	Merge branch 'master' into fixAccountPageFAIcons	2025-08-21 16:00:18 +02:00
Víctor Losada Hernández	fb4ca21cb4	Merge branch 'master' into master	2025-08-21 15:59:04 +02:00
dependabot[bot]	99769c90f8	Bump @stylistic/stylelint-plugin from 3.1.3 to 4.0.0 Bumps [@stylistic/stylelint-plugin](https://github.com/stylelint-stylistic/stylelint-stylistic) from 3.1.3 to 4.0.0. - [Release notes](https://github.com/stylelint-stylistic/stylelint-stylistic/releases) - [Changelog](https://github.com/stylelint-stylistic/stylelint-stylistic/blob/main/CHANGELOG.md) - [Commits](https://github.com/stylelint-stylistic/stylelint-stylistic/compare/v3.1.3...v4.0.0) --- updated-dependencies: - dependency-name: "@stylistic/stylelint-plugin" dependency-version: 4.0.0 dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com>	2025-08-21 13:58:23 +00:00
Víctor Losada Hernández	301c50cca9	Merge pull request #4383 from naturalcrit/dependabot/npm_and_yarn/dev-dependencies-b389a345e5 Bump the dev-dependencies group across 1 directory with 3 updates	2025-08-21 15:56:56 +02:00
Víctor Losada Hernández	320f1e120f	reordering	2025-08-21 12:23:41 +02:00
Víctor Losada Hernández	cca9ebefdb	better error handling for file import	2025-08-20 23:23:13 +02:00
dependabot[bot]	aebc49c2d4	Bump the dev-dependencies group across 1 directory with 3 updates Bumps the dev-dependencies group with 3 updates in the / directory: [eslint](https://github.com/eslint/eslint), [stylelint](https://github.com/stylelint/stylelint) and [stylelint-config-recess-order](https://github.com/stormwarning/stylelint-config-recess-order). Updates `eslint` from 9.31.0 to 9.33.0 - [Release notes](https://github.com/eslint/eslint/releases) - [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md) - [Commits](https://github.com/eslint/eslint/compare/v9.31.0...v9.33.0) Updates `stylelint` from 16.22.0 to 16.23.1 - [Release notes](https://github.com/stylelint/stylelint/releases) - [Changelog](https://github.com/stylelint/stylelint/blob/main/CHANGELOG.md) - [Commits](https://github.com/stylelint/stylelint/compare/16.22.0...16.23.1) Updates `stylelint-config-recess-order` from 7.1.0 to 7.2.0 - [Release notes](https://github.com/stormwarning/stylelint-config-recess-order/releases) - [Changelog](https://github.com/stormwarning/stylelint-config-recess-order/blob/main/CHANGELOG.md) - [Commits](https://github.com/stormwarning/stylelint-config-recess-order/compare/v7.1.0...v7.2.0) --- updated-dependencies: - dependency-name: eslint dependency-version: 9.33.0 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-dependencies - dependency-name: stylelint dependency-version: 16.23.1 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-dependencies - dependency-name: stylelint-config-recess-order dependency-version: 7.2.0 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-dependencies ... Signed-off-by: dependabot[bot] <support@github.com>	2025-08-12 13:52:36 +00:00
Emmanuel Ferdman	1eb226ea13	Handle mongo count qurey error by returning default value Signed-off-by: Emmanuel Ferdman <emmanuelferdman@gmail.com>	2025-08-10 23:26:41 -07:00
G.Ambatte	8049b5be9d	Merge branch 'master' into addRequestMiddlewareTests	2025-08-04 11:17:14 +12:00
G.Ambatte	a8dab28fcf	Fix Account page FA icon font weights	2025-07-30 12:00:50 +12:00
G.Ambatte	16d7b11b8d	Add request-middleware test file	2025-07-26 18:44:59 +12:00
David Bolack	e2ed7b8600	Merge branch 'master' into issue_4201	2025-07-23 20:21:49 -05:00
David Bolack	6bb0b8001b	Merge branch 'master' into issue_4201	2025-06-30 10:54:16 -05:00
David Bolack	50d2a0d3a2	FIx regression	2025-05-26 23:13:21 -05:00
David Bolack	17f60ee159	Merge branch 'master' into issue_4201	2025-05-26 23:03:16 -05:00
David Bolack	e842599b22	Add missing punction and sentence structure characters to mustache style assignment regex	2025-05-24 22:35:03 -05:00