f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-09-20 14:32:57 +00:00
Code Wiki Activity

Convert trySaveRef to useEffectEvent

Browse Source
This commit is contained in:
Trevor Buckner
2026-09-12 12:08:51 -04:00
parent b9ae2cd16c
commit e2cec264a6
4 changed files with 85 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/homebrew/pages/editPage/editPage.jsx
+29 -31
View File
@@ -2,7 +2,7 @@
import './editPage.less';
// Common imports
import React, { useState, useEffect, useRef } from 'react';
import React, { useState, useEffect, useRef, useEffectEvent } from 'react';
import request from '../../utils/request-middleware.js';
import { hbfm } from 'hbmarkedwrapper';
import _ from 'lodash';
@@ -78,37 +78,9 @@ const EditPage = (props)=>{
const lastSavedBrew = useRef(_.cloneDeep(props.brew));
const saveTimeout = useRef(null);
const warnUnsavedTimeout = useRef(null);
const trySaveRef = useRef(null); // CTRL+S listener lives outside React and needs ref to use trySave with latest copy of brew
const unsavedChangesRef = useRef(unsavedChanges); // Similarly, onBeforeUnload lives outside React and needs ref to unsavedChanges
const {
handleBrewChange
} = useCommonEditPageFunctions({
saveGoogle,
setError,
setThemeBundle,
HTMLErrors,
setHTMLErrors,
currentBrew,
setCurrentBrew,
useLocalStorage,
BREWKEY,
STYLEKEY,
SNIPKEY,
METAKEY,
hbfm,
autoSaveEnabled,
setAutoSaveEnabled,
setWarnUnsavedChanges,
trySaveRef,
unsavedChangesRef,
setUnsavedChanges,
sandbox,
lastSavedBrew
});
useEffect(()=>{
trySaveRef.current = trySave;
unsavedChangesRef.current = unsavedChanges;
});
@@ -159,7 +131,7 @@ const EditPage = (props)=>{
trySave(true, true, newSaveGoogle);
};
const trySave = (immediate = false, hasChanges = true, saveToGoogle = false)=>{
const trySave = useEffectEvent((immediate = false, hasChanges = true, saveToGoogle = false)=>{
clearTimeout(saveTimeout.current);
if(isSaving) return;
if(!hasChanges && !immediate) return;
@@ -176,7 +148,7 @@ const EditPage = (props)=>{
setLastSavedTime(new Date());
if(!autoSaveEnabled) resetWarnUnsavedTimer();
}, newTimeout);
};
});
const save = async (brew, saveToGoogle)=>{
setHTMLErrors(hbfm.validate(brew.text));
@@ -353,6 +325,32 @@ const EditPage = (props)=>{
</Navbar>;
};
const {
handleBrewChange
} = useCommonEditPageFunctions({
saveGoogle,
setError,
setThemeBundle,
HTMLErrors,
setHTMLErrors,
currentBrew,
setCurrentBrew,
useLocalStorage,
BREWKEY,
STYLEKEY,
SNIPKEY,
METAKEY,
hbfm,
autoSaveEnabled,
setAutoSaveEnabled,
setWarnUnsavedChanges,
unsavedChangesRef,
setUnsavedChanges,
trySave,
sandbox,
lastSavedBrew
});
return (
<div className='editPage sitePage'>
<Meta name='robots' content='noindex, nofollow' />
client/homebrew/pages/homePage/homePage.jsx
+25 -27
View File
@@ -2,7 +2,7 @@
import './homePage.less';
// Common imports
import React, { useState, useEffect, useRef } from 'react';
import React, { useState, useEffect, useRef, useEffectEvent } from 'react';
import request from '../../utils/request-middleware.js';
import { hbfm } from 'hbmarkedwrapper';
import _ from 'lodash';
@@ -65,34 +65,8 @@ const HomePage =(props)=>{
const editorRef = useRef(null);
const lastSavedBrew = useRef(_.cloneDeep(props.brew));
const warnUnsavedTimeout = useRef(null);
const trySaveRef = useRef(null); // CTRL+S listener lives outside React and needs ref to use trySave with latest copy of brew
const unsavedChangesRef = useRef(unsavedChanges);
const {
handleBrewChange
} = useCommonEditPageFunctions({
setError,
setThemeBundle,
HTMLErrors,
setHTMLErrors,
currentBrew,
setCurrentBrew,
useLocalStorage,
BREWKEY,
STYLEKEY,
SNIPKEY,
METAKEY,
hbfm,
autoSaveEnabled,
setAutoSaveEnabled,
setWarnUnsavedChanges,
trySaveRef,
unsavedChangesRef,
setUnsavedChanges,
sandbox,
lastSavedBrew
});
useEffect(()=>{
unsavedChangesRef.current = unsavedChanges;
}, [unsavedChanges]);
@@ -176,6 +150,30 @@ const HomePage =(props)=>{
</Navbar>;
};
const {
handleBrewChange
} = useCommonEditPageFunctions({
setError,
setThemeBundle,
HTMLErrors,
setHTMLErrors,
currentBrew,
setCurrentBrew,
useLocalStorage,
BREWKEY,
STYLEKEY,
SNIPKEY,
METAKEY,
hbfm,
autoSaveEnabled,
setAutoSaveEnabled,
setWarnUnsavedChanges,
unsavedChangesRef,
setUnsavedChanges,
sandbox,
lastSavedBrew
});
return (
<div className='homePage sitePage'>
<Meta name='google-site-verification' content='NwnAQSSJZzAT7N-p5MY6ydQ7Njm67dtbu73ZSyE5Fy4' />
client/homebrew/pages/newPage/newPage.jsx
+28 -30
View File
@@ -2,7 +2,7 @@
import './newPage.less';
// Common imports
import React, { useState, useEffect, useRef } from 'react';
import React, { useState, useEffect, useRef, useEffectEvent } from 'react';
import request from '../../utils/request-middleware.js';
import { hbfm } from 'hbmarkedwrapper';
import _ from 'lodash';
@@ -66,38 +66,12 @@ const NewPage = (props)=>{
const lastSavedBrew = useRef(_.cloneDeep(props.brew));
// const saveTimeout = useRef(null);
const warnUnsavedTimeout = useRef(null);
const trySaveRef = useRef(null); // CTRL+S listener lives outside React and needs ref to use trySave with latest copy of brew
const unsavedChangesRef = useRef(unsavedChanges); // Similarly, onBeforeUnload lives outside React and needs ref to unsavedChanges
useEffect(()=>{
loadBrew();
}, []);
const {
handleBrewChange
} = useCommonEditPageFunctions({
setError,
setThemeBundle,
HTMLErrors,
setHTMLErrors,
currentBrew,
setCurrentBrew,
useLocalStorage,
BREWKEY,
STYLEKEY,
SNIPKEY,
METAKEY,
hbfm,
autoSaveEnabled,
setAutoSaveEnabled,
setWarnUnsavedChanges,
trySaveRef,
unsavedChangesRef,
setUnsavedChanges,
sandbox,
lastSavedBrew
});
const loadBrew = ()=>{
const brew = { ...currentBrew };
if(!brew.shareId && typeof window !== 'undefined') { //Load from localStorage if in client browser
@@ -128,7 +102,6 @@ const NewPage = (props)=>{
};
useEffect(()=>{
trySaveRef.current = trySave;
unsavedChangesRef.current = unsavedChanges;
});
@@ -142,7 +115,7 @@ const NewPage = (props)=>{
warnUnsavedTimeout.current = setTimeout(()=>setWarnUnsavedChanges(true), UNSAVED_WARNING_TIMEOUT); // 15 minutes between unsaved work warnings
};
const trySave = async ()=>{
const trySave = useEffectEvent(async ()=>{
setIsSaving(true);
const updatedBrew = { ...currentBrew };
@@ -169,7 +142,7 @@ const NewPage = (props)=>{
localStorage.removeItem(METAKEY);
window.onbeforeunload = null;
window.location = `/edit/${savedBrew.editId}`;
};
});
const renderSaveButton = ()=>{
// #1 - Currently saving, show SAVING
@@ -231,6 +204,31 @@ const NewPage = (props)=>{
</Navbar>
);
const {
handleBrewChange
} = useCommonEditPageFunctions({
setError,
setThemeBundle,
HTMLErrors,
setHTMLErrors,
currentBrew,
setCurrentBrew,
useLocalStorage,
BREWKEY,
STYLEKEY,
SNIPKEY,
METAKEY,
hbfm,
autoSaveEnabled,
setAutoSaveEnabled,
setWarnUnsavedChanges,
unsavedChangesRef,
setUnsavedChanges,
trySave,
sandbox,
lastSavedBrew
});
return (
<div className='newPage sitePage'>
{renderNavbar()}
client/homebrew/utils/commonEditPageFunctions.js
+3 -3
View File
@@ -21,7 +21,7 @@ export default function useCommonEditPageFunctions(dependencies) {
autoSaveEnabled,
setAutoSaveEnabled,
setWarnUnsavedChanges,
trySaveRef,
trySave = ()=>{},
sandbox,
saveGoogle = false,
unsavedChangesRef,
@@ -40,7 +40,7 @@ export default function useCommonEditPageFunctions(dependencies) {
const handleControlKeys = (e)=>{
if(!(e.ctrlKey || e.metaKey)) return;
if(e.keyCode === 83) trySaveRef.current(true, true, saveGoogle);
if(e.keyCode === 83) trySave(true, true, saveGoogle);
if(e.keyCode === 80) printCurrentBrew();
if([83, 80].includes(e.keyCode)) {
e.stopPropagation();
@@ -64,7 +64,7 @@ export default function useCommonEditPageFunctions(dependencies) {
const hasChange = !_.isEqual(currentBrew, lastSavedBrew.current);
setUnsavedChanges(hasChange);
if(autoSaveEnabled) trySaveRef.current(false, hasChange, saveGoogle);
if(autoSaveEnabled) trySave(false, hasChange, saveGoogle);
}, [currentBrew]);