Move main component rendering to common hook

client/homebrew/utils/commonEditPageFunctions.jsx

@@ -3,6 +3,13 @@ import { printCurrentBrew, fetchThemeBundle } from '@shared/helpers.js';
 import _                                      from 'lodash';
 import Nav                                    from '@navbar/nav.jsx';
 
+import Headtags         from '@vitreum/headtags.js';
+import SplitPane        from '@components/splitPane/splitPane.jsx';
+import Editor           from '../editor/editor.jsx';
+import BrewRenderer     from '../brewRenderer/brewRenderer.jsx';
+import LockNotification from '../pages/editPage/lockNotification/lockNotification.jsx';
+const Meta = Headtags.Meta;
+
 const AUTOSAVE_KEY = 'HB_editor_autoSaveOn';
 
 const SAVE_TIMEOUT                  = 10000;  //Autosave 10 seconds after last change
@@ -13,7 +20,6 @@ export default function useCommonEditPageFunctions(dependencies) {
 	const {
 		saveGoogle,
 		setError,
-		setThemeBundle,
 		HTMLErrors,
 		setHTMLErrors,
 		currentBrew,
@@ -25,9 +31,12 @@ export default function useCommonEditPageFunctions(dependencies) {
 		METAKEY,
 		hbfm,
 		sandbox,
+		showFloatingButtons,
 		lastSavedBrew,
-		editorRef,
 		save,
+		renderNavbar,
+		pageName,
+		userThemes = {}
 	} = dependencies;
 
 	const [isSaving, setIsSaving]           = useState(false);
@@ -35,10 +44,16 @@ export default function useCommonEditPageFunctions(dependencies) {
 	const [autoSaveEnabled, setAutoSaveEnabled]    = useState(!sandbox);
 	const [warnUnsavedChanges, setWarnUnsavedChanges] = useState(true);
 	const [unsavedChanges, setUnsavedChanges]     = useState(false);
+	const [themeBundle, setThemeBundle]                = useState({});
+
+	const [currentEditorViewPageNum, setCurrentEditorViewPageNum] = useState(1);
+	const [currentEditorCursorPageNum, setCurrentEditorCursorPageNum] = useState(1);
+	const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1);
 
 	const unsavedChangesRef  = useRef(unsavedChanges); // onBeforeUnload lives outside React and needs ref to unsavedChanges
 	const warnUnsavedTimeout = useRef(null);           // timers live outside React and need ref to consistently track time
 	const saveTimeout        = useRef(null);
+	const editorRef          = useRef(null);
 
 	//==--------- Page setup ----------==//
 	useEffect(()=>{
@@ -171,6 +186,67 @@ export default function useCommonEditPageFunctions(dependencies) {
 		return <Nav.item className='save saved'>saved</Nav.item>;
 	};
 
+	//TODO: Candidate for removal; only used in editPage, so may not be necessary
+	const updateBrew = (newData)=>setCurrentBrew((prevBrew)=>({
+		...prevBrew,
+		style    : newData.style,
+		text     : newData.text,
+		snippets : newData.snippets
+	}));
+
+	const renderFloatingSaveButtons = ()=>(
+		<>
+			<div className={`floatingSaveButton${unsavedChanges ? ' show' : ''}`} onClick={()=>trySave(true, true, saveGoogle)}>
+				Save current <i className='fas fa-save' />
+			</div>
+
+			<a href='/new' className='floatingNewButton'>
+				Create your own <i className='fas fa-magic' />
+			</a>
+		</>
+	);
+
+	const renderPanels = ()=>(
+		<div className= {`${pageName} sitePage`}>
+			<Meta name='google-site-verification' content='NwnAQSSJZzAT7N-p5MY6ydQ7Njm67dtbu73ZSyE5Fy4' />
+			{(pageName == 'editPage') && <Meta name='robots' content='noindex, nofollow' />}
+			{renderNavbar()}
+			{currentBrew.lock && <LockNotification shareId={currentBrew.shareId} message={currentBrew.lock.editMessage} reviewRequested={currentBrew.lock.reviewRequested}/>}
+			<div className='content'>
+				<SplitPane onDragFinish={handleSplitMove}>
+					<Editor
+						ref={editorRef}
+						brew={currentBrew}
+						onBrewChange={handleBrewChange}
+						reportError={setError}
+						renderer={currentBrew.renderer}
+						userThemes={userThemes}
+						showEditButtons={false}
+						themeBundle={themeBundle}
+						updateBrew={updateBrew}
+						onCursorPageChange={setCurrentEditorCursorPageNum}
+						onViewPageChange={setCurrentEditorViewPageNum}
+						currentEditorViewPageNum={currentEditorViewPageNum}
+						currentEditorCursorPageNum={currentEditorCursorPageNum}
+						currentBrewRendererPageNum={currentBrewRendererPageNum}
+					/>
+					<BrewRenderer
+						lang={currentBrew.lang}
+						text={currentBrew.text}
+						style={currentBrew.style}
+						renderer={currentBrew.renderer}
+						themeBundle={themeBundle}
+						errors={HTMLErrors}
+						onPageChange={setCurrentBrewRendererPageNum}
+						currentEditorCursorPageNum={currentEditorCursorPageNum}
+						allowPrint={true} //TODO: candidate for cleanup. Homepage only place where allowPrint = false. Vote OK to allow print everywhere
+					/>
+				</SplitPane>
+			</div>
+			{showFloatingButtons && renderFloatingSaveButtons()}
+		</div>
+	);
+
 	return {
 		handleSplitMove,
 		handleBrewChange,
@@ -178,7 +254,9 @@ export default function useCommonEditPageFunctions(dependencies) {
 		clearError,
 		trySave,
 		renderSaveButton,
+		renderPanels,
 		autoSaveEnabled,
 		unsavedChanges,
+		currentBrewRendererPageNum
 	};
 }