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]);