Moving mount/unmount over. Missing states and imports.

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

@@ -11,6 +11,15 @@ 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';
@@ -87,6 +96,39 @@ const BaseEditPage = (props)=>{
 		setError(null);
 		setIsSaving(false);
 	};
+
+	const save = async ()=>{
+		setIsSaving(true);
+		await props.performSave(brew, saveGoogle)
+		.catch((err)=>{
+			setError(err);
+		});
+		setIsSaving(false)
+	};
+
+	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();
+		}
+	};
+
+	useEffect(() => {
+		props.loadBrew?.(brew, setBrew, setSaveGoogle);  //Initial load from localStorage/etc.
+
+		document.addEventListener('keydown', handleControlKeys);
+		return document.removeEventListener('keydown', handleControlKeys);
+	}, []);
+
+	useEffect(() => {
+		fetchThemeBundle(setError, setThemeBundle, brew.renderer, brew.theme);
+	}, [brew.renderer, brew.theme]);
+
 	return (
 		<div className={`sitePage ${props.className || ''}`}>
 			<Navbar>
@@ -94,7 +136,13 @@ const BaseEditPage = (props)=>{
 					<Nav.item className='brewTitle'>{props.brew.title}</Nav.item>
 				</Nav.section>
 				<Nav.section>
-					{props.navButtons}
+					{error
+						? <ErrorNavItem error={error} clearError={clearError}></ErrorNavItem>
+						: props.saveButton?.(save, isSaving)
+					}
+					{props.renderUniqueNav?.()}
+				</Nav.section>
+				<Nav.section>
 					<PrintNavItem />
 					<NewBrewItem />
 					<HelpNavItem />

client/homebrew/pages/homePage/homePage.jsx

@@ -5,14 +5,9 @@ const cx = require('classnames');
 import request from '../../utils/request-middleware.js';
 const { Meta } = require('vitreum/headtags');
 
-const Nav = require('naturalcrit/nav/nav.jsx');
+
-const ErrorNavItem = require('../../navbar/error-navitem.jsx');
-const { fetchThemeBundle } = require('../../../../shared/helpers.js');
 
 const BaseEditPage = require('../basePages/editPage/editPage.jsx');
-const SplitPane = require('client/components/splitPane/splitPane.jsx');
-const Editor = require('../../editor/editor.jsx');
-const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
 const { DEFAULT_BREW } = require('../../../../server/brewDefaults.js');
 
@@ -24,58 +19,20 @@ const HomePage = createClass({
 		};
 	},
 
-	editor : React.createRef(null),
+	save : function(brew){
-
+		return request
-	componentDidMount : function() {
+			.post('/api')
-		fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme);
+			.send(brew)
-	},
+			.then((res) => {
-
+				const saved = res.body;
-	save : function(){
+				window.location = `/edit/${saved.editId}`;
-		this.setState({
-			isSaving : true
-		});
-
-		request.post('/api')
-			.send(this.state.brew)
-			.end((err, res)=>{
-				if(err) {
-					this.setState({ error: err });
-					return;
-				}
-				const brew = res.body;
-				window.location = `/edit/${brew.editId}`;
-			})
-			.catch((err)=>{
-				this.setState({ isSaving: false, error: err });
 			});
 	},
-	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 <>
-			<Nav.section>
-				{this.state.error ?
-					<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
-					null
-				}
-			</Nav.section>
-			</>;
-	},
 
 	render : function(){
 		return <BaseEditPage
+							{...this.props}
 							className="homePage"
-							errorState={this.state.error}
 							parent={this}
 							performSave={this.save}
 						>

client/homebrew/pages/newPage/newPage.jsx

@@ -4,24 +4,16 @@ const React = require('react');
 const createClass = require('create-react-class');
 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');
 
 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');
 
 const { DEFAULT_BREW } = require('../../../../server/brewDefaults.js');
-const { printCurrentBrew, fetchThemeBundle } = require('../../../../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 = createClass({
 	displayName     : 'NewPage',
@@ -31,37 +23,24 @@ const NewPage = createClass({
 		};
 	},
 
-
+	loadBrew : function(brew, setBrew, setSaveGoogle) {
-	editor : React.createRef(null),
+		if(!brew.shareId && typeof window !== 'undefined') { //Load from localStorage if in client browser
-
+			//TODO: Move localstorage handling to BaseEditPage?
-	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 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.text     = brewStorage           ?? brew.text;
-			brew.style = styleStorage ?? brew.style;
+			brew.style    = styleStorage          ?? brew.style;
-			// brew.title = metaStorage?.title || this.state.brew.title;
-			// brew.description = metaStorage?.description || this.state.brew.description;
 			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({
+		setBrew(brew);
-			brew       : brew,
+		setSaveGoogle(saveStorage == 'GOOGLE-DRIVE' && this.state.saveGoogle);
-			saveGoogle : (saveStorage == 'GOOGLE-DRIVE' && this.state.saveGoogle)
-		});
-
-		fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme);
 
 		localStorage.setItem(BREWKEY, brew.text);
 		if(brew.style)
@@ -71,67 +50,38 @@ const NewPage = createClass({
 			window.history.replaceState({}, window.location.title, '/new/');
 		}
 	},
-	componentWillUnmount : function() {
-		document.removeEventListener('keydown', this.handleControlKeys);
-	},
-
-
-	save : async function(){
-		this.setState({
-			isSaving : 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);
-		}
 
+	save : async function(brew, saveGoogle){
 		brew.pageCount=((brew.renderer=='legacy' ? brew.text.match(/\\page/g) : brew.text.match(/^\\page$/gm)) || []).length + 1;
-		const res = await request
+		return request
-			.post(`/api${this.state.saveGoogle ? '?saveToGoogle=true' : ''}`)
+			.post(`/api${saveGoogle ? '?saveToGoogle=true' : ''}`)
 			.send(brew)
-			.catch((err)=>{
+			.then((res) => {
-				this.setState({ isSaving: false, error: err });
+				//TODO: Move localstorage handling to BaseEditPage?
+				localStorage.removeItem(BREWKEY);
+				localStorage.removeItem(STYLEKEY);
+				localStorage.removeItem(METAKEY);
+				const saved = res.body;
+				window.location = `/edit/${saved.editId}`;
 			});
-		if(!res) return;
-
-		brew = res.body;
-		localStorage.removeItem(BREWKEY);
-		localStorage.removeItem(STYLEKEY);
-		localStorage.removeItem(METAKEY);
-		window.location = `/edit/${brew.editId}`;
 	},
 
-	renderSaveButton : function(){
+	renderSaveButton : function(save, isSaving){
-		if(this.state.isSaving){
+		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 <>
-			<Nav.section>
-				{this.state.error ?
-					<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
-					this.renderSaveButton()
-				}
-			</Nav.section>
-		</>;
-	},
-
 	render : function(){
 		return <BaseEditPage
+							{...this.props}
 							className="newPage"
-							errorState={this.state.error}
 							parent={this}
 							saveButton={this.renderSaveButton}
 							performSave={this.save}