From b26d81ca08c85815860e5fd4125daf7e116e8ce0 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Sat, 12 Sep 2026 12:30:21 -0400 Subject: [PATCH 1/2] Move UnsavedChangesRef into common hook and clean syncing useEffect --- client/homebrew/pages/editPage/editPage.jsx | 7 +------ client/homebrew/pages/homePage/homePage.jsx | 7 +------ client/homebrew/pages/newPage/newPage.jsx | 7 +------ client/homebrew/utils/commonEditPageFunctions.js | 5 ++++- 4 files changed, 7 insertions(+), 19 deletions(-) diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx index 75043aa44..003fc64ec 100644 --- a/client/homebrew/pages/editPage/editPage.jsx +++ b/client/homebrew/pages/editPage/editPage.jsx @@ -78,11 +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(); @@ -344,7 +339,7 @@ const EditPage = (props)=>{ autoSaveEnabled, setAutoSaveEnabled, setWarnUnsavedChanges, - unsavedChangesRef, + unsavedChanges, setUnsavedChanges, trySave, sandbox, diff --git a/client/homebrew/pages/homePage/homePage.jsx b/client/homebrew/pages/homePage/homePage.jsx index 2c0de0e0a..1adb77e9a 100644 --- a/client/homebrew/pages/homePage/homePage.jsx +++ b/client/homebrew/pages/homePage/homePage.jsx @@ -65,11 +65,6 @@ const HomePage =(props)=>{ 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') @@ -168,7 +163,7 @@ const HomePage =(props)=>{ autoSaveEnabled, setAutoSaveEnabled, setWarnUnsavedChanges, - unsavedChangesRef, + unsavedChanges, setUnsavedChanges, sandbox, lastSavedBrew diff --git a/client/homebrew/pages/newPage/newPage.jsx b/client/homebrew/pages/newPage/newPage.jsx index c4f21c982..ea15199c8 100644 --- a/client/homebrew/pages/newPage/newPage.jsx +++ b/client/homebrew/pages/newPage/newPage.jsx @@ -66,7 +66,6 @@ const NewPage = (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(()=>{ loadBrew(); @@ -101,10 +100,6 @@ const NewPage = (props)=>{ window.history.replaceState({}, window.location.title, '/new/'); }; - useEffect(()=>{ - unsavedChangesRef.current = unsavedChanges; - }); - const handleSplitMove = ()=>{ editorRef.current.update(); }; @@ -222,7 +217,7 @@ const NewPage = (props)=>{ autoSaveEnabled, setAutoSaveEnabled, setWarnUnsavedChanges, - unsavedChangesRef, + unsavedChanges, setUnsavedChanges, trySave, sandbox, diff --git a/client/homebrew/utils/commonEditPageFunctions.js b/client/homebrew/utils/commonEditPageFunctions.js index 96368d15b..4a75feaf8 100644 --- a/client/homebrew/utils/commonEditPageFunctions.js +++ b/client/homebrew/utils/commonEditPageFunctions.js @@ -24,11 +24,13 @@ export default function useCommonEditPageFunctions(dependencies) { trySave = ()=>{}, sandbox, saveGoogle = false, - unsavedChangesRef, + unsavedChanges, setUnsavedChanges, lastSavedBrew } = 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); @@ -63,6 +65,7 @@ export default function useCommonEditPageFunctions(dependencies) { useEffect(()=>{ const hasChange = !_.isEqual(currentBrew, lastSavedBrew.current); setUnsavedChanges(hasChange); + unsavedChangesRef.current = hasChange; if(autoSaveEnabled) trySave(false, hasChange, saveGoogle); }, [currentBrew]); From 9441582aa379915a68ba619e128356e076701e24 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Sat, 12 Sep 2026 12:50:27 -0400 Subject: [PATCH 2/2] Move handleSplitMove to common hook --- client/homebrew/pages/editPage/editPage.jsx | 8 +++----- client/homebrew/pages/homePage/homePage.jsx | 14 ++++++-------- client/homebrew/pages/newPage/newPage.jsx | 14 ++++++-------- client/homebrew/utils/commonEditPageFunctions.js | 8 ++++++-- 4 files changed, 21 insertions(+), 23 deletions(-) diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx index 003fc64ec..dea5606f2 100644 --- a/client/homebrew/pages/editPage/editPage.jsx +++ b/client/homebrew/pages/editPage/editPage.jsx @@ -79,10 +79,6 @@ const EditPage = (props)=>{ const saveTimeout = useRef(null); const warnUnsavedTimeout = useRef(null); - const handleSplitMove = ()=>{ - editorRef.current?.update(); - }; - const updateBrew = (newData)=>setCurrentBrew((prevBrew)=>({ ...prevBrew, style : newData.style, @@ -321,6 +317,7 @@ const EditPage = (props)=>{ }; const { + handleSplitMove, handleBrewChange } = useCommonEditPageFunctions({ saveGoogle, @@ -343,7 +340,8 @@ const EditPage = (props)=>{ setUnsavedChanges, trySave, sandbox, - lastSavedBrew + lastSavedBrew, + editorRef }); return ( diff --git a/client/homebrew/pages/homePage/homePage.jsx b/client/homebrew/pages/homePage/homePage.jsx index 1adb77e9a..1e02d67b8 100644 --- a/client/homebrew/pages/homePage/homePage.jsx +++ b/client/homebrew/pages/homePage/homePage.jsx @@ -62,8 +62,8 @@ 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 save = ()=>{ @@ -79,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); @@ -145,7 +141,8 @@ const HomePage =(props)=>{ ; }; - const { + const { + handleSplitMove, handleBrewChange } = useCommonEditPageFunctions({ setError, @@ -166,7 +163,8 @@ const HomePage =(props)=>{ unsavedChanges, setUnsavedChanges, sandbox, - lastSavedBrew + lastSavedBrew, + editorRef }); return ( diff --git a/client/homebrew/pages/newPage/newPage.jsx b/client/homebrew/pages/newPage/newPage.jsx index ea15199c8..8182ac20c 100644 --- a/client/homebrew/pages/newPage/newPage.jsx +++ b/client/homebrew/pages/newPage/newPage.jsx @@ -62,8 +62,8 @@ 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); @@ -100,10 +100,6 @@ const NewPage = (props)=>{ window.history.replaceState({}, window.location.title, '/new/'); }; - const handleSplitMove = ()=>{ - editorRef.current.update(); - }; - const resetWarnUnsavedTimer = ()=>{ setTimeout(()=>setWarnUnsavedChanges(false), UNSAVED_WARNING_POPUP_TIMEOUT); // Hide the warning after 4 seconds clearTimeout(warnUnsavedTimeout.current); @@ -199,7 +195,8 @@ const NewPage = (props)=>{ ); - const { + const { + handleSplitMove, handleBrewChange } = useCommonEditPageFunctions({ setError, @@ -221,7 +218,8 @@ const NewPage = (props)=>{ setUnsavedChanges, trySave, sandbox, - lastSavedBrew + lastSavedBrew, + editorRef }); return ( diff --git a/client/homebrew/utils/commonEditPageFunctions.js b/client/homebrew/utils/commonEditPageFunctions.js index 4a75feaf8..ff53981f8 100644 --- a/client/homebrew/utils/commonEditPageFunctions.js +++ b/client/homebrew/utils/commonEditPageFunctions.js @@ -26,7 +26,8 @@ export default function useCommonEditPageFunctions(dependencies) { saveGoogle = false, unsavedChanges, setUnsavedChanges, - lastSavedBrew + lastSavedBrew, + editorRef } = dependencies; const unsavedChangesRef = useRef(unsavedChanges); // onBeforeUnload lives outside React and needs ref to unsavedChanges @@ -35,7 +36,6 @@ export default function useCommonEditPageFunctions(dependencies) { 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); @@ -70,6 +70,9 @@ export default function useCommonEditPageFunctions(dependencies) { 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') @@ -95,6 +98,7 @@ export default function useCommonEditPageFunctions(dependencies) { }; return { + handleSplitMove, handleBrewChange } } \ No newline at end of file