Move RenderNavBar to common hook

client/homebrew/pages/editPage/editPage.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable max-lines */
 import './editPage.less';
 
 // Common imports
@@ -12,22 +11,12 @@ import { DEFAULT_BREW_LOAD }                  from '../../../../server/brewDefau
 import useCommonEditPageFunctions from '../../utils/commonEditPageFunctions.jsx';
 
 import Nav            from '@navbar/nav.jsx';
-import Navbar         from '@navbar/navbar.jsx';
-import NewBrewItem    from '@navbar/newbrew.navitem.jsx';
-import AccountNavItem from '@navbar/account.navitem.jsx';
-import ErrorNavItem   from '@navbar/error-navitem.jsx';
-import HelpNavItem    from '@navbar/help.navitem.jsx';
-import VaultNavItem   from '@navbar/vault.navitem.jsx';
-import PrintNavItem   from '@navbar/print.navitem.jsx';
-import RecentNavItems from '@navbar/recent.navitem.jsx';
-const { both: RecentNavItem } = RecentNavItems;
 
 // Page specific imports
 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 { updateHistory, versionHistoryGarbageCollection } from '../../utils/versionHistory.js';
 import googleDriveIcon from '../../googleDrive.svg';
 
@@ -182,47 +171,12 @@ const EditPage = (props)=>{
 		</Nav.item>
 	);
 
-	const renderAutoSaveButton = ()=>(
-		<Nav.item onClick={toggleAutoSave}>
-			Autosave <i className={autoSaveEnabled ? 'fas fa-power-off active' : 'fas fa-power-off'}></i>
-		</Nav.item>
-	);
-
-	const renderNavbar = ()=>{
-		return <Navbar>
-			<Nav.section>
-				<Nav.item className='brewTitle'>{currentBrew.title}</Nav.item>
-			</Nav.section>
-
-			<Nav.section>
-				{renderGoogleDriveIcon()}
-				{error
-					? <ErrorNavItem error={error} clearError={clearError} />
-					: <Nav.dropdown className='save-menu'>
-						{renderSaveButton()}
-						{renderAutoSaveButton()}
-					</Nav.dropdown>}
-				<NewBrewItem />
-				<PrintNavItem />
-				<HelpNavItem />
-				<VaultNavItem />
-				<ShareNavItem brew={currentBrew} currentPage={currentBrewRendererPageNum} />
-				<RecentNavItem brew={currentBrew} storageKey='edit' />
-				<AccountNavItem/>
-			</Nav.section>
-		</Navbar>;
-	};
-
 	const {
-		toggleAutoSave,
-		clearError,
-		renderSaveButton,
 		renderPanels,
-		autoSaveEnabled,
 		trySave,
-		currentBrewRendererPageNum
 	} = useCommonEditPageFunctions({
 		saveGoogle,
+		error,
 		setError,
 		currentBrew,
 		setCurrentBrew,
@@ -236,9 +190,9 @@ const EditPage = (props)=>{
 		showFloatingButtons,
 		lastSavedBrew,
 		save,
-		renderNavbar,
 		pageName,
 		showEditorButtons,
+		renderGoogleDriveIcon,
 		userThemes: props.userThemes
 	});
 

client/homebrew/pages/homePage/homePage.jsx

@@ -1,4 +1,3 @@
-
 import './homePage.less';
 
 // Common imports
@@ -11,21 +10,7 @@ import { DEFAULT_BREW }                       from '../../../../server/brewDefau
 
 import useCommonEditPageFunctions from '../../utils/commonEditPageFunctions.jsx';
 
-import Nav            from '@navbar/nav.jsx';
-import Navbar         from '@navbar/navbar.jsx';
-import NewBrewItem    from '@navbar/newbrew.navitem.jsx';
-import AccountNavItem from '@navbar/account.navitem.jsx';
-import ErrorNavItem   from '@navbar/error-navitem.jsx';
-import HelpNavItem    from '@navbar/help.navitem.jsx';
-import VaultNavItem   from '@navbar/vault.navitem.jsx';
-import PrintNavItem   from '@navbar/print.navitem.jsx';
-import RecentNavItems from '@navbar/recent.navitem.jsx';
-const { both: RecentNavItem } = RecentNavItems;
-
-
 // Page specific imports
-
-
 const BREWKEY  = 'HB_newPage_content';
 const STYLEKEY = 'HB_newPage_style';
 const SNIPKEY  = 'HB_newPage_snippets';
@@ -64,28 +49,11 @@ const HomePage =(props)=>{
 		window.location = `/edit/${saved.editId}`;
 	};
 
-	const renderNavbar = ()=>{
-		return <Navbar ver={props.ver}>
-			<Nav.section>
-				{error
-					? <ErrorNavItem error={error} clearError={clearError} />
-					: renderSaveButton()}
-				<NewBrewItem />
-				<PrintNavItem />
-				<HelpNavItem />
-				<VaultNavItem />
-				<RecentNavItem />
-				<AccountNavItem />
-			</Nav.section>
-		</Navbar>;
-	};
-
 	const {
-		clearError,
-		renderSaveButton,
 		renderPanels
 	} = useCommonEditPageFunctions({
 		saveGoogle,
+		error,
 		setError,
 		currentBrew,
 		setCurrentBrew,
@@ -99,7 +67,6 @@ const HomePage =(props)=>{
 		showFloatingButtons,
 		lastSavedBrew,
 		save,
-		renderNavbar,
 		pageName,
 		showEditorButtons,
 		userThemes: {}

client/homebrew/pages/newPage/newPage.jsx

@@ -1,4 +1,3 @@
-
 import './newPage.less';
 
 // Common imports
@@ -8,21 +7,9 @@ import { hbfm } from 'marked-hbfm';
 import _                                      from 'lodash';
 
 import { DEFAULT_BREW }                       from '../../../../server/brewDefaults.js';
-import { printCurrentBrew, fetchThemeBundle, splitTextStyleAndMetadata } from '@shared/helpers.js';
 
 import useCommonEditPageFunctions from '../../utils/commonEditPageFunctions.jsx';
 
-import Nav            from '@navbar/nav.jsx';
-import Navbar         from '@navbar/navbar.jsx';
-import NewBrewItem    from '@navbar/newbrew.navitem.jsx';
-import AccountNavItem from '@navbar/account.navitem.jsx';
-import ErrorNavItem   from '@navbar/error-navitem.jsx';
-import HelpNavItem    from '@navbar/help.navitem.jsx';
-import VaultNavItem   from '@navbar/vault.navitem.jsx';
-import PrintNavItem   from '@navbar/print.navitem.jsx';
-import RecentNavItems from '@navbar/recent.navitem.jsx';
-const { both: RecentNavItem } = RecentNavItems;
-
 // Page specific imports
 const BREWKEY  = 'HB_newPage_content';
 const STYLEKEY = 'HB_newPage_style';
@@ -109,32 +96,11 @@ const NewPage = (props)=>{
 		window.location = `/edit/${savedBrew.editId}`;
 	};
 
-	const renderNavbar = ()=>(
-		<Navbar>
-			<Nav.section>
-				<Nav.item className='brewTitle'>{currentBrew.title}</Nav.item>
-			</Nav.section>
-
-			<Nav.section>
-				{error
-					? <ErrorNavItem error={error} clearError={clearError} />
-					: renderSaveButton()}
-				<NewBrewItem />
-				<PrintNavItem />
-				<HelpNavItem />
-				<VaultNavItem />
-				<RecentNavItem />
-				<AccountNavItem />
-			</Nav.section>
-		</Navbar>
-	);
-
 	const {
-		clearError,
-		renderSaveButton,
 		renderPanels
 	} = useCommonEditPageFunctions({
 		saveGoogle,
+		error,
 		setError,
 		currentBrew,
 		setCurrentBrew,
@@ -148,7 +114,6 @@ const NewPage = (props)=>{
 		showFloatingButtons,
 		lastSavedBrew,
 		save,
-		renderNavbar,
 		pageName,
 		showEditorButtons,
 		userThemes: props.userThemes

client/homebrew/utils/commonEditPageFunctions.jsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect, useEffectEvent, useRef } from 'react';
 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';
@@ -10,6 +9,19 @@ import BrewRenderer     from '../brewRenderer/brewRenderer.jsx';
 import LockNotification from '../pages/editPage/lockNotification/lockNotification.jsx';
 const Meta = Headtags.Meta;
 
+//===---- Navbar
+import Nav            from '@navbar/nav.jsx';
+import Navbar         from '@navbar/navbar.jsx';
+import NewBrewItem    from '@navbar/newbrew.navitem.jsx';
+import AccountNavItem from '@navbar/account.navitem.jsx';
+import ErrorNavItem   from '@navbar/error-navitem.jsx';
+import HelpNavItem    from '@navbar/help.navitem.jsx';
+import VaultNavItem   from '@navbar/vault.navitem.jsx';
+import PrintNavItem   from '@navbar/print.navitem.jsx';
+import ShareNavItem   from '@navbar/share.navitem.jsx';
+import RecentNavItems from '@navbar/recent.navitem.jsx';
+const { both: RecentNavItem } = RecentNavItems;
+
 const AUTOSAVE_KEY = 'HB_editor_autoSaveOn';
 
 const SAVE_TIMEOUT                  = 10000;  //Autosave 10 seconds after last change
@@ -19,6 +31,7 @@ const UNSAVED_WARNING_POPUP_TIMEOUT = 4000;   //Show the warning for 4 seconds
 export default function useCommonEditPageFunctions(dependencies) {
 	const {
 		saveGoogle,
+		error,
 		setError,
 		currentBrew,
 		setCurrentBrew,
@@ -32,8 +45,8 @@ export default function useCommonEditPageFunctions(dependencies) {
 		showFloatingButtons,
 		lastSavedBrew,
 		save,
-		renderNavbar,
 		pageName,
+		renderGoogleDriveIcon = ()=>{},
 		showEditorButtons,
 		userThemes = {}
 	} = dependencies;
@@ -78,7 +91,7 @@ export default function useCommonEditPageFunctions(dependencies) {
 		};
 		return ()=>{
 			document.removeEventListener('keydown', handleControlKeys);
-			window.onBeforeUnload = null;
+			window.onbeforeunload = null;
 		};
 	}, []);
 
@@ -148,9 +161,7 @@ export default function useCommonEditPageFunctions(dependencies) {
 			setError(null);
 			setHTMLErrors(hbfm.validate(currentBrew.text));
 			await save(currentBrew, saveToGoogle)
-			.catch((err)=>{
+				.catch((err)=>{setError(err);});
-				setError(err);
-			});
 			setIsSaving(false);
 			setLastSavedTime(new Date());
 			if(!autoSaveEnabled) resetWarnUnsavedTimer();
@@ -186,7 +197,7 @@ 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
+	//TODO: Candidate for refactor/rename; used with history tool to load previous verion; may overlap with snippet injection or handleBrewChange
 	const updateBrew = (newData)=>setCurrentBrew((prevBrew)=>({
 		...prevBrew,
 		style    : newData.style,
@@ -194,12 +205,41 @@ export default function useCommonEditPageFunctions(dependencies) {
 		snippets : newData.snippets
 	}));
 
+	const renderNavbar = ()=>(
+		<Navbar>
+			<Nav.section>
+				<Nav.item className='brewTitle'>{currentBrew.title}</Nav.item>
+			</Nav.section>
+			<Nav.section>
+				{renderGoogleDriveIcon()}
+				{error
+					? <ErrorNavItem error={error} clearError={clearError} />
+					: <Nav.dropdown className='save-menu'>
+						{renderSaveButton()}
+						{pageName == "editPage" && renderAutoSaveButton()}
+					</Nav.dropdown>}
+				<NewBrewItem />
+				<PrintNavItem />
+				<HelpNavItem />
+				<VaultNavItem />
+				{(pageName == "editPage") && <ShareNavItem brew={currentBrew} currentPage={currentBrewRendererPageNum} />}
+				<RecentNavItem brew={currentBrew} storageKey={(pageName == "editPage") ? 'edit' : undefined} />
+				<AccountNavItem />
+			</Nav.section>
+		</Navbar>
+	);
+
+	const renderAutoSaveButton = ()=>(
+		<Nav.item onClick={toggleAutoSave}>
+			Autosave <i className={autoSaveEnabled ? 'fas fa-power-off active' : 'fas fa-power-off'}></i>
+		</Nav.item>
+	);
+
 	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>
@@ -239,7 +279,7 @@ export default function useCommonEditPageFunctions(dependencies) {
 						errors={HTMLErrors}
 						onPageChange={setCurrentBrewRendererPageNum}
 						currentEditorCursorPageNum={currentEditorCursorPageNum}
-						allowPrint={true} //TODO: candidate for cleanup. Homepage only place where allowPrint = false. Vote OK to allow print everywhere
+						allowPrint={true} //TODO: candidate for cleanup in brewRenderer. Homepage only place where allowPrint = false. Vote OK to allow print everywhere
 					/>
 				</SplitPane>
 			</div>
@@ -248,15 +288,7 @@ export default function useCommonEditPageFunctions(dependencies) {
 	);
 
 	return {
-		handleSplitMove,
-		handleBrewChange,
-		toggleAutoSave,
-		clearError,
 		trySave,
-		renderSaveButton,
+		renderPanels
-		renderPanels,
-		autoSaveEnabled,
-		unsavedChanges,
-		currentBrewRendererPageNum
 	};
 }