diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx
index dea5606f2..b9dbe9dce 100644
--- a/client/homebrew/pages/editPage/editPage.jsx
+++ b/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';
@@ -48,7 +46,7 @@ const SNIPKEY = 'HB_newPage_snippets';
const METAKEY = 'HB_newPage_meta';
const useLocalStorage = false;
-const sandbox = false;
+const sandbox = false;
const EditPage = (props)=>{
props = {
@@ -74,10 +72,9 @@ const EditPage = (props)=>{
const [autoSaveEnabled, setAutoSaveEnabled] = useState(true);
const [warnUnsavedChanges, setWarnUnsavedChanges] = useState(true);
- const editorRef = useRef(null);
- const lastSavedBrew = useRef(_.cloneDeep(props.brew));
- const saveTimeout = useRef(null);
- const warnUnsavedTimeout = useRef(null);
+ const editorRef = useRef(null);
+ const lastSavedBrew = useRef(_.cloneDeep(props.brew));
+ const saveTimeout = 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 saved;
};
- const toggleAutoSave = ()=>{
- clearTimeout(warnUnsavedTimeout.current);
- clearTimeout(saveTimeout.current);
- localStorage.setItem(AUTOSAVE_KEY, JSON.stringify(!autoSaveEnabled));
- setAutoSaveEnabled(!autoSaveEnabled);
- setWarnUnsavedChanges(autoSaveEnabled);
- };
-
const renderAutoSaveButton = ()=>(
Autosave
@@ -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 (
diff --git a/client/homebrew/pages/homePage/homePage.jsx b/client/homebrew/pages/homePage/homePage.jsx
index 1e02d67b8..7685f7bc5 100644
--- a/client/homebrew/pages/homePage/homePage.jsx
+++ b/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({
diff --git a/client/homebrew/pages/newPage/newPage.jsx b/client/homebrew/pages/newPage/newPage.jsx
index 8182ac20c..9db9f11f2 100644
--- a/client/homebrew/pages/newPage/newPage.jsx
+++ b/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({
diff --git a/client/homebrew/utils/commonEditPageFunctions.js b/client/homebrew/utils/commonEditPageFunctions.js
index ff53981f8..f0c398ae4 100644
--- a/client/homebrew/utils/commonEditPageFunctions.js
+++ b/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
}
}
\ No newline at end of file