Merge pull request #5080 from naturalcrit/new/edit/home-more-cleanup

New/Edit/Home Move main component render to common hook

client/homebrew/pages/editPage/editPage.jsx

@@ -11,10 +11,6 @@ import { DEFAULT_BREW_LOAD }                  from '../../../../server/brewDefau
 
 import useCommonEditPageFunctions from '../../utils/commonEditPageFunctions.jsx';
 
-import SplitPane    from '@components/splitPane/splitPane.jsx';
-import Editor       from '../../editor/editor.jsx';
-import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
-
 import Nav            from '@navbar/nav.jsx';
 import Navbar         from '@navbar/navbar.jsx';
 import NewBrewItem    from '@navbar/newbrew.navitem.jsx';
@@ -27,14 +23,11 @@ import RecentNavItems from '@navbar/recent.navitem.jsx';
 const { both: RecentNavItem } = RecentNavItems;
 
 // Page specific imports
-import Headtags from '../../../../vitreum/headtags.js';
-const Meta = Headtags.Meta;
 import { md5 }                           from 'hash-wasm';
 import { gzipSync, strToU8 }             from 'fflate';
 import { makePatches, stringifyPatches } from '@sanity/diff-match-patch';
 
 import ShareNavItem              from '@navbar/share.navitem.jsx';
-import LockNotification from './lockNotification/lockNotification.jsx';
 import { updateHistory, versionHistoryGarbageCollection } from '../../utils/versionHistory.js';
 import googleDriveIcon from '../../googleDrive.svg';
 
@@ -43,8 +36,11 @@ const STYLEKEY = 'HB_newPage_style';
 const SNIPKEY  = 'HB_newPage_snippets';
 const METAKEY  = 'HB_newPage_meta';
 
-const useLocalStorage = false;
+const useLocalStorage     = false;
-const sandbox	        = false;
+const sandbox	            = false;
+const showFloatingButtons = false;
+const showEditorButtons   = true;
+const pageName            = "editPage";
 
 const EditPage = (props)=>{
 	props = {
@@ -56,25 +52,13 @@ const EditPage = (props)=>{
 	const [saveGoogle, setSaveGoogle] = useState(!!props.brew.googleId);
 	const [error, setError] = useState(null);
 	const [HTMLErrors, setHTMLErrors] = useState(hbfm.validate(props.brew.text));
-	const [currentEditorViewPageNum, setCurrentEditorViewPageNum] = useState(1);
-	const [currentEditorCursorPageNum, setCurrentEditorCursorPageNum] = useState(1);
-	const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1);
-	const [themeBundle, setThemeBundle] = useState({});
 	const [alertTrashedGoogleBrew, setAlertTrashedGoogleBrew] = useState(props.brew.trashed);
 	const [alertNoGoogleToTransfer, setAlertNoGoogleToTransfer] = useState(false);
 	const [alertOwnershipToTransfer, setAlertOwnershipToTransfer] = useState(false);
 	const [confirmGoogleTransfer, setConfirmGoogleTransfer] = useState(false);
 
-	const editorRef     = useRef(null);
 	const lastSavedBrew = useRef(_.cloneDeep(props.brew));
 
-	const updateBrew = (newData)=>setCurrentBrew((prevBrew)=>({
-		...prevBrew,
-		style    : newData.style,
-		text     : newData.text,
-		snippets : newData.snippets
-	}));
-
 	const handleGoogleClick = ()=>{
 		if(currentBrew.authors.length > 0 && global.account?.username !== currentBrew.authors[0]) {
 			setAlertOwnershipToTransfer(true);
@@ -238,12 +222,13 @@ const EditPage = (props)=>{
 		toggleAutoSave,
 		clearError,
 		renderSaveButton,
+		renderPanels,
 		autoSaveEnabled,
-		trySave
+		trySave,
+		currentBrewRendererPageNum
 	} = useCommonEditPageFunctions({
 		saveGoogle,
 		setError,
-		setThemeBundle,
 		HTMLErrors,
 		setHTMLErrors,
 		currentBrew,
@@ -255,51 +240,16 @@ const EditPage = (props)=>{
 		METAKEY,
 		hbfm,
 		sandbox,
+		showFloatingButtons,
 		lastSavedBrew,
-		editorRef,
 		save,
+		renderNavbar,
+		pageName,
+		showEditorButtons,
+		userThemes: props.userThemes
 	});
 
-	return (
+	return renderPanels();
-		<div className='editPage sitePage'>
-			<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={props.userThemes}
-						themeBundle={themeBundle}
-						updateBrew={updateBrew}
-						onCursorPageChange={setCurrentEditorCursorPageNum}
-						onViewPageChange={setCurrentEditorViewPageNum}
-						currentEditorViewPageNum={currentEditorViewPageNum}
-						currentEditorCursorPageNum={currentEditorCursorPageNum}
-						currentBrewRendererPageNum={currentBrewRendererPageNum}
-					/>
-					<BrewRenderer
-						text={currentBrew.text}
-						style={currentBrew.style}
-						renderer={currentBrew.renderer}
-						themeBundle={themeBundle}
-						errors={HTMLErrors}
-						lang={currentBrew.lang}
-						onPageChange={setCurrentBrewRendererPageNum}
-						currentEditorCursorPageNum={currentEditorCursorPageNum}
-						allowPrint={true}
-					/>
-				</SplitPane>
-			</div>
-		</div>
-	);
 };
 
 export default EditPage;

client/homebrew/pages/homePage/homePage.jsx

@@ -11,10 +11,6 @@ import { DEFAULT_BREW }                       from '../../../../server/brewDefau
 
 import useCommonEditPageFunctions from '../../utils/commonEditPageFunctions.jsx';
 
-import SplitPane    from '@components/splitPane/splitPane.jsx';
-import Editor       from '../../editor/editor.jsx';
-import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
-
 import Nav            from '@navbar/nav.jsx';
 import Navbar         from '@navbar/navbar.jsx';
 import NewBrewItem    from '@navbar/newbrew.navitem.jsx';
@@ -28,16 +24,18 @@ const { both: RecentNavItem } = RecentNavItems;
 
 
 // Page specific imports
-import Headtags   from '@vitreum/headtags.js';
+
-const Meta = Headtags.Meta;
 
 const BREWKEY  = 'HB_newPage_content';
 const STYLEKEY = 'HB_newPage_style';
 const SNIPKEY  = 'HB_newPage_snippets';
 const METAKEY  = 'HB_newPage_meta';
 
-const useLocalStorage = false;
+const useLocalStorage     = false;
-const sandbox         = true;
+const sandbox             = true;
+const showFloatingButtons = true;
+const showEditorButtons   = false;
+const pageName            = "homePage";
 
 const HomePage =(props)=>{
 	props = {
@@ -49,12 +47,7 @@ const HomePage =(props)=>{
 	const [saveGoogle, setSaveGoogle] = useState(global.account?.googleId ? true : false);
 	const [error, setError]                      = useState(undefined);
 	const [HTMLErrors, setHTMLErrors]                 = useState(hbfm.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);
 	const lastSavedBrew      = useRef(_.cloneDeep(props.brew));
 
 	const save = async (brew, saveToGoogle)=>{
@@ -93,12 +86,12 @@ const HomePage =(props)=>{
 		handleBrewChange,
 		clearError,
 		renderSaveButton,
+		renderPanels,
 		unsavedChanges,
 		trySave
 	} = useCommonEditPageFunctions({
 		saveGoogle,
 		setError,
-		setThemeBundle,
 		HTMLErrors,
 		setHTMLErrors,
 		currentBrew,
@@ -110,49 +103,16 @@ const HomePage =(props)=>{
 		METAKEY,
 		hbfm,
 		sandbox,
+		showFloatingButtons,
 		lastSavedBrew,
-		editorRef,
 		save,
+		renderNavbar,
+		pageName,
+		showEditorButtons,
+		userThemes: {}
 	});
 
-	return (
+	return renderPanels();
-		<div className='homePage sitePage'>
-			<Meta name='google-site-verification' content='NwnAQSSJZzAT7N-p5MY6ydQ7Njm67dtbu73ZSyE5Fy4' />
-			{renderNavbar()}
-			<div className='content'>
-				<SplitPane onDragFinish={handleSplitMove}>
-					<Editor
-						ref={editorRef}
-						brew={currentBrew}
-						onBrewChange={handleBrewChange}
-						renderer={currentBrew.renderer}
-						showEditButtons={false}
-						themeBundle={themeBundle}
-						onCursorPageChange={setCurrentEditorCursorPageNum}
-						onViewPageChange={setCurrentEditorViewPageNum}
-						currentEditorViewPageNum={currentEditorViewPageNum}
-						currentEditorCursorPageNum={currentEditorCursorPageNum}
-						currentBrewRendererPageNum={currentBrewRendererPageNum}
-					/>
-					<BrewRenderer
-						text={currentBrew.text}
-						style={currentBrew.style}
-						renderer={currentBrew.renderer}
-						themeBundle={themeBundle}
-						onPageChange={setCurrentBrewRendererPageNum}
-						currentEditorCursorPageNum={currentEditorCursorPageNum}
-					/>
-				</SplitPane>
-			</div>
-			<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>
-		</div>
-	);
 };
 
 export default HomePage;

client/homebrew/pages/newPage/newPage.jsx

@@ -12,10 +12,6 @@ import { printCurrentBrew, fetchThemeBundle, splitTextStyleAndMetadata } from '@
 
 import useCommonEditPageFunctions from '../../utils/commonEditPageFunctions.jsx';
 
-import SplitPane    from '@components/splitPane/splitPane.jsx';
-import Editor       from '../../editor/editor.jsx';
-import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
-
 import Nav            from '@navbar/nav.jsx';
 import Navbar         from '@navbar/navbar.jsx';
 import NewBrewItem    from '@navbar/newbrew.navitem.jsx';
@@ -35,8 +31,11 @@ const METAKEY  = 'HB_newPage_meta';
 
 const SAVEKEYPREFIX  = 'HB_editor_defaultSave_';
 
-const useLocalStorage = true;
+const useLocalStorage     = true;
-const sandbox         = true;
+const sandbox             = true;
+const showFloatingButtons = false;
+const showEditorButtons   = true;
+const pageName            = "newPage";
 
 const NewPage = (props)=>{
 	props = {
@@ -48,12 +47,7 @@ const NewPage = (props)=>{
 	const [saveGoogle, setSaveGoogle] = useState(global.account?.googleId ? true : false);
 	const [error, setError] = useState(null);
 	const [HTMLErrors, setHTMLErrors] = useState(hbfm.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);
 	const lastSavedBrew      = useRef(_.cloneDeep(props.brew));
 
 	useEffect(()=>{
@@ -140,11 +134,11 @@ const NewPage = (props)=>{
 		handleSplitMove,
 		handleBrewChange,
 		clearError,
-		renderSaveButton
+		renderSaveButton,
+		renderPanels
 	} = useCommonEditPageFunctions({
 		saveGoogle,
 		setError,
-		setThemeBundle,
 		HTMLErrors,
 		setHTMLErrors,
 		currentBrew,
@@ -156,44 +150,16 @@ const NewPage = (props)=>{
 		METAKEY,
 		hbfm,
 		sandbox,
+		showFloatingButtons,
 		lastSavedBrew,
-		editorRef,
 		save,
+		renderNavbar,
+		pageName,
+		showEditorButtons,
+		userThemes: props.userThemes
 	});
 
-	return (
+	return renderPanels();
-		<div className='newPage sitePage'>
-			{renderNavbar()}
-			<div className='content'>
-				<SplitPane onDragFinish={handleSplitMove}>
-					<Editor
-						ref={editorRef}
-						brew={currentBrew}
-						onBrewChange={handleBrewChange}
-						renderer={currentBrew.renderer}
-						userThemes={props.userThemes}
-						themeBundle={themeBundle}
-						onCursorPageChange={setCurrentEditorCursorPageNum}
-						onViewPageChange={setCurrentEditorViewPageNum}
-						currentEditorViewPageNum={currentEditorViewPageNum}
-						currentEditorCursorPageNum={currentEditorCursorPageNum}
-						currentBrewRendererPageNum={currentBrewRendererPageNum}
-					/>
-					<BrewRenderer
-						text={currentBrew.text}
-						style={currentBrew.style}
-						renderer={currentBrew.renderer}
-						themeBundle={themeBundle}
-						errors={HTMLErrors}
-						lang={currentBrew.lang}
-						onPageChange={setCurrentBrewRendererPageNum}
-						currentEditorCursorPageNum={currentEditorCursorPageNum}
-						allowPrint={true}
-					/>
-				</SplitPane>
-			</div>
-		</div>
-	);
 };
 
 export default NewPage;

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,13 @@ export default function useCommonEditPageFunctions(dependencies) {
 		METAKEY,
 		hbfm,
 		sandbox,
+		showFloatingButtons,
 		lastSavedBrew,
-		editorRef,
 		save,
+		renderNavbar,
+		pageName,
+		showEditorButtons,
+		userThemes = {}
 	} = dependencies;
 
 	const [isSaving, setIsSaving]           = useState(false);
@@ -35,10 +45,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 +187,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={showEditorButtons}
+						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 +255,9 @@ export default function useCommonEditPageFunctions(dependencies) {
 		clearError,
 		trySave,
 		renderSaveButton,
+		renderPanels,
 		autoSaveEnabled,
 		unsavedChanges,
+		currentBrewRendererPageNum
 	};
 }