diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx index 75043aa44..dea5606f2 100644 --- a/client/homebrew/pages/editPage/editPage.jsx +++ b/client/homebrew/pages/editPage/editPage.jsx @@ -78,15 +78,6 @@ const EditPage = (props)=>{ const lastSavedBrew = useRef(_.cloneDeep(props.brew)); const saveTimeout = useRef(null); const warnUnsavedTimeout = useRef(null); - const unsavedChangesRef = useRef(unsavedChanges); // Similarly, onBeforeUnload lives outside React and needs ref to unsavedChanges - - useEffect(()=>{ - unsavedChangesRef.current = unsavedChanges; - }); - - const handleSplitMove = ()=>{ - editorRef.current?.update(); - }; const updateBrew = (newData)=>setCurrentBrew((prevBrew)=>({ ...prevBrew, @@ -326,6 +317,7 @@ const EditPage = (props)=>{ }; const { + handleSplitMove, handleBrewChange } = useCommonEditPageFunctions({ saveGoogle, @@ -344,11 +336,12 @@ const EditPage = (props)=>{ autoSaveEnabled, setAutoSaveEnabled, setWarnUnsavedChanges, - unsavedChangesRef, + unsavedChanges, setUnsavedChanges, trySave, sandbox, - lastSavedBrew + lastSavedBrew, + editorRef }); return ( diff --git a/client/homebrew/pages/homePage/homePage.jsx b/client/homebrew/pages/homePage/homePage.jsx index 2c0de0e0a..1e02d67b8 100644 --- a/client/homebrew/pages/homePage/homePage.jsx +++ b/client/homebrew/pages/homePage/homePage.jsx @@ -62,14 +62,9 @@ const HomePage =(props)=>{ const [autoSaveEnabled, setAutoSaveEnabled] = useState(false); const [warnUnsavedChanges, setWarnUnsavedChanges] = useState(true); - const editorRef = useRef(null); - const lastSavedBrew = useRef(_.cloneDeep(props.brew)); + const editorRef = useRef(null); + const lastSavedBrew = useRef(_.cloneDeep(props.brew)); const warnUnsavedTimeout = useRef(null); - const unsavedChangesRef = useRef(unsavedChanges); - - useEffect(()=>{ - unsavedChangesRef.current = unsavedChanges; - }, [unsavedChanges]); const save = ()=>{ request.post('/api') @@ -84,10 +79,6 @@ const HomePage =(props)=>{ }); }; - const handleSplitMove = ()=>{ - editorRef.current.update(); - }; - const resetWarnUnsavedTimer = ()=>{ setTimeout(()=>setWarnUnsavedChanges(false), UNSAVED_WARNING_POPUP_TIMEOUT); // Hide the warning after 4 seconds clearTimeout(warnUnsavedTimeout.current); @@ -150,7 +141,8 @@ const HomePage =(props)=>{ ; }; - const { + const { + handleSplitMove, handleBrewChange } = useCommonEditPageFunctions({ setError, @@ -168,10 +160,11 @@ const HomePage =(props)=>{ autoSaveEnabled, setAutoSaveEnabled, setWarnUnsavedChanges, - unsavedChangesRef, + unsavedChanges, setUnsavedChanges, sandbox, - lastSavedBrew + lastSavedBrew, + editorRef }); return ( diff --git a/client/homebrew/pages/newPage/newPage.jsx b/client/homebrew/pages/newPage/newPage.jsx index c4f21c982..8182ac20c 100644 --- a/client/homebrew/pages/newPage/newPage.jsx +++ b/client/homebrew/pages/newPage/newPage.jsx @@ -62,11 +62,10 @@ const NewPage = (props)=>{ const [autoSaveEnabled, setAutoSaveEnabled] = useState(false); const [warnUnsavedChanges, setWarnUnsavedChanges] = useState(true); - const editorRef = useRef(null); - const lastSavedBrew = useRef(_.cloneDeep(props.brew)); + const editorRef = useRef(null); + const lastSavedBrew = useRef(_.cloneDeep(props.brew)); // const saveTimeout = useRef(null); const warnUnsavedTimeout = useRef(null); - const unsavedChangesRef = useRef(unsavedChanges); // Similarly, onBeforeUnload lives outside React and needs ref to unsavedChanges useEffect(()=>{ loadBrew(); @@ -101,14 +100,6 @@ const NewPage = (props)=>{ window.history.replaceState({}, window.location.title, '/new/'); }; - useEffect(()=>{ - unsavedChangesRef.current = unsavedChanges; - }); - - const handleSplitMove = ()=>{ - editorRef.current.update(); - }; - const resetWarnUnsavedTimer = ()=>{ setTimeout(()=>setWarnUnsavedChanges(false), UNSAVED_WARNING_POPUP_TIMEOUT); // Hide the warning after 4 seconds clearTimeout(warnUnsavedTimeout.current); @@ -204,7 +195,8 @@ const NewPage = (props)=>{ ); - const { + const { + handleSplitMove, handleBrewChange } = useCommonEditPageFunctions({ setError, @@ -222,11 +214,12 @@ const NewPage = (props)=>{ autoSaveEnabled, setAutoSaveEnabled, setWarnUnsavedChanges, - unsavedChangesRef, + unsavedChanges, setUnsavedChanges, trySave, sandbox, - lastSavedBrew + lastSavedBrew, + editorRef }); return ( diff --git a/client/homebrew/utils/commonEditPageFunctions.js b/client/homebrew/utils/commonEditPageFunctions.js index 96368d15b..ff53981f8 100644 --- a/client/homebrew/utils/commonEditPageFunctions.js +++ b/client/homebrew/utils/commonEditPageFunctions.js @@ -24,16 +24,18 @@ export default function useCommonEditPageFunctions(dependencies) { trySave = ()=>{}, sandbox, saveGoogle = false, - unsavedChangesRef, + unsavedChanges, setUnsavedChanges, - lastSavedBrew + lastSavedBrew, + editorRef } = dependencies; + const unsavedChangesRef = useRef(unsavedChanges); // onBeforeUnload lives outside React and needs ref to unsavedChanges + //==--------- Page setup ----------==// useEffect(()=>{ const autoSavePref = !sandbox && JSON.parse(localStorage.getItem(AUTOSAVE_KEY) ?? true); setAutoSaveEnabled(autoSavePref); - console.log(autoSavePref) setWarnUnsavedChanges(!autoSavePref); setHTMLErrors(hbfm.validate(currentBrew.text)); fetchThemeBundle(setError, setThemeBundle, currentBrew.renderer, currentBrew.theme); @@ -63,10 +65,14 @@ export default function useCommonEditPageFunctions(dependencies) { useEffect(()=>{ const hasChange = !_.isEqual(currentBrew, lastSavedBrew.current); setUnsavedChanges(hasChange); + unsavedChangesRef.current = hasChange; if(autoSaveEnabled) trySave(false, hasChange, saveGoogle); }, [currentBrew]); + const handleSplitMove = ()=>{ + editorRef.current.update(); + }; const handleBrewChange = (field)=>(value, subfield)=>{ //'text', 'style', 'snippets', 'metadata' if(subfield == 'renderer' || subfield == 'theme') @@ -92,6 +98,7 @@ export default function useCommonEditPageFunctions(dependencies) { }; return { + handleSplitMove, handleBrewChange } } \ No newline at end of file