Move resetWarnUnsavedTimer and ToggleAutosave to common hook

client/homebrew/pages/editPage/editPage.jsx

@@ -39,8 +39,6 @@ import { updateHistory, versionHistoryGarbageCollection } from '../../utils/vers
 import googleDriveIcon from '../../googleDrive.svg';
 
 const SAVE_TIMEOUT = 10000;
-const UNSAVED_WARNING_TIMEOUT = 900000; //Warn user afer 15 minutes of unsaved changes
-const UNSAVED_WARNING_POPUP_TIMEOUT = 4000; //Show the warning for 4 seconds
 
 const BREWKEY  = 'HB_newPage_content';
 const STYLEKEY = 'HB_newPage_style';
@@ -77,7 +75,6 @@ const EditPage = (props)=>{
 	const editorRef     = useRef(null);
 	const lastSavedBrew = useRef(_.cloneDeep(props.brew));
 	const saveTimeout   = useRef(null);
-	const warnUnsavedTimeout = useRef(null);
 
 	const updateBrew = (newData)=>setCurrentBrew((prevBrew)=>({
 		...prevBrew,
@@ -86,12 +83,6 @@ const EditPage = (props)=>{
 		snippets : newData.snippets
 	}));
 
-	const resetWarnUnsavedTimer = ()=>{
-		setTimeout(()=>setWarnUnsavedChanges(false), UNSAVED_WARNING_POPUP_TIMEOUT); // Hide the warning after 4 seconds
-		clearTimeout(warnUnsavedTimeout.current);
-		warnUnsavedTimeout.current = setTimeout(()=>setWarnUnsavedChanges(true), UNSAVED_WARNING_TIMEOUT); // 15 minutes between unsaved work warnings
-	};
-
 	const handleGoogleClick = ()=>{
 		if(currentBrew.authors.length > 0 && global.account?.username !== currentBrew.authors[0]) {
 			setAlertOwnershipToTransfer(true);
@@ -272,14 +263,6 @@ const EditPage = (props)=>{
 		return <Nav.item className='save saved'>saved</Nav.item>;
 	};
 
-	const toggleAutoSave = ()=>{
-		clearTimeout(warnUnsavedTimeout.current);
-		clearTimeout(saveTimeout.current);
-		localStorage.setItem(AUTOSAVE_KEY, JSON.stringify(!autoSaveEnabled));
-		setAutoSaveEnabled(!autoSaveEnabled);
-		setWarnUnsavedChanges(autoSaveEnabled);
-	};
-
 	const renderAutoSaveButton = ()=>(
 		<Nav.item onClick={toggleAutoSave}>
 			Autosave <i className={autoSaveEnabled ? 'fas fa-power-off active' : 'fas fa-power-off'}></i>
@@ -317,8 +300,10 @@ const EditPage = (props)=>{
 	};
 
 	const {
+		resetWarnUnsavedTimer,
 		handleSplitMove,
-		handleBrewChange
+		handleBrewChange,
+		toggleAutoSave
 	} = useCommonEditPageFunctions({
 		saveGoogle,
 		setError,
@@ -341,7 +326,8 @@ const EditPage = (props)=>{
 		trySave,
 		sandbox,
 		lastSavedBrew,
-		editorRef
+		editorRef,
+		saveTimeout
 	});
 
 	return (

client/homebrew/pages/homePage/homePage.jsx

@@ -32,8 +32,6 @@ import Headtags   from '@vitreum/headtags.js';
 const Meta = Headtags.Meta;
 
 const SAVE_TIMEOUT = 10000;
-const UNSAVED_WARNING_TIMEOUT = 900000; //Warn user afer 15 minutes of unsaved changes
-const UNSAVED_WARNING_POPUP_TIMEOUT = 4000; //Show the warning for 4 seconds
 
 const BREWKEY  = 'HB_newPage_content';
 const STYLEKEY = 'HB_newPage_style';
@@ -64,7 +62,6 @@ const HomePage =(props)=>{
 
 	const editorRef          = useRef(null);
 	const lastSavedBrew      = useRef(_.cloneDeep(props.brew));
-	const warnUnsavedTimeout = useRef(null);
 
 	const save = ()=>{
 		request.post('/api')
@@ -79,12 +76,6 @@ const HomePage =(props)=>{
 			});
 	};
 
-	const resetWarnUnsavedTimer = ()=>{
-		setTimeout(()=>setWarnUnsavedChanges(false), UNSAVED_WARNING_POPUP_TIMEOUT); // Hide the warning after 4 seconds
-		clearTimeout(warnUnsavedTimeout.current);
-		warnUnsavedTimeout.current = setTimeout(()=>setWarnUnsavedChanges(true), UNSAVED_WARNING_TIMEOUT); // 15 minutes between unsaved work warnings
-	};
-
 	const renderSaveButton = ()=>{
 		// #1 - Currently saving, show SAVING
 		if(isSaving)
@@ -142,6 +133,7 @@ const HomePage =(props)=>{
 	};
 
 	const {
+		resetWarnUnsavedTimer,
 		handleSplitMove,
 		handleBrewChange
 	} = useCommonEditPageFunctions({

client/homebrew/pages/newPage/newPage.jsx

@@ -29,8 +29,6 @@ const { both: RecentNavItem } = RecentNavItems;
 
 // Page specific imports
 const SAVE_TIMEOUT = 10000;
-const UNSAVED_WARNING_TIMEOUT = 900000; //Warn user afer 15 minutes of unsaved changes
-const UNSAVED_WARNING_POPUP_TIMEOUT = 4000; //Show the warning for 4 seconds
 
 const BREWKEY  = 'HB_newPage_content';
 const STYLEKEY = 'HB_newPage_style';
@@ -64,8 +62,6 @@ const NewPage = (props)=>{
 
 	const editorRef          = useRef(null);
 	const lastSavedBrew      = useRef(_.cloneDeep(props.brew));
-	// const saveTimeout        = useRef(null);
-	const warnUnsavedTimeout = useRef(null);
 
 	useEffect(()=>{
 		loadBrew();
@@ -100,12 +96,6 @@ const NewPage = (props)=>{
 			window.history.replaceState({}, window.location.title, '/new/');
 	};
 
-	const resetWarnUnsavedTimer = ()=>{
-		setTimeout(()=>setWarnUnsavedChanges(false), UNSAVED_WARNING_POPUP_TIMEOUT); // Hide the warning after 4 seconds
-		clearTimeout(warnUnsavedTimeout.current);
-		warnUnsavedTimeout.current = setTimeout(()=>setWarnUnsavedChanges(true), UNSAVED_WARNING_TIMEOUT); // 15 minutes between unsaved work warnings
-	};
-
 	const trySave = useEffectEvent(async ()=>{
   	setIsSaving(true);
 
@@ -196,6 +186,7 @@ const NewPage = (props)=>{
 	);
 
 	const {
+		resetWarnUnsavedTimer,
 		handleSplitMove,
 		handleBrewChange
 	} = useCommonEditPageFunctions({

client/homebrew/utils/commonEditPageFunctions.js

@@ -4,6 +4,9 @@ import _                                      from 'lodash';
 
 const AUTOSAVE_KEY = 'HB_editor_autoSaveOn';
 
+const UNSAVED_WARNING_TIMEOUT       = 900000; //Warn user afer 15 minutes of unsaved changes
+const UNSAVED_WARNING_POPUP_TIMEOUT = 4000;   //Show the warning for 4 seconds
+
 export default function useCommonEditPageFunctions(dependencies) {
 	const {
 		setError,
@@ -27,10 +30,12 @@ export default function useCommonEditPageFunctions(dependencies) {
 		unsavedChanges,
 		setUnsavedChanges,
 		lastSavedBrew,
-		editorRef
+		editorRef,
+		saveTimeout = undefined
 	} = dependencies;
 
 	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
 
 	//==--------- Page setup ----------==//
 	useEffect(()=>{
@@ -70,6 +75,12 @@ export default function useCommonEditPageFunctions(dependencies) {
 		if(autoSaveEnabled) trySave(false, hasChange, saveGoogle);
 	}, [currentBrew]);
 
+	const resetWarnUnsavedTimer = ()=>{
+		setTimeout(()=>setWarnUnsavedChanges(false), UNSAVED_WARNING_POPUP_TIMEOUT); // Hide the warning after 4 seconds
+		clearTimeout(warnUnsavedTimeout.current);
+		warnUnsavedTimeout.current = setTimeout(()=>setWarnUnsavedChanges(true), UNSAVED_WARNING_TIMEOUT); // 15 minutes between unsaved work warnings
+	};
+
 	const handleSplitMove = ()=>{
 		editorRef.current.update();
 	};
@@ -97,8 +108,18 @@ export default function useCommonEditPageFunctions(dependencies) {
 		}
 	};
 
+	const toggleAutoSave = ()=>{
+		clearTimeout(warnUnsavedTimeout.current);
+		clearTimeout(saveTimeout.current);
+		localStorage.setItem(AUTOSAVE_KEY, JSON.stringify(!autoSaveEnabled));
+		setAutoSaveEnabled(!autoSaveEnabled);
+		setWarnUnsavedChanges(autoSaveEnabled);
+	};
+
 	return {
+		resetWarnUnsavedTimer,
 		handleSplitMove,
-		handleBrewChange
+		handleBrewChange,
+		toggleAutoSave
 	}
 }