Make autosave common/move save button into common format

(not on /edit yet. That one is a beast.)

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -39,8 +39,8 @@ const BrewPage = (props)=>{
 		index    : 0,
 		...props
 	};
-	const pageRef   = useRef(null);
+	const pageRef = useRef(null);
-	const cleanText = safeHTML(props.contents);
+	const cleanText = safeHTML(`${props.contents}\n<div class="columnSplit"></div>\n`);
 
 	useEffect(()=>{
 		if(!pageRef.current) return;

client/homebrew/navbar/error-navitem.jsx

@@ -1,138 +1,157 @@
 require('./error-navitem.less');
 const React = require('react');
 const Nav = require('naturalcrit/nav/nav.jsx');
+const createClass = require('create-react-class');
 
-const ErrorNavItem = ({error = '', clearError})=>{
+const ErrorNavItem = createClass({
-	const response    = error.response;
+	getDefaultProps : function() {
-	const errorCode   = error.code
+		return {
-	const status      = response?.status;
+			error  : '',
-	const HBErrorCode = response?.body?.HBErrorCode;
+			parent : null
-	const message     = response?.body?.message;
+		};
+	},
+	render : function() {
+		const clearError = ()=>{
+			const state = {
+				error : null
+			};
+			if(this.props.parent.state.isSaving) {
+				state.isSaving = false;
+			}
+			this.props.parent.setState(state);
+		};
 
-	let errMsg = '';
+		const error       = this.props.error;
-	try {
+		const response    = error.response;
-		errMsg += `${error.toString()}\n\n`;
+		const status      = response?.status;
-		errMsg += `\`\`\`\n${error.stack}\n`;
+		const errorCode   = error.code
-		errMsg += `${JSON.stringify(response?.error, null, '  ')}\n\`\`\``;
+		const HBErrorCode = response?.body?.HBErrorCode;
-		console.log(errMsg);
+		const message     = response?.body?.message;
-	} catch (e){}
+		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) {
+		if(status === 409) {
-		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-			Oops!
+				Oops!
-			<div className='errorContainer' onClick={clearError}>
+				<div className='errorContainer' onClick={clearError}>
-				{message ?? 'Conflict: please refresh to get latest changes'}
+					{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>;
-		</Nav.item>;
+		}
-	}
 
-	if(response?.body?.errors?.[0].reason == 'storageQuotaExceeded') {
+		if(status === 412) {
-		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-		Oops!
+				Oops!
-			<div className='errorContainer' onClick={clearError}>
+				<div className='errorContainer' onClick={clearError}>
-			Can't save because your Google Drive seems to be full!
+					{message ?? 'Your client is out of date. Please save your changes elsewhere and refresh.'}
-			</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>;
-		</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>;
+		}
 
-	if(HBErrorCode === '09') {
 		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
 			Oops!
-			<div className='errorContainer' onClick={clearError}>
+			<div className='errorContainer'>
-				Looks like there was a problem retreiving
+				Looks like there was a problem saving. <br />
-				the theme, or a theme that it inherits,
+				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)}`}>
-				for this brew. Verify that brew <a className='lowercase' target='_blank' rel='noopener noreferrer' href={`/share/${response.body.brewId}`}>
+				here
-					{response.body.brewId}</a> still exists!
+				</a>.
 			</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;

client/homebrew/navbar/newbrew.navitem.jsx

@@ -5,45 +5,33 @@ 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) return;
+		if(file) {
-
+			const reader = new FileReader();
-		const currentNew = localStorage.getItem(BREWKEY);
+			reader.onload = (e)=>{
-		if(currentNew && !confirm(
+				const fileContent = e.target.result;
-			`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?`
+				const newBrew = {
-		)) return;
+					text  : fileContent,
-
+					style : ''
-		const reader = new FileReader();
+				};
-		reader.onload = (e)=>{
+				if(fileContent.startsWith('```metadata')) {
-			const fileContent = e.target.result;
+					splitTextStyleAndMetadata(newBrew); // Modify newBrew directly
-			const newBrew = { text: fileContent, style: '' };
+					localStorage.setItem(BREWKEY, newBrew.text);
-
+					localStorage.setItem(STYLEKEY, newBrew.style);
-			if(fileContent.startsWith('```metadata')) {
+					localStorage.setItem(METAKEY, JSON.stringify(_.pick(newBrew, ['title', 'description', 'tags', 'systems', 'renderer', 'theme', 'lang'])));
-				splitTextStyleAndMetadata(newBrew);
+					window.location.href = '/new';
-				localStorage.setItem(BREWKEY, newBrew.text);
+				} else {
-				localStorage.setItem(STYLEKEY, newBrew.style);
+					alert('This file is invalid, please, enter a valid file');
-				localStorage.setItem(METAKEY, JSON.stringify(
+				}
-					_.pick(newBrew, ['title', 'description', 'tags', 'systems', 'renderer', 'theme', 'lang'])
+			};
-				));
+			reader.readAsText(file);
-				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

client/homebrew/pages/basePages/editPage/editPage.jsx

@@ -0,0 +1,309 @@
+require('./editPage.less');
+const React = require('react');
+const _ = require('lodash');
+
+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 SplitPane = require('client/components/splitPane/splitPane.jsx');
+const Editor = require('../../../editor/editor.jsx');
+const BrewRenderer = require('../../../brewRenderer/brewRenderer.jsx');
+
+const { fetchThemeBundle } = require('../../../../../shared/helpers.js');
+
+import { useEffect, useState, useRef } from 'react';
+import Markdown from 'naturalcrit/markdown.js';
+
+const BREWKEY  = 'homebrewery-new';
+const STYLEKEY = 'homebrewery-new-style';
+const METAKEY  = 'homebrewery-new-meta';
+const SAVEKEY  = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${global.account?.username || ''}`;
+
+const SAVE_TIMEOUT = 10000;
+
+const BaseEditPage = (props)=>{
+  const [brew,                       setBrew]                       = useState(() => props.brew);
+	const [savedBrew,                  setSavedBrew]                  = useState(brew);
+  const [isSaving,                   setIsSaving]                   = useState(false);
+	const [lastSavedTime,              setLastSavedTime]              = useState(new Date());
+	const [saveGoogle,                 setSaveGoogle]                 = useState(() => (global.account?.googleId ? true : false));
+  const [welcomeText,                setWelcomeText]                = useState(() => props.brew?.text ?? '');
+  const [error,                      setError]                      = useState(undefined);
+	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 [unsavedChanges,             setUnsavedChanges]             = useState(false);
+	const [autoSaveEnabled,            setAutoSaveEnabled]            = useState(true);
+	const [warnUnsavedChanges,         setWarnUnsavedChanges]         = useState(false);
+
+	const editorRef     = useRef(null);
+	let   lastSavedBrew = useRef(JSON.parse(JSON.stringify(this.propcopys.brew))); //Deep copy
+	const saveTimeout   = useRef(null);
+	const unsavedChangesTimer = useRef(null);
+
+	const handleSplitMove = ()=>{
+		editorRef.current.update();
+	};
+
+	const handleEditorViewPageChange = (pageNumber)=>{
+		setCurrentEditorViewPageNum(pageNumber);
+	};
+	
+	const handleEditorCursorPageChange = (pageNumber)=>{
+		setCurrentEditorCursorPageNum(pageNumber);
+	};
+	
+	const handleBrewRendererPageChange	 = (pageNumber)=>{
+		setCurrentBrewRendererPageNum(pageNumber);
+	};
+
+	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);
+
+		setHTMLErrors(htmlErrors);
+		setBrew((prevBrew) => ({ ...prevBrew, text }));
+
+		// TODO: ONLY ON /NEW PAGE
+		localStorage.setItem(BREWKEY, text);
+	};
+
+	const handleStyleChange = (style)=>{
+		setBrew((prevBrew) => ({ ...prevBrew, style }));
+
+		if(props.useLocalStorage)
+			localStorage.setItem(STYLEKEY, style);
+	};
+
+	const handleSnipChange = (snippet)=>{
+		//If there are HTML errors, run the validator on every change to give quick feedback
+		if(htmlErrors.length)
+			htmlErrors = Markdown.validate(text);
+
+		setHTMLErrors(htmlErrors);
+		setBrew((prevBrew) => ({ ...prevBrew, snippets: snippet }));
+	};
+
+	const handleMetaChange = (metadata, field=undefined)=>{
+		if(field == 'theme' || field == 'renderer')	// Fetch theme bundle only if theme or renderer was changed
+			fetchThemeBundle(setError, setThemeBundle, metadata.renderer, metadata.theme);
+
+		setBrew((prevBrew) => ({ ...prevBrew, ...metadata }));
+
+		if(props.useLocalStorage)
+			localStorage.setItem(METAKEY, JSON.stringify({
+				'renderer' : metadata.renderer,
+				'theme'    : metadata.theme,
+				'lang'     : metadata.lang
+			}));
+	};
+
+	const updateBrew = (newData) => {
+		setBrew(prevBrew => ({	//TODO: May be able to just directly use setBrew instead of a wrapper, if its safe to assume we want all the data from newData
+			...prevBrew,					//OR:  Somehow combine handleTextChange, handleStyleChange, handleMetaChange, and handleSnipChange into one function that calls this
+			style: newData.style,
+			text: newData.text,
+			snippets: newData.snippets
+		}));
+	};
+		
+	const clearError = ()=>{
+		setError(null);
+		setIsSaving(false);
+	};
+
+	const save = async (immediate=false)=>{
+		if(isSaving) return;
+		if(!unsavedChanges && !immediate) return;
+
+		clearTimeout(saveTimeout.current);
+
+		const timeout = immediate ? 0 : 10000;
+
+		saveTimeout.current = setTimeout(async () => {
+			setIsSaving(true);
+			await props.performSave(brew, saveGoogle)
+			.catch((err)=>{
+				setError(err);
+			});
+			setIsSaving(false);
+			setLastSavedTime(new Date());
+			setTimeout(setWarnUnsavedChanges(true), 900000); // 15 minutes between unsaved work warnings
+		}, timeout);
+	};
+
+	const handleControlKeys = (e)=>{
+		if(!(e.ctrlKey || e.metaKey)) return;
+		const S_KEY = 83;
+		const P_KEY = 80;
+		if(e.keyCode == S_KEY) save();
+		if(e.keyCode == P_KEY) BrewRenderer.printCurrentBrew();
+		if(e.keyCode == P_KEY || e.keyCode == S_KEY){
+			e.stopPropagation();
+			e.preventDefault();
+		}
+	};
+
+	const	hasChanges =()=>{
+		return !_.isEqual(brew, savedBrew);
+	};
+
+	useEffect(() => {
+		props.loadBrew?.(brew, setBrew, setSaveGoogle);  //Initial load from localStorage/etc.
+
+		//Load settings
+		setAutoSaveEnabled(JSON.parse(localStorage.getItem('AUTOSAVE_ON')) ?? true);
+
+		setHTMLErrors(Markdown.validate(brew.text));
+
+		document.addEventListener('keydown', handleControlKeys);
+		window.onbeforeunload = ()=>{
+			if(isSaving || unsavedChanges)
+				return 'You have unsaved changes!';
+		};
+
+		return () => {
+			document.removeEventListener('keydown', handleControlKeys);
+			window.onbeforeunload = null;
+		}
+	}, []);
+
+	useEffect(() => {
+		fetchThemeBundle(setError, setThemeBundle, brew.renderer, brew.theme);
+	}, [brew.renderer, brew.theme]);
+
+	useEffect(() => {
+		const hasChange = hasChanges();
+		if(unsavedChanges !== hasChange)
+			setUnsavedChanges(hasChange);
+
+		if(autoSaveEnabled) save();
+	}, [brew]);
+
+	const resetUnsavedChangesWarning = ()=>{
+		setTimeout(setWarnUnsavedChanges(false), 4000);  // Display warning for 4 seconds
+		setTimeout(setWarnUnsavedChanges(true) , 90000); // 15 minutes between warnings
+	};
+
+	const toggleAutoSave = ()=>{
+		if(unsavedChangesTimer.current) clearTimeout(unsavedChangesTimer.current);
+		localStorage.setItem('AUTOSAVE_ON', JSON.stringify(!autoSaveEnabled));
+		setAutoSaveEnabled(!autoSaveEnabled);
+		setWarnUnsavedChanges(false);
+	};
+
+	const renderSaveButton = ()=>{
+		// #1 - Currently saving, show SAVING
+		if(isSaving)
+			return <Nav.item className='save' icon='fas fa-spinner fa-spin'>saving...</Nav.item>;
+
+		// #2 - Unsaved changes exist, autosave is OFF and warning timer has expired, show AUTOSAVE WARNING
+		if(unsavedChanges && warnUnsavedChanges){
+			resetUnsavedChangesWarning();
+			const elapsedTime = Math.round((new Date() - lastSavedTime) / 1000 / 60);
+			const text = elapsedTime == 0 ? 'Autosave is OFF.' : `Autosave is OFF, and you haven't saved for ${elapsedTime} minutes.`;
+
+			return <Nav.item className='save error' icon='fas fa-exclamation-circle'>
+							Reminder...
+							<div className='errorContainer'>{text}</div>
+						</Nav.item>;
+		}
+
+		// #3 - Unsaved changes exist, click to save, show SAVE NOW
+		if(unsavedChanges)
+			return <Nav.item className='save' onClick={()=>save(true)} color='blue' icon='fas fa-save'>Save Now</Nav.item>;
+
+		// #4 - No unsaved changes, autosave is ON, show AUTO-SAVED
+		if(autoSaveEnabled)
+			return <Nav.item className='save saved'>auto-saved.</Nav.item>;
+
+		// DEFAULT - No unsaved changes, show SAVED
+		return <Nav.item className='save saved'>saved.</Nav.item>;
+	};
+
+	const renderAutoSaveButton = ()=>{
+		return <Nav.item onClick={toggleAutoSave}>
+						Autosave <i className={autosaveEnabled ? 'fas fa-power-off active' : 'fas fa-power-off'}></i>
+					</Nav.item>;
+	};
+
+	return (
+		<div className={`sitePage ${props.className || ''}`}>
+			<Navbar>
+				<Nav.section>
+					<Nav.item className='brewTitle'>{props.brew.title}</Nav.item>
+				</Nav.section>
+				<Nav.section>
+					{error
+						? <ErrorNavItem error={error} clearError={clearError}></ErrorNavItem>
+						: <Nav.dropdown className='save-menu'>
+								{renderSaveButton()}
+								{renderAutoSaveButton()}
+							</Nav.dropdown>
+					}
+					{props.renderUniqueNav?.()}
+				</Nav.section>
+				<Nav.section>
+					<PrintNavItem />
+					<NewBrewItem />
+					<HelpNavItem />
+					<VaultNavItem />
+					<RecentNavItem brew={props.brew} storageKey={props.recentStorageKey} />
+					<AccountNavItem />
+				</Nav.section>
+			</Navbar>
+
+			<div className='content'>
+				<SplitPane onDragFinish={handleSplitMove}>
+					<Editor
+						ref={editorRef}
+						brew={brew}
+						onTextChange={handleTextChange}
+						onStyleChange={handleStyleChange}
+						onMetaChange={handleMetaChange}
+						onSnipChange={handleSnipChange}
+						reportError={this.errorReported}
+						renderer={brew.renderer}
+						showEditButtons={false}  //FALSE FOR HOME PAGE
+						userThemes={props.userThemes}
+						themeBundle={themeBundle}
+						updateBrew={updateBrew}
+						onCursorPageChange={handleEditorCursorPageChange}
+						onViewPageChange={handleEditorViewPageChange}
+						currentEditorViewPageNum={currentEditorViewPageNum}
+						currentEditorCursorPageNum={currentEditorCursorPageNum}
+						currentBrewRendererPageNum={currentBrewRendererPageNum}
+					/>
+					<BrewRenderer
+						text={brew.text}
+						style={brew.style}
+						renderer={brew.renderer}
+						theme={brew.theme}
+						errors={htmlErrors}
+						lang={brew.lang}
+						onPageChange={handleBrewRendererPageChange}
+						currentEditorViewPageNum={currentEditorViewPageNum}
+						currentEditorCursorPageNum={currentEditorCursorPageNum}
+						currentBrewRendererPageNum={currentBrewRendererPageNum}
+						themeBundle={themeBundle}
+						allowPrint={true} // FALSE FOR HOME PAGE
+					/>
+				</SplitPane>
+			</div>
+
+			{props.children?.(welcomeText, brew, save)}
+		</div>
+	);	
+};
+
+module.exports = BaseEditPage;

client/homebrew/pages/basePages/uiPage/uiPage.less

@@ -29,7 +29,6 @@
 						&::before {
 							margin-right : 5px;
 							font-family  : 'Font Awesome 6 Free';
-							font-weight  : 900;
 							content      : '\f00c';
 						}
 					}

client/homebrew/pages/editPage/editPage.jsx

@@ -11,19 +11,8 @@ 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 BaseEditPage = require('../basePages/editPage/editPage.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 SplitPane = require('client/components/splitPane/splitPane.jsx');
-const Editor = require('../../editor/editor.jsx');
-const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
 const LockNotification = require('./lockNotification/lockNotification.jsx');
 
@@ -36,7 +25,6 @@ import { updateHistory, versionHistoryGarbageCollection } from '../../utils/vers
 
 const googleDriveIcon = require('../../googleDrive.svg');
 
-const SAVE_TIMEOUT = 10000;
 
 const EditPage = createClass({
 	displayName     : 'EditPage',
@@ -48,171 +36,17 @@ const EditPage = createClass({
 
 	getInitialState : function() {
 		return {
-			brew                       : this.props.brew,
-			isSaving                   : false,
-			unsavedChanges             : false,
 			alertTrashedGoogleBrew     : this.props.brew.trashed,
 			alertLoginToTransfer       : false,
 			saveGoogle                 : this.props.brew.googleId ? true : false,
 			confirmGoogleTransfer      : false,
 			error                      : null,
-			htmlErrors                 : Markdown.validate(this.props.brew.text),
-			url                        : '',
-			autoSave                   : true,
-			autoSaveWarning            : false,
-			unsavedTime                : new Date(),
-			currentEditorViewPageNum   : 1,
-			currentEditorCursorPageNum : 1,
-			currentBrewRendererPageNum : 1,
 			displayLockMessage         : this.props.brew.lock || false,
-			themeBundle                : {}
 		};
 	},
 
-	editor    : React.createRef(null),
-	savedBrew : null,
-
 	componentDidMount : function(){
-		this.setState({
-			url : window.location.href
-		});
 
-		this.savedBrew = JSON.parse(JSON.stringify(this.props.brew)); //Deep copy
-
-		this.setState({ autoSave: JSON.parse(localStorage.getItem('AUTOSAVE_ON')) ?? true }, ()=>{
-			if(this.state.autoSave){
-				this.trySave();
-			} else {
-				this.setState({ autoSaveWarning: true });
-			}
-		});
-
-		window.onbeforeunload = ()=>{
-			if(this.state.isSaving || this.state.unsavedChanges){
-				return 'You have unsaved changes!';
-			}
-		};
-
-		this.setState((prevState)=>({
-			htmlErrors : Markdown.validate(prevState.brew.text)
-		}));
-
-		fetchThemeBundle((err)=>{this.setState({ error: err })}, (theme)=>{this.setState({ themeBundle: theme })}, this.props.brew.renderer, this.props.brew.theme);
-
-		document.addEventListener('keydown', this.handleControlKeys);
-	},
-	componentWillUnmount : function() {
-		window.onbeforeunload = function(){};
-		document.removeEventListener('keydown', this.handleControlKeys);
-	},
-	componentDidUpdate : function(){
-		const hasChange = this.hasChanges();
-		if(this.state.unsavedChanges != hasChange){
-			this.setState({
-				unsavedChanges : hasChange
-			});
-		}
-	},
-
-	handleControlKeys : function(e){
-		if(!(e.ctrlKey || e.metaKey)) return;
-		const S_KEY = 83;
-		const P_KEY = 80;
-		if(e.keyCode == S_KEY) this.trySave(true);
-		if(e.keyCode == P_KEY) printCurrentBrew();
-		if(e.keyCode == P_KEY || e.keyCode == S_KEY){
-			e.stopPropagation();
-			e.preventDefault();
-		}
-	},
-
-	handleSplitMove : function(){
-		this.editor.current.update();
-	},
-
-	handleEditorViewPageChange : function(pageNumber){
-		this.setState({ currentEditorViewPageNum: pageNumber });
-	},
-
-	handleEditorCursorPageChange : function(pageNumber){
-		this.setState({ currentEditorCursorPageNum: pageNumber });
-	},
-
-	handleBrewRendererPageChange : function(pageNumber){
-		this.setState({ currentBrewRendererPageNum: 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);
-
-		this.setState((prevState)=>({
-			brew       : { ...prevState.brew, text: text },
-			htmlErrors : htmlErrors,
-		}), ()=>{if(this.state.autoSave) this.trySave();});
-	},
-
-	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);
-
-		this.setState((prevState)=>({
-			brew           : { ...prevState.brew, snippets: snippet },
-			unsavedChanges : true,
-			htmlErrors     : htmlErrors,
-		}), ()=>{if(this.state.autoSave) this.trySave();});
-	},
-
-	handleStyleChange : function(style){
-		this.setState((prevState)=>({
-			brew : { ...prevState.brew, style: style }
-		}), ()=>{if(this.state.autoSave) this.trySave();});
-	},
-
-	handleMetaChange : function(metadata, field=undefined){
-		if(field == 'theme' || field == 'renderer')	// Fetch theme bundle only if theme or renderer was changed
-			fetchThemeBundle((err)=>{this.setState({ error: err })}, (theme)=>{this.setState({ themeBundle: theme })}, metadata.renderer, metadata.theme);
-
-		this.setState((prevState)=>({
-			brew : {
-				...prevState.brew,
-				...metadata
-			}
-		}), ()=>{if(this.state.autoSave) this.trySave();});
-	},
-
-	hasChanges : function(){
-		return !_.isEqual(this.state.brew, this.savedBrew);
-	},
-
-	updateBrew : function(newData){
-		this.setState((prevState)=>({
-			brew : {
-				...prevState.brew,
-				style    : newData.style,
-				text     : newData.text,
-				snippets : newData.snippets
-			}
-		}));
-	},
-
-	trySave : function(immediate=false){
-		if(!this.debounceSave) this.debounceSave = _.debounce(this.save, SAVE_TIMEOUT);
-		if(this.state.isSaving)
-			return;
-
-		if(immediate) {
-			this.debounceSave();
-			this.debounceSave.flush();
-			return;
-		}
-		
-		if(this.hasChanges())
-			this.debounceSave();
-		else
-			this.debounceSave.cancel();
 	},
 
 	handleGoogleClick : function(){
@@ -223,11 +57,10 @@ const EditPage = createClass({
 			return;
 		}
 		this.setState((prevState)=>({
-			confirmGoogleTransfer : !prevState.confirmGoogleTransfer
+			confirmGoogleTransfer : !prevState.confirmGoogleTransfer,
+			error                 : null
 		}));
-		this.setState({
+
-			error    : null
-		});
 	},
 
 	closeAlerts : function(event){
@@ -303,7 +136,6 @@ const EditPage = createClass({
 				version  : res.body.version
 			},
 			isSaving    : false,
-			unsavedTime : new Date()
 		}), ()=>{
 			this.setState({ unsavedChanges : this.hasChanges() });
 		});
@@ -336,7 +168,7 @@ const EditPage = createClass({
 					You must be signed in to a Google account to transfer
 					between the homebrewery and Google Drive!
 					<a target='_blank' rel='noopener noreferrer'
-						href={`https://www.naturalcrit.com/login?redirect=${this.state.url}`}>
+						href={`https://www.naturalcrit.com/login?redirect=${window.Location.href}`}>
 						<div className='confirm'>
 							Sign In
 						</div>
@@ -358,68 +190,6 @@ const EditPage = createClass({
 		</Nav.item>;
 	},
 
-	renderSaveButton : function(){
-
-		// #1 - Currently saving, show SAVING
-		if(this.state.isSaving){
-			return <Nav.item className='save' icon='fas fa-spinner fa-spin'>saving...</Nav.item>;
-		}
-
-		// #2 - Unsaved changes exist, autosave is OFF and warning timer has expired, show AUTOSAVE WARNING
-		if(this.state.unsavedChanges && this.state.autoSaveWarning){
-			this.setAutosaveWarning();
-			const elapsedTime = Math.round((new Date() - this.state.unsavedTime) / 1000 / 60);
-			const text = elapsedTime == 0 ? 'Autosave is OFF.' : `Autosave is OFF, and you haven't saved for ${elapsedTime} minutes.`;
-
-			return <Nav.item className='save error' icon='fas fa-exclamation-circle'>
-			Reminder...
-				<div className='errorContainer'>
-					{text}
-				</div>
-			</Nav.item>;
-		}
-
-		// #3 - Unsaved changes exist, click to save, show SAVE NOW
-		// Use trySave(true) instead of save() to use debounced save function
-		if(this.state.unsavedChanges){
-			return <Nav.item className='save' onClick={()=>this.trySave(true)} color='blue' icon='fas fa-save'>Save Now</Nav.item>;
-		}
-		// #4 - No unsaved changes, autosave is ON, show AUTO-SAVED
-		if(this.state.autoSave){
-			return <Nav.item className='save saved'>auto-saved.</Nav.item>;
-		}
-		// DEFAULT - No unsaved changes, show SAVED
-		return <Nav.item className='save saved'>saved.</Nav.item>;
-	},
-
-	handleAutoSave : function(){
-		if(this.warningTimer) clearTimeout(this.warningTimer);
-		this.setState((prevState)=>({
-			autoSave        : !prevState.autoSave,
-			autoSaveWarning : prevState.autoSave
-		}), ()=>{
-			localStorage.setItem('AUTOSAVE_ON', JSON.stringify(this.state.autoSave));
-		});
-	},
-
-	setAutosaveWarning : function(){
-		setTimeout(()=>this.setState({ autoSaveWarning: false }), 4000);                           // 4 seconds to display
-		this.warningTimer = setTimeout(()=>{this.setState({ autoSaveWarning: true });}, 900000);   // 15 minutes between warnings
-		this.warningTimer;
-	},
-
-	errorReported : function(error) {
-		this.setState({
-			error
-		});
-	},
-
-	renderAutoSaveButton : function(){
-		return <Nav.item onClick={this.handleAutoSave}>
-			Autosave <i className={this.state.autoSave ? 'fas fa-power-off active' : 'fas fa-power-off'}></i>
-		</Nav.item>;
-	},
-
 	processShareId : function() {
 		return this.state.brew.googleId && !this.state.brew.stubbed ?
 					 this.state.brew.googleId + this.state.brew.shareId :
@@ -427,7 +197,6 @@ const EditPage = createClass({
 	},
 
 	getRedditLink : function(){
-
 		const shareLink = this.processShareId();
 		const systems = this.props.brew.systems.length > 0 ? ` [${this.props.brew.systems.join(' - ')}]` : '';
 		const title = `${this.props.brew.title} ${systems}`;
@@ -438,32 +207,12 @@ 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 <Navbar>
+		return <>
-			<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} 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
@@ -478,58 +227,26 @@ 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
-			<Meta name='robots' content='noindex, nofollow' />
+							className="editPage"
-			{this.renderNavbar()}
+							errorState={this.state.error}
-
+							parent={this}
-			{this.props.brew.lock && <LockNotification shareId={this.props.brew.shareId} message={this.props.brew.lock.editMessage} reviewRequested={this.props.brew.lock.reviewRequested} />}
+							brew={this.state.brew}
-			<div className='content'>
+							renderUniqueNav={this.renderNavbar}
-				<SplitPane onDragFinish={this.handleSplitMove}>
+							performSave={this.save}
-					<Editor
+							recentStorageKey='edit'>
-						ref={this.editor}
+							{(welcomeText, brew, save) => {
-						brew={this.state.brew}
+								return <>
-						onTextChange={this.handleTextChange}
+									<Meta name='robots' content='noindex, nofollow' />
-						onStyleChange={this.handleStyleChange}
+									{this.props.brew.lock && <LockNotification shareId={brew.shareId} message={brew.lock.editMessage} reviewRequested={brew.lock.reviewRequested} />}
-						onSnipChange={this.handleSnipChange}
+								</>
-						onMetaChange={this.handleMetaChange}
+							}}
-						reportError={this.errorReported}
+						</BaseEditPage>;
-						renderer={this.state.brew.renderer}
-						userThemes={this.props.userThemes}
-						themeBundle={this.state.themeBundle}
-						updateBrew={this.updateBrew}
-						onCursorPageChange={this.handleEditorCursorPageChange}
-						onViewPageChange={this.handleEditorViewPageChange}
-						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-						currentBrewRendererPageNum={this.state.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}
-						allowPrint={true}
-					/>
-				</SplitPane>
-			</div>
-		</div>;
 	}
 });
 

client/homebrew/pages/homePage/homePage.jsx

@@ -1,142 +1,54 @@
-import './homePage.less';
+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 React                           from 'react';
-import { useEffect, useState, useRef } from 'react';
-import request                         from '../../utils/request-middleware.js';
-import { Meta }                        from 'vitreum/headtags';
 
-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';
 
-import SplitPane                       from 'client/components/splitPane/splitPane.jsx';
+const BaseEditPage = require('../basePages/editPage/editPage.jsx');
-import Editor                          from '../../editor/editor.jsx';
-import BrewRenderer                    from '../../brewRenderer/brewRenderer.jsx';
 
-import { DEFAULT_BREW }                from '../../../../server/brewDefaults.js';
+const { DEFAULT_BREW } = require('../../../../server/brewDefaults.js');
 
-const HomePage =(props)=>{
+const HomePage = createClass({
-	props = {
+	displayName     : 'HomePage',
-		brew : DEFAULT_BREW,
+	getDefaultProps : function() {
-		ver  : '0.0.0',
+		return {
-    ...props
+			brew : DEFAULT_BREW
-  };
+		};
+	},
 
-	const [brew                      , setBrew]                       = useState(props.brew);
+	save : function(brew){
-	const [welcomeText               , setWelcomeText]                = useState(props.brew.text);
+		return request
-	const [error                     , setError]                      = useState(undefined);
+			.post('/api')
-	const [currentEditorViewPageNum  , setCurrentEditorViewPageNum]   = useState(1);
-	const [currentEditorCursorPageNum, setCurrentEditorCursorPageNum] = useState(1);
-	const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1);
-	const [themeBundle               , setThemeBundle]                = useState({});
-	const [isSaving                  , setIsSaving]                   = useState(false);
-
-	const editorRef = useRef(null);
-
-	useEffect(()=>{
-		fetchThemeBundle(setError, setThemeBundle, brew.renderer, brew.theme);
-	}, []);
-
-	const save = ()=>{
-		request.post('/api')
 			.send(brew)
-			.end((err, res)=>{
+			.then((res) => {
-				if(err) {
-					setError(err);
-					return;
-				}
 				const saved = res.body;
 				window.location = `/edit/${saved.editId}`;
 			});
-	};
+	},
 
-	const handleSplitMove = ()=>{
+	render : function(){
-		editorRef.current.update();
+		return  <BaseEditPage
-	};
+							{...this.props}
+							className="homePage"
+							parent={this}
+							performSave={this.save}>
+							{(welcomeText, brew, save) => {
+								return <>
+									<Meta name='google-site-verification' content='NwnAQSSJZzAT7N-p5MY6ydQ7Njm67dtbu73ZSyE5Fy4' />
+									<div className={cx('floatingSaveButton', { show: welcomeText != brew.text })} onClick={save}>
+										Save current <i className='fas fa-save' />
+									</div>
 
-	const handleEditorViewPageChange = (pageNumber)=>{
+									<a href='/new' className='floatingNewButton'>
-		setCurrentEditorViewPageNum(pageNumber);
+										Create your own <i className='fas fa-magic' />
-	};
+									</a>
-	
+								</>
-	const handleEditorCursorPageChange = (pageNumber)=>{
+							}}
-		setCurrentEditorCursorPageNum(pageNumber);
+						</BaseEditPage>
-	};
+	}
-	
+});
-	const handleBrewRendererPageChange = (pageNumber)=>{
-		setCurrentBrewRendererPageNum(pageNumber);
-	};
-
-	const handleTextChange = (text)=>{
-		setBrew((prevBrew) => ({ ...prevBrew, text }));
-	};
-
-	const clearError = ()=>{
-		setError(null);
-		setIsSaving(false);
-	};
-
-	const renderNavbar = ()=>{
-		return <Navbar ver={props.ver}>
-			<Nav.section>
-				{error ?
-					<ErrorNavItem error={error} clearError={clearError}></ErrorNavItem> :
-					null
-				}
-				<NewBrewItem />
-				<HelpNavItem />
-				<VaultNavItem />
-				<RecentNavItem />
-				<AccountNavItem />
-			</Nav.section>
-		</Navbar>;
-	};
-
-	return (
-		<div className='homePage sitePage'>
-			<Meta name='google-site-verification' content='NwnAQSSJZzAT7N-p5MY6ydQ7Njm67dtbu73ZSyE5Fy4' />
-			{renderNavbar()}
-			<div className='content'>
-				<SplitPane onDragFinish={handleSplitMove}>
-					<Editor
-						ref={editorRef}
-						brew={brew}
-						onTextChange={handleTextChange}
-						renderer={brew.renderer}
-						showEditButtons={false}
-						themeBundle={themeBundle}
-						onCursorPageChange={handleEditorCursorPageChange}
-						onViewPageChange={handleEditorViewPageChange}
-						currentEditorViewPageNum={currentEditorViewPageNum}
-						currentEditorCursorPageNum={currentEditorCursorPageNum}
-						currentBrewRendererPageNum={currentBrewRendererPageNum}
-					/>
-					<BrewRenderer
-						text={brew.text}
-						style={brew.style}
-						renderer={brew.renderer}
-						onPageChange={handleBrewRendererPageChange}
-						currentEditorViewPageNum={currentEditorViewPageNum}
-						currentEditorCursorPageNum={currentEditorCursorPageNum}
-						currentBrewRendererPageNum={currentBrewRendererPageNum}
-						themeBundle={themeBundle}
-					/>
-				</SplitPane>
-			</div>
-			<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>
-		</div>
-	)
-};
 
 module.exports = HomePage;

client/homebrew/pages/newPage/newPage.jsx

@@ -1,61 +1,31 @@
 /*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
-import './newPage.less';
+require('./newPage.less');
+const React = require('react');
+const createClass = require('create-react-class');
+import request from '../../utils/request-middleware.js';
 
-import React, { useState, useEffect, useRef } from 'react';
+const Nav = require('naturalcrit/nav/nav.jsx');
-import request                                from '../../utils/request-middleware.js';
-import Markdown                               from 'naturalcrit/markdown.js';
 
-import Nav                       from 'naturalcrit/nav/nav.jsx';
+const BaseEditPage = require('../basePages/editPage/editPage.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';
 
-import SplitPane    from 'client/components/splitPane/splitPane.jsx';
+const { DEFAULT_BREW } = require('../../../../server/brewDefaults.js');
-import Editor       from '../../editor/editor.jsx';
-import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
-
-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';
 const SAVEKEY  = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${global.account?.username || ''}`;
 
-const NewPage = (props)=>{
+const NewPage = createClass({
-	props = {
+	displayName     : 'NewPage',
-		brew : DEFAULT_BREW,
+	getDefaultProps : function() {
-		...props
+		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);
 		};
-	}, []);
+	},
 
-	const loadBrew = ()=>{
+	loadBrew : function(brew, setBrew, setSaveGoogle) {
-		const brew = { ...currentBrew };
 		if(!brew.shareId && typeof window !== 'undefined') { //Load from localStorage if in client browser
+			//TODO: Move localstorage handling to BaseEditPage?
 			const brewStorage  = localStorage.getItem(BREWKEY);
 			const styleStorage = localStorage.getItem(STYLEKEY);
 			const metaStorage  = JSON.parse(localStorage.getItem(METAKEY));
@@ -69,183 +39,42 @@ const NewPage = (props)=>{
 
 		const saveStorage = localStorage.getItem(SAVEKEY) || 'HOMEBREWERY';
 
-		setCurrentBrew(brew);
+		setBrew(brew);
-		setSaveGoogle(saveStorage == 'GOOGLE-DRIVE' && saveGoogle);
+		setSaveGoogle(saveStorage == 'GOOGLE-DRIVE' && this.state.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 }));
+		localStorage.setItem(METAKEY, JSON.stringify({ 'renderer': brew.renderer, 'theme': brew.theme, 'lang': brew.lang }));
-		if(window.location.pathname !== '/new')
+		if(window.location.pathname != '/new') {
 			window.history.replaceState({}, window.location.title, '/new/');
-	};
-
-	const handleControlKeys = (e)=>{
-		if(!(e.ctrlKey || e.metaKey)) return;
-		const S_KEY = 83;
-		const P_KEY = 80;
-		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();
 		}
-	};
+	},
 
-	const handleSplitMove = ()=>{
+	save : async function(brew, saveGoogle){
-		editorRef.current.update();
+		brew.pageCount=((brew.renderer=='legacy' ? brew.text.match(/\\page/g) : brew.text.match(/^\\page$/gm)) || []).length + 1;
-	};
+		return request
-
-	const handleEditorViewPageChange = (pageNumber)=>{
-		setCurrentEditorViewPageNum(pageNumber);
-	};
-
-	const handleEditorCursorPageChange = (pageNumber)=>{
-		setCurrentEditorCursorPageNum(pageNumber);
-	};
-
-	const handleBrewRendererPageChange = (pageNumber)=>{
-		setCurrentBrewRendererPageNum(pageNumber);
-	};
-
-	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);
-
-		setHTMLErrors(HTMLErrors);
-		setCurrentBrew((prevBrew)=>({ ...prevBrew, text }));
-		localStorage.setItem(BREWKEY, text);
-	};
-
-	const handleStyleChange = (style)=>{
-		setCurrentBrew((prevBrew)=>({ ...prevBrew, style }));
-		localStorage.setItem(STYLEKEY, style);
-	};
-
-	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);
-
-		setHTMLErrors(HTMLErrors);
-		setCurrentBrew((prevBrew)=>({ ...prevBrew, snippets: snippet }));
-	};
-
-	const handleMetaChange = (metadata, field = undefined)=>{
-		if(field === 'theme' || field === 'renderer')
-			fetchThemeBundle(setError, setThemeBundle, metadata.renderer, metadata.theme);
-
-		setCurrentBrew((prev)=>({ ...prev, ...metadata }));
-		localStorage.setItem(METAKEY, JSON.stringify({
-			renderer : metadata.renderer,
-			theme    : metadata.theme,
-			lang     : metadata.lang
-		}));
-	};
-
-	const save = async ()=>{
-  	setIsSaving(true);
-
-		const updatedBrew = { ...currentBrew };
-		splitTextStyleAndMetadata(updatedBrew);
-
-		const pageRegex = updatedBrew.renderer === 'legacy' ? /\\page/g : /^\\page$/gm;
-		updatedBrew.pageCount = (updatedBrew.text.match(pageRegex) || []).length + 1;
-
-		const res = await request
 			.post(`/api${saveGoogle ? '?saveToGoogle=true' : ''}`)
-			.send(updatedBrew)
+			.send(brew)
-			.catch((err)=>{
+			.then((res) => {
-				setIsSaving(false);
+				//TODO: Move localstorage handling to BaseEditPage?
-				setError(err);
+				localStorage.removeItem(BREWKEY);
+				localStorage.removeItem(STYLEKEY);
+				localStorage.removeItem(METAKEY);
+				const saved = res.body;
+				window.location = `/edit/${saved.editId}`;
 			});
+	},
 
-		setIsSaving(false);
+	render : function(){
-		if(!res) return;
+		return  <BaseEditPage
-
+							{...this.props}
-		const savedBrew = res.body;
+							className="newPage"
-
+							parent={this}
-		localStorage.removeItem(BREWKEY);
+							performSave={this.save}
-		localStorage.removeItem(STYLEKEY);
+							loadBrew={this.loadBrew}>
-		localStorage.removeItem(METAKEY);
+						</BaseEditPage>;
-		window.location = `/edit/${savedBrew.editId}`;
+	}
-	};
+});
-
-	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={save}>
-				save
-			</Nav.item>;
-		}
-	};
-
-	const clearError = ()=>{
-		setError(null);
-		setIsSaving(false);
-	};
-
-	const renderNavbar = ()=>(
-		<Navbar>
-			<Nav.section>
-				<Nav.item className='brewTitle'>{currentBrew.title}</Nav.item>
-			</Nav.section>
-
-			<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={handleSplitMove}>
-					<Editor
-						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={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>
-		</div>
-	);
-};
 
 module.exports = NewPage;

client/homebrew/pages/sharePage/sharePage.jsx

@@ -17,11 +17,15 @@ const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpe
 const SharePage = (props)=>{
 	const { brew = DEFAULT_BREW_LOAD, disableMeta = false } = props;
 
-	const [themeBundle,                setThemeBundle]                = useState({});
+	const [state, setState] = useState({
-	const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1);
+		themeBundle                : {},
+		currentBrewRendererPageNum : 1,
+	});
 
 	const handleBrewRendererPageChange = useCallback((pageNumber)=>{
-		setCurrentBrewRendererPageNum(pageNumber);
+		setState((prevState)=>({
+			currentBrewRendererPageNum : pageNumber,
+			...prevState }));
 	}, []);
 
 	const handleControlKeys = (e)=>{
@@ -36,7 +40,11 @@ const SharePage = (props)=>{
 
 	useEffect(()=>{
 		document.addEventListener('keydown', handleControlKeys);
-		fetchThemeBundle(undefined, setThemeBundle, brew.renderer, brew.theme);
+		fetchThemeBundle(
+			{ setState },
+			brew.renderer,
+			brew.theme
+		);
 
 		return ()=>{
 			document.removeEventListener('keydown', handleControlKeys);
@@ -106,9 +114,9 @@ const SharePage = (props)=>{
 					lang={brew.lang}
 					renderer={brew.renderer}
 					theme={brew.theme}
-					themeBundle={themeBundle}
+					themeBundle={state.themeBundle}
 					onPageChange={handleBrewRendererPageChange}
-					currentBrewRendererPageNum={currentBrewRendererPageNum}
+					currentBrewRendererPageNum={state.currentBrewRendererPageNum}
 					allowPrint={true}
 				/>
 			</div>

client/homebrew/pages/userPage/userPage.jsx

@@ -39,14 +39,10 @@ const UserPage = (props)=>{
 		}] : [])
 	];
 
-	const clearError = ()=>{
-		setError(null);
-	};
-
 	const navItems = (
 		<Navbar>
 			<Nav.section>
-				{error && (<ErrorNavItem error={error} clearError={clearError}></ErrorNavItem>)}
+				{error && (<ErrorNavItem error={error} parent={null}></ErrorNavItem>)}
 				<NewBrew />
 				<HelpNavItem />
 				<VaultNavitem />

client/homebrew/utils/request-middleware.spec.js

@@ -1,74 +0,0 @@
-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');
-	});
-});

package-lock.json

@@ -63,9 +63,9 @@
         "written-number": "^0.11.1"
       },
       "devDependencies": {
-        "@stylistic/stylelint-plugin": "^4.0.0",
+        "@stylistic/stylelint-plugin": "^3.1.3",
         "babel-plugin-transform-import-meta": "^2.3.3",
-        "eslint": "^9.34.0",
+        "eslint": "^9.31.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.23.1",
+        "stylelint": "^16.22.0",
-        "stylelint-config-recess-order": "^7.2.0",
+        "stylelint-config-recess-order": "^7.1.0",
-        "stylelint-config-recommended": "^17.0.0",
+        "stylelint-config-recommended": "^16.0.0",
         "supertest": "^7.1.4"
       },
       "engines": {
@@ -1884,9 +1884,9 @@
       }
     },
     "node_modules/@csstools/media-query-list-parser": {
-      "version": "4.0.3",
+      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-4.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-3.0.1.tgz",
-      "integrity": "sha512-HAYH7d3TLRHDOUQK4mZKf9k9Ph/m8Akstg66ywKR4SFAigjs3yBiUeZtFxywiTm5moZMAp/5W/ZuFnNXXYLuuQ==",
+      "integrity": "sha512-HNo8gGD02kHmcbX6PvCoUuOQvn4szyB9ca63vZHKX5A81QytgDG4oxG4IaEfHTlEZSZ6MjPEMWIVU+zF2PZcgw==",
       "dev": true,
       "funding": [
         {
@@ -1898,13 +1898,12 @@
           "url": "https://opencollective.com/csstools"
         }
       ],
-      "license": "MIT",
       "engines": {
         "node": ">=18"
       },
       "peerDependencies": {
-        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-parser-algorithms": "^3.0.1",
-        "@csstools/css-tokenizer": "^3.0.4"
+        "@csstools/css-tokenizer": "^3.0.1"
       }
     },
     "node_modules/@dmsnell/diff-match-patch": {
@@ -2022,19 +2021,18 @@
       }
     },
     "node_modules/@eslint/config-helpers": {
-      "version": "0.3.1",
+      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.3.0.tgz",
-      "integrity": "sha512-xR93k9WhrDYpXHORXpxVL5oHj3Era7wo6k/Wd8/IsQNnZUTzkGS29lyn3nAT05v6ltUuTFVCCYDEGfy2Or/sPA==",
+      "integrity": "sha512-ViuymvFmcJi04qdZeDc2whTHryouGcDlaxPqarTD0ZE10ISpxGUVZGZDx4w01upyIynL3iu6IXH2bS1NhclQMw==",
       "dev": true,
-      "license": "Apache-2.0",
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
     "node_modules/@eslint/core": {
-      "version": "0.15.2",
+      "version": "0.14.0",
-      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.15.2.tgz",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.14.0.tgz",
-      "integrity": "sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==",
+      "integrity": "sha512-qIbV0/JZr7iSDjqAc60IqbLdsj9GDt16xQtWD+B78d/HAlvysGdZZ6rpJHGAc2T0FQx1X6thsSPdnoiGKdNtdg==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -2082,9 +2080,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "9.34.0",
+      "version": "9.31.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.34.0.tgz",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.31.0.tgz",
-      "integrity": "sha512-EoyvqQnBNsV1CWaEJ559rxXL4c8V92gxirbawSmVUOWXlsRxxQXl6LmCpdUblgxgSkDIqKnhzba2SjRTI/A5Rw==",
+      "integrity": "sha512-LOm5OVt7D4qiKCqoiPbA7LWmI+tbw1VbTUowBcUMgQSuM6poJufkFkYDcQpo5KfgD39TnNySV26QjOh7VFpSyw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -2104,13 +2102,13 @@
       }
     },
     "node_modules/@eslint/plugin-kit": {
-      "version": "0.3.5",
+      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.5.tgz",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.1.tgz",
-      "integrity": "sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==",
+      "integrity": "sha512-0J+zgWxHN+xXONWIyPWKFMgVuJoZuGiIFu8yxk7RJjxkzpGmyja5wRFqZIVtjDVOQpV+Rw0iOAjYPE2eQyjr0w==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "@eslint/core": "^0.15.2",
+        "@eslint/core": "^0.14.0",
         "levn": "^0.4.1"
       },
       "engines": {
@@ -2834,11 +2832,37 @@
       }
     },
     "node_modules/@keyv/serialize": {
-      "version": "1.1.0",
+      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@keyv/serialize/-/serialize-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/@keyv/serialize/-/serialize-1.0.3.tgz",
-      "integrity": "sha512-RlDgexML7Z63Q8BSaqhXdCYNBy/JQnqYIwxofUrNLGCblOMHp+xux2Q8nLMLlPpgHQPoU0Do8Z6btCpRBEqZ8g==",
+      "integrity": "sha512-qnEovoOp5Np2JDGonIDL6Ayihw0RhnRh6vxPuHo4RDn1UOzwEo4AeIfpL6UGIrsceWrCMiVPgwRjbHu4vYFc3g==",
       "dev": true,
-      "license": "MIT"
+      "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"
+      }
     },
     "node_modules/@mongodb-js/saslprep": {
       "version": "1.3.0",
@@ -2981,17 +3005,17 @@
       }
     },
     "node_modules/@stylistic/stylelint-plugin": {
-      "version": "4.0.0",
+      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/@stylistic/stylelint-plugin/-/stylelint-plugin-4.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/@stylistic/stylelint-plugin/-/stylelint-plugin-3.1.3.tgz",
-      "integrity": "sha512-CFwt3K4Y/7bygNCLCQ8Sy4Hzgbhxq3BsNW0FIuYxl17HD3ywptm54ocyeiLVRrk5jtz1Zwks7Xr9eiZt8SWHAw==",
+      "integrity": "sha512-85fsmzgsIVmyG3/GFrjuYj6Cz8rAM7IZiPiXCMiSMfoDOC1lOrzrXPDk24WqviAghnPqGpx8b0caK2PuewWGFg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-parser-algorithms": "^3.0.1",
-        "@csstools/css-tokenizer": "^3.0.4",
+        "@csstools/css-tokenizer": "^3.0.1",
-        "@csstools/media-query-list-parser": "^4.0.3",
+        "@csstools/media-query-list-parser": "^3.0.1",
-        "postcss": "^8.5.6",
+        "is-plain-object": "^5.0.0",
-        "postcss-selector-parser": "^7.1.0",
+        "postcss": "^8.4.41",
+        "postcss-selector-parser": "^6.1.2",
         "postcss-value-parser": "^4.2.0",
         "style-search": "^0.1.0"
       },
@@ -2999,7 +3023,7 @@
         "node": "^18.12 || >=20.9"
       },
       "peerDependencies": {
-        "stylelint": "^16.22.0"
+        "stylelint": "^16.8.0"
       }
     },
     "node_modules/@tybys/wasm-util": {
@@ -4651,24 +4675,22 @@
       }
     },
     "node_modules/cacheable": {
-      "version": "1.10.3",
+      "version": "1.10.1",
-      "resolved": "https://registry.npmjs.org/cacheable/-/cacheable-1.10.3.tgz",
+      "resolved": "https://registry.npmjs.org/cacheable/-/cacheable-1.10.1.tgz",
-      "integrity": "sha512-M6p10iJ/VT0wT7TLIGUnm958oVrU2cUK8pQAVU21Zu7h8rbk/PeRtRWrvHJBql97Bhzk3g1N6+2VKC+Rjxna9Q==",
+      "integrity": "sha512-Fa2BZY0CS9F0PFc/6aVA6tgpOdw+hmv9dkZOlHXII5v5Hw+meJBIWDcPrG9q/dXxGcNbym5t77fzmawrBQfTmQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "hookified": "^1.10.0",
-        "keyv": "^5.4.0"
+        "keyv": "^5.3.4"
       }
     },
     "node_modules/cacheable/node_modules/keyv": {
-      "version": "5.5.0",
+      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/keyv/-/keyv-5.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-5.3.4.tgz",
-      "integrity": "sha512-QG7qR2tijh1ftOvClut4YKKg1iW6cx3GZsKoGyJPxHkGWK9oJhG9P3j5deP0QQOGDowBMVQFaP+Vm4NpGYvmIQ==",
+      "integrity": "sha512-ypEvQvInNpUe+u+w8BIcPkQvEqXquyyibWE/1NB5T2BTzIpS5cGEV1LZskDzPSTvNAaT4+5FutvzlvnkxOSKlw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "@keyv/serialize": "^1.1.0"
+        "@keyv/serialize": "^1.0.3"
       }
     },
     "node_modules/cached-path-relative": {
@@ -4863,16 +4885,13 @@
       }
     },
     "node_modules/cipher-base": {
-      "version": "1.0.6",
+      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.6.tgz",
+      "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz",
-      "integrity": "sha512-3Ek9H3X6pj5TgenXYtNWdaBon1tgYCaebd+XPg0keyjEbEfkD4KkmAxkQ/i1vYvxdcT5nscLBfq9VJRmCBcFSw==",
+      "integrity": "sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==",
       "license": "MIT",
       "dependencies": {
-        "inherits": "^2.0.4",
+        "inherits": "^2.0.1",
-        "safe-buffer": "^5.2.1"
+        "safe-buffer": "^5.0.1"
-      },
-      "engines": {
-        "node": ">= 0.10"
       }
     },
     "node_modules/cjs-module-lexer": {
@@ -6061,20 +6080,20 @@
       }
     },
     "node_modules/eslint": {
-      "version": "9.34.0",
+      "version": "9.31.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.34.0.tgz",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.31.0.tgz",
-      "integrity": "sha512-RNCHRX5EwdrESy3Jc9o8ie8Bog+PeYvvSR8sDGoZxNFTvZ4dlxUB3WzQ3bQMztFrSRODGrLLj8g6OFuGY/aiQg==",
+      "integrity": "sha512-QldCVh/ztyKJJZLr4jXNUByx3gR+TDYZCRXEktiZoUR3PGy4qCmSbkxcIle8GEwGpb5JBZazlaJ/CxLidXdEbQ==",
       "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.1",
+        "@eslint/config-helpers": "^0.3.0",
-        "@eslint/core": "^0.15.2",
+        "@eslint/core": "^0.15.0",
         "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "9.34.0",
+        "@eslint/js": "9.31.0",
-        "@eslint/plugin-kit": "^0.3.5",
+        "@eslint/plugin-kit": "^0.3.1",
         "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@humanwhocodes/retry": "^0.4.2",
@@ -6239,6 +6258,19 @@
         "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",
@@ -7616,11 +7648,10 @@
       }
     },
     "node_modules/hookified": {
-      "version": "1.11.0",
+      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/hookified/-/hookified-1.11.0.tgz",
+      "resolved": "https://registry.npmjs.org/hookified/-/hookified-1.10.0.tgz",
-      "integrity": "sha512-aDdIN3GyU5I6wextPplYdfmWCo+aLmjjVbntmX6HLD5RCi/xKsivYEBhnRD+d9224zFf008ZpLMPlWF0ZodYZw==",
+      "integrity": "sha512-dJw0492Iddsj56U1JsSTm9E/0B/29a1AuoSLRAte8vQg/kaTGF3IgjEWT8c8yG4cC10+HisE1x5QAwR0Xwc+DA==",
-      "dev": true,
+      "dev": true
-      "license": "MIT"
     },
     "node_modules/html-encoding-sniffer": {
       "version": "4.0.0",
@@ -11542,11 +11573,10 @@
       }
     },
     "node_modules/postcss-selector-parser": {
-      "version": "7.1.0",
+      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
-      "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -12530,23 +12560,16 @@
       "license": "ISC"
     },
     "node_modules/sha.js": {
-      "version": "2.4.12",
+      "version": "2.4.11",
-      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.12.tgz",
+      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
-      "integrity": "sha512-8LzC5+bvI45BjpfXU8V5fdU2mfeKiQe1D1gIMn7XUlF3OTUrpdJpPPH4EMAnF0DsHHdSZqCdSss5qCmJKuiO3w==",
+      "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
       "license": "(MIT AND BSD-3-Clause)",
       "dependencies": {
-        "inherits": "^2.0.4",
+        "inherits": "^2.0.1",
-        "safe-buffer": "^5.2.1",
+        "safe-buffer": "^5.0.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": {
@@ -13283,9 +13306,9 @@
       "license": "ISC"
     },
     "node_modules/stylelint": {
-      "version": "16.23.1",
+      "version": "16.22.0",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.23.1.tgz",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.22.0.tgz",
-      "integrity": "sha512-dNvDTsKV1U2YtiUDfe9d2gp902veFeo3ecCWdGlmLm2WFrAV0+L5LoOj/qHSBABQwMsZPJwfC4bf39mQm1S5zw==",
+      "integrity": "sha512-SVEMTdjKNV4ollUrIY9ordZ36zHv2/PHzPjfPMau370MlL2VYXeLgSNMMiEbLGRO8RmD2R8/BVUeF2DfnfkC0w==",
       "dev": true,
       "funding": [
         {
@@ -13312,7 +13335,7 @@
         "debug": "^4.4.1",
         "fast-glob": "^3.3.3",
         "fastest-levenshtein": "^1.0.16",
-        "file-entry-cache": "^10.1.3",
+        "file-entry-cache": "^10.1.1",
         "global-modules": "^2.0.0",
         "globby": "^11.1.0",
         "globjoin": "^0.1.4",
@@ -13346,20 +13369,19 @@
       }
     },
     "node_modules/stylelint-config-recess-order": {
-      "version": "7.2.0",
+      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-recess-order/-/stylelint-config-recess-order-7.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recess-order/-/stylelint-config-recess-order-7.1.0.tgz",
-      "integrity": "sha512-3Y97dhsWkUHFKRLGNLF6LE5JuNB2EVAZKYJ41wBRK4gplYdk7eHhSIwE24hanu0AoNmv5534Djip70pE+y5qkA==",
+      "integrity": "sha512-rFc4Z6SCGgEohr1khsmAZ83X56Tdi2dHY/GB7VT3qJkpKU1V2w+mYlK+b7Za5gpsxEng3jnb4FzWyIl/KTH0AQ==",
       "dev": true,
-      "license": "ISC",
       "peerDependencies": {
         "stylelint": ">=16.18",
         "stylelint-order": ">=7"
       }
     },
     "node_modules/stylelint-config-recommended": {
-      "version": "17.0.0",
+      "version": "16.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-17.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-16.0.0.tgz",
-      "integrity": "sha512-WaMSdEiPfZTSFVoYmJbxorJfA610O0tlYuU2aEwY33UQhSPgFbClrVJYWvy3jGJx+XW37O+LyNLiZOEXhKhJmA==",
+      "integrity": "sha512-4RSmPjQegF34wNcK1e1O3Uz91HN8P1aFdFzio90wNK9mjgAI19u5vsU868cVZboKzCaa5XbpvtTzAAGQAxpcXA==",
       "dev": true,
       "funding": [
         {
@@ -13376,7 +13398,7 @@
         "node": ">=18.12.0"
       },
       "peerDependencies": {
-        "stylelint": "^16.23.0"
+        "stylelint": "^16.16.0"
       }
     },
     "node_modules/stylelint-order": {
@@ -13396,6 +13418,29 @@
         "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",
@@ -13427,23 +13472,21 @@
       "license": "MIT"
     },
     "node_modules/stylelint/node_modules/file-entry-cache": {
-      "version": "10.1.3",
+      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-10.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-10.1.1.tgz",
-      "integrity": "sha512-D+w75Ub8T55yor7fPgN06rkCAUbAYw2vpxJmmjv/GDAcvCnv9g7IvHhIZoxzRZThrXPFI2maeY24pPbtyYU7Lg==",
+      "integrity": "sha512-zcmsHjg2B2zjuBgjdnB+9q0+cWcgWfykIcsDkWDB4GTPtl1eXUA+gTI6sO0u01AqK3cliHryTU55/b2Ow1hfZg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "flat-cache": "^6.1.12"
+        "flat-cache": "^6.1.10"
       }
     },
     "node_modules/stylelint/node_modules/flat-cache": {
-      "version": "6.1.12",
+      "version": "6.1.11",
-      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-6.1.12.tgz",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-6.1.11.tgz",
-      "integrity": "sha512-U+HqqpZPPXP5d24bWuRzjGqVqUcw64k4nZAbruniDwdRg0H10tvN7H6ku1tjhA4rg5B9GS3siEvwO2qjJJ6f8Q==",
+      "integrity": "sha512-zfOAns94mp7bHG/vCn9Ru2eDCmIxVQ5dELUHKjHfDEOJmHNzE+uGa6208kfkgmtym4a0FFjEuFksCXFacbVhSg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "cacheable": "^1.10.3",
+        "cacheable": "^1.10.1",
         "flatted": "^3.3.3",
         "hookified": "^1.10.0"
       }
@@ -13457,6 +13500,20 @@
         "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",

package.json

@@ -136,9 +136,9 @@
     "written-number": "^0.11.1"
   },
   "devDependencies": {
-    "@stylistic/stylelint-plugin": "^4.0.0",
+    "@stylistic/stylelint-plugin": "^3.1.3",
     "babel-plugin-transform-import-meta": "^2.3.3",
-    "eslint": "^9.34.0",
+    "eslint": "^9.31.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.23.1",
+    "stylelint": "^16.22.0",
-    "stylelint-config-recess-order": "^7.2.0",
+    "stylelint-config-recess-order": "^7.1.0",
-    "stylelint-config-recommended": "^17.0.0",
+    "stylelint-config-recommended": "^16.0.0",
     "supertest": "^7.1.4"
   }
 }

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 = {