0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-05-07 16:38:38 +00:00

Change logic to fire on button click, rather than on state change

Ideally side effects (server calls, etc.) should happen outside of useEffect anyway for reasons like this; Putting the save in the button click keeps the logic in one place instead of spread across multiple functions and renders,

(This change was already made in my local copy toward combining Edit/New/Home pages.)
This commit is contained in:
Trevor Buckner
2026-05-04 16:01:39 -04:00
parent adfb9a2128
commit 339d2844a7
+7 -16
View File
@@ -90,7 +90,7 @@ const EditPage = (props)=>{
const handleControlKeys = (e)=>{ const handleControlKeys = (e)=>{
if(!(e.ctrlKey || e.metaKey)) return; if(!(e.ctrlKey || e.metaKey)) return;
if(e.keyCode === 83) trySaveRef.current(true); if(e.keyCode === 83) trySaveRef.current(true, true, saveGoogle);
if(e.keyCode === 80) printCurrentBrew(); if(e.keyCode === 80) printCurrentBrew();
if([83, 80].includes(e.keyCode)) { if([83, 80].includes(e.keyCode)) {
e.stopPropagation(); e.stopPropagation();
@@ -118,20 +118,9 @@ const EditPage = (props)=>{
const hasChange = !_.isEqual(currentBrew, lastSavedBrew.current); const hasChange = !_.isEqual(currentBrew, lastSavedBrew.current);
setUnsavedChanges(hasChange); setUnsavedChanges(hasChange);
if(autoSaveEnabled) trySave(false, hasChange); if(autoSaveEnabled) trySave(false, hasChange, saveGoogle);
}, [currentBrew]); }, [currentBrew]);
const didMount = useRef(false);
useEffect(()=>{
if (!didMount.current) {
didMount.current = true;
return;
}
trySave(true);
}, [saveGoogle]);
const handleSplitMove = ()=>{ const handleSplitMove = ()=>{
editorRef.current?.update(); editorRef.current?.update();
}; };
@@ -190,11 +179,13 @@ const EditPage = (props)=>{
}; };
const toggleGoogleStorage = ()=>{ const toggleGoogleStorage = ()=>{
const newSaveGoogle = !saveGoogle;
setSaveGoogle((prev)=>!prev); setSaveGoogle((prev)=>!prev);
setError(null); setError(null);
trySave(true, true, newSaveGoogle);
}; };
const trySave = (immediate = false, hasChanges = true)=>{ const trySave = (immediate = false, hasChanges = true, saveToGoogle = false)=>{
clearTimeout(saveTimeout.current); clearTimeout(saveTimeout.current);
if(isSaving) return; if(isSaving) return;
if(!hasChanges && !immediate) return; if(!hasChanges && !immediate) return;
@@ -203,7 +194,7 @@ const EditPage = (props)=>{
saveTimeout.current = setTimeout(async ()=>{ saveTimeout.current = setTimeout(async ()=>{
setIsSaving(true); setIsSaving(true);
setError(null); setError(null);
await save(currentBrew, saveGoogle) await save(currentBrew, saveToGoogle)
.catch((err)=>{ .catch((err)=>{
setError(err); setError(err);
}); });
@@ -321,7 +312,7 @@ const EditPage = (props)=>{
// #3 - Unsaved changes exist, click to save, show SAVE NOW // #3 - Unsaved changes exist, click to save, show SAVE NOW
if(unsavedChanges) if(unsavedChanges)
return <Nav.item className='save' onClick={()=>trySave(true)} color='blue' icon='fas fa-save'>save now</Nav.item>; return <Nav.item className='save' onClick={()=>trySave(true, true, saveGoogle)} color='blue' icon='fas fa-save'>save now</Nav.item>;
// #4 - No unsaved changes, autosave is ON, show AUTO-SAVED // #4 - No unsaved changes, autosave is ON, show AUTO-SAVED
if(autoSaveEnabled) if(autoSaveEnabled)