diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx
index 3875b3d04..75043aa44 100644
--- a/client/homebrew/pages/editPage/editPage.jsx
+++ b/client/homebrew/pages/editPage/editPage.jsx
@@ -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)=>{
;
};
+ 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 (
diff --git a/client/homebrew/pages/homePage/homePage.jsx b/client/homebrew/pages/homePage/homePage.jsx
index 278ec6eb3..2c0de0e0a 100644
--- a/client/homebrew/pages/homePage/homePage.jsx
+++ b/client/homebrew/pages/homePage/homePage.jsx
@@ -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)=>{
;
};
+ const {
+ handleBrewChange
+ } = useCommonEditPageFunctions({
+ setError,
+ setThemeBundle,
+ HTMLErrors,
+ setHTMLErrors,
+ currentBrew,
+ setCurrentBrew,
+ useLocalStorage,
+ BREWKEY,
+ STYLEKEY,
+ SNIPKEY,
+ METAKEY,
+ hbfm,
+ autoSaveEnabled,
+ setAutoSaveEnabled,
+ setWarnUnsavedChanges,
+ unsavedChangesRef,
+ setUnsavedChanges,
+ sandbox,
+ lastSavedBrew
+ });
+
return (
diff --git a/client/homebrew/pages/newPage/newPage.jsx b/client/homebrew/pages/newPage/newPage.jsx
index fed59493e..c4f21c982 100644
--- a/client/homebrew/pages/newPage/newPage.jsx
+++ b/client/homebrew/pages/newPage/newPage.jsx
@@ -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)=>{
);
+ const {
+ handleBrewChange
+ } = useCommonEditPageFunctions({
+ setError,
+ setThemeBundle,
+ HTMLErrors,
+ setHTMLErrors,
+ currentBrew,
+ setCurrentBrew,
+ useLocalStorage,
+ BREWKEY,
+ STYLEKEY,
+ SNIPKEY,
+ METAKEY,
+ hbfm,
+ autoSaveEnabled,
+ setAutoSaveEnabled,
+ setWarnUnsavedChanges,
+ unsavedChangesRef,
+ setUnsavedChanges,
+ trySave,
+ sandbox,
+ lastSavedBrew
+ });
+
return (
{renderNavbar()}
diff --git a/client/homebrew/utils/commonEditPageFunctions.js b/client/homebrew/utils/commonEditPageFunctions.js
index df6185506..96368d15b 100644
--- a/client/homebrew/utils/commonEditPageFunctions.js
+++ b/client/homebrew/utils/commonEditPageFunctions.js
@@ -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]);