Merge pull request #5014 from naturalcrit/new/edit/Home-Move-unsavedChange-checker-to-common-hook

New/edit/home move unsaved change checker to common hook
This commit is contained in:
Trevor Buckner
2026-09-12 12:53:32 -04:00
committed by GitHub
4 changed files with 28 additions and 42 deletions
+4 -11
View File
@@ -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 (
+7 -14
View File
@@ -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)=>{
</Navbar>;
};
const {
const {
handleSplitMove,
handleBrewChange
} = useCommonEditPageFunctions({
setError,
@@ -168,10 +160,11 @@ const HomePage =(props)=>{
autoSaveEnabled,
setAutoSaveEnabled,
setWarnUnsavedChanges,
unsavedChangesRef,
unsavedChanges,
setUnsavedChanges,
sandbox,
lastSavedBrew
lastSavedBrew,
editorRef
});
return (
+7 -14
View File
@@ -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)=>{
</Navbar>
);
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 (
@@ -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
}
}