From 7c2344460f5e71788084bd2b771dc22502c4e105 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Mon, 14 Sep 2026 21:08:04 +0000 Subject: [PATCH] Move RenderSaveButton over --- client/homebrew/pages/editPage/editPage.jsx | 52 +------------------ client/homebrew/pages/homePage/homePage.jsx | 52 +------------------ client/homebrew/pages/newPage/newPage.jsx | 52 +------------------ .../homebrew/utils/commonEditPageFunctions.js | 50 ++++++++++++++---- 4 files changed, 44 insertions(+), 162 deletions(-) diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx index 1c1cceb7a..d8f550ff4 100644 --- a/client/homebrew/pages/editPage/editPage.jsx +++ b/client/homebrew/pages/editPage/editPage.jsx @@ -53,8 +53,6 @@ const EditPage = (props)=>{ }; const [currentBrew, setCurrentBrew] = useState(props.brew); - const [isSaving, setIsSaving] = useState(false); - const [lastSavedTime, setLastSavedTime] = useState(new Date()); const [saveGoogle, setSaveGoogle] = useState(!!props.brew.googleId); const [error, setError] = useState(null); const [HTMLErrors, setHTMLErrors] = useState(hbfm.validate(props.brew.text)); @@ -62,13 +60,10 @@ const EditPage = (props)=>{ const [currentEditorCursorPageNum, setCurrentEditorCursorPageNum] = useState(1); const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1); const [themeBundle, setThemeBundle] = useState({}); - const [unsavedChanges, setUnsavedChanges] = useState(false); const [alertTrashedGoogleBrew, setAlertTrashedGoogleBrew] = useState(props.brew.trashed); const [alertNoGoogleToTransfer, setAlertNoGoogleToTransfer] = useState(false); const [alertOwnershipToTransfer, setAlertOwnershipToTransfer] = useState(false); const [confirmGoogleTransfer, setConfirmGoogleTransfer] = useState(false); - const [autoSaveEnabled, setAutoSaveEnabled] = useState(true); - const [warnUnsavedChanges, setWarnUnsavedChanges] = useState(true); const editorRef = useRef(null); const lastSavedBrew = useRef(_.cloneDeep(props.brew)); @@ -206,41 +201,6 @@ const EditPage = (props)=>{ ); - const renderSaveButton = ()=>{ - // #1 - Currently saving, show SAVING - if(isSaving) - return saving...; - - // #2 - Unsaved changes exist, autosave is OFF and warning timer has expired, show AUTOSAVE WARNING - if(unsavedChanges && warnUnsavedChanges) { - resetWarnUnsavedTimer(); - const elapsedTime = Math.round((new Date() - lastSavedTime) / 1000 / 60); - const text = elapsedTime === 0 - ? `Autosave is OFF${sandbox ? ' for this sandbox page' : ''}.` - : `Autosave is OFF${sandbox ? ' for this sandbox page' : ''}, and you haven't saved for ${elapsedTime} minutes.`; - - return - Reminder... -
{text}
- ; - } - - // #3 - Unsaved changes exist, click to save, show SAVE NOW - if(unsavedChanges) - return trySave(true, true, saveGoogle)} color='blue' icon='fas fa-save'>save now; - - // #4 - No unsaved changes, autosave is ON, show AUTO-SAVED - if(autoSaveEnabled) - return auto-saved; - - // #5 - Sandbox with no unsaved changes, and has never been saved, hide the button - if(sandbox) - return save now; - - // DEFAULT - No unsaved changes, show SAVED - return saved; - }; - const renderAutoSaveButton = ()=>( Autosave @@ -273,11 +233,12 @@ const EditPage = (props)=>{ }; const { - resetWarnUnsavedTimer, handleSplitMove, handleBrewChange, toggleAutoSave, clearError, + renderSaveButton, + autoSaveEnabled, trySave } = useCommonEditPageFunctions({ saveGoogle, @@ -293,19 +254,10 @@ const EditPage = (props)=>{ SNIPKEY, METAKEY, hbfm, - autoSaveEnabled, - setAutoSaveEnabled, - setWarnUnsavedChanges, - unsavedChanges, - setUnsavedChanges, sandbox, lastSavedBrew, editorRef, - isSaving, - setIsSaving, save, - lastSavedTime, - setLastSavedTime }); return ( diff --git a/client/homebrew/pages/homePage/homePage.jsx b/client/homebrew/pages/homePage/homePage.jsx index b7e6bff82..d571c74ea 100644 --- a/client/homebrew/pages/homePage/homePage.jsx +++ b/client/homebrew/pages/homePage/homePage.jsx @@ -53,11 +53,6 @@ const HomePage =(props)=>{ const [currentEditorCursorPageNum, setCurrentEditorCursorPageNum] = useState(1); const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1); const [themeBundle, setThemeBundle] = useState({}); - const [unsavedChanges, setUnsavedChanges] = useState(false); - const [isSaving, setIsSaving] = useState(false); - const [lastSavedTime, setLastSavedTime] = useState(new Date()); - const [autoSaveEnabled, setAutoSaveEnabled] = useState(false); - const [warnUnsavedChanges, setWarnUnsavedChanges] = useState(true); const editorRef = useRef(null); const lastSavedBrew = useRef(_.cloneDeep(props.brew)); @@ -77,41 +72,6 @@ const HomePage =(props)=>{ window.location = `/edit/${saved.editId}`; }; - const renderSaveButton = ()=>{ - // #1 - Currently saving, show SAVING - if(isSaving) - return saving...; - - // #2 - Unsaved changes exist, autosave is OFF and warning timer has expired, show AUTOSAVE WARNING - if(unsavedChanges && warnUnsavedChanges) { - resetWarnUnsavedTimer(); - const elapsedTime = Math.round((new Date() - lastSavedTime) / 1000 / 60); - const text = elapsedTime === 0 - ? `Autosave is OFF${sandbox ? ' for this sandbox page' : ''}.` - : `Autosave is OFF${sandbox ? ' for this sandbox page' : ''}, and you haven't saved for ${elapsedTime} minutes.`; - - return - Reminder... -
{text}
- ; - } - - // #3 - Unsaved changes exist, click to save, show SAVE NOW - if(unsavedChanges) - return trySave(true, true, saveGoogle)} color='blue' icon='fas fa-save'>save now; - - // #4 - No unsaved changes, autosave is ON, show AUTO-SAVED - if(autoSaveEnabled) - return auto-saved; - - // #5 - Sandbox with no unsaved changes, and has never been saved, hide the button - if(sandbox) - return save now; - - // DEFAULT - No unsaved changes, show SAVED - return saved; - }; - const renderNavbar = ()=>{ return @@ -129,10 +89,11 @@ const HomePage =(props)=>{ }; const { - resetWarnUnsavedTimer, handleSplitMove, handleBrewChange, clearError, + renderSaveButton, + unsavedChanges, trySave } = useCommonEditPageFunctions({ saveGoogle, @@ -148,19 +109,10 @@ const HomePage =(props)=>{ SNIPKEY, METAKEY, hbfm, - autoSaveEnabled, - setAutoSaveEnabled, - setWarnUnsavedChanges, - unsavedChanges, - setUnsavedChanges, sandbox, lastSavedBrew, editorRef, - isSaving, - setIsSaving, save, - lastSavedTime, - setLastSavedTime }); return ( diff --git a/client/homebrew/pages/newPage/newPage.jsx b/client/homebrew/pages/newPage/newPage.jsx index 2e756bc0d..bbeb1ed52 100644 --- a/client/homebrew/pages/newPage/newPage.jsx +++ b/client/homebrew/pages/newPage/newPage.jsx @@ -45,8 +45,6 @@ const NewPage = (props)=>{ }; const [currentBrew, setCurrentBrew] = useState(props.brew); - const [isSaving, setIsSaving] = useState(false); - const [lastSavedTime, setLastSavedTime] = useState(new Date()); const [saveGoogle, setSaveGoogle] = useState(global.account?.googleId ? true : false); const [error, setError] = useState(null); const [HTMLErrors, setHTMLErrors] = useState(hbfm.validate(props.brew.text)); @@ -54,9 +52,6 @@ const NewPage = (props)=>{ const [currentEditorCursorPageNum, setCurrentEditorCursorPageNum] = useState(1); const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1); const [themeBundle, setThemeBundle] = useState({}); - const [unsavedChanges, setUnsavedChanges] = useState(false); - const [autoSaveEnabled, setAutoSaveEnabled] = useState(false); - const [warnUnsavedChanges, setWarnUnsavedChanges] = useState(true); const editorRef = useRef(null); const lastSavedBrew = useRef(_.cloneDeep(props.brew)); @@ -121,41 +116,6 @@ const NewPage = (props)=>{ window.location = `/edit/${savedBrew.editId}`; }; - const renderSaveButton = ()=>{ - // #1 - Currently saving, show SAVING - if(isSaving) - return saving...; - - // #2 - Unsaved changes exist, autosave is OFF and warning timer has expired, show AUTOSAVE WARNING - if(unsavedChanges && warnUnsavedChanges) { - resetWarnUnsavedTimer(); - const elapsedTime = Math.round((new Date() - lastSavedTime) / 1000 / 60); - const text = elapsedTime === 0 - ? `Autosave is OFF${sandbox ? ' for this sandbox page' : ''}.` - : `Autosave is OFF${sandbox ? ' for this sandbox page' : ''}, and you haven't saved for ${elapsedTime} minutes.`; - - return - Reminder... -
{text}
- ; - } - - // #3 - Unsaved changes exist, click to save, show SAVE NOW - if(unsavedChanges) - return trySave(true, true, saveGoogle)} color='blue' icon='fas fa-save'>save now; - - // #4 - No unsaved changes, autosave is ON, show AUTO-SAVED - if(autoSaveEnabled) - return auto-saved; - - // #5 - Sandbox with no unsaved changes, and has never been saved, hide the button - if(sandbox) - return save now; - - // DEFAULT - No unsaved changes, show SAVED - return saved; - }; - const renderNavbar = ()=>( @@ -177,11 +137,10 @@ const NewPage = (props)=>{ ); const { - resetWarnUnsavedTimer, handleSplitMove, handleBrewChange, clearError, - trySave + renderSaveButton } = useCommonEditPageFunctions({ saveGoogle, setError, @@ -196,19 +155,10 @@ const NewPage = (props)=>{ SNIPKEY, METAKEY, hbfm, - autoSaveEnabled, - setAutoSaveEnabled, - setWarnUnsavedChanges, - unsavedChanges, - setUnsavedChanges, sandbox, lastSavedBrew, editorRef, - isSaving, - setIsSaving, save, - lastSavedTime, - setLastSavedTime }); return ( diff --git a/client/homebrew/utils/commonEditPageFunctions.js b/client/homebrew/utils/commonEditPageFunctions.js index 7d23a1fb4..89cd2e35e 100644 --- a/client/homebrew/utils/commonEditPageFunctions.js +++ b/client/homebrew/utils/commonEditPageFunctions.js @@ -1,6 +1,7 @@ import React, { useState, useEffect, useEffectEvent, useRef } from 'react'; import { printCurrentBrew, fetchThemeBundle } from '@shared/helpers.js'; import _ from 'lodash'; +import Nav from '@navbar/nav.jsx'; const AUTOSAVE_KEY = 'HB_editor_autoSaveOn'; @@ -23,21 +24,18 @@ export default function useCommonEditPageFunctions(dependencies) { SNIPKEY, METAKEY, hbfm, - autoSaveEnabled, - setAutoSaveEnabled, - setWarnUnsavedChanges, sandbox, - unsavedChanges, - setUnsavedChanges, lastSavedBrew, editorRef, - isSaving, - setIsSaving, save, - lastSavedTime, - setLastSavedTime } = dependencies; + const [isSaving, setIsSaving] = useState(false); + const [lastSavedTime, setLastSavedTime] = useState(new Date()); + const [autoSaveEnabled, setAutoSaveEnabled] = useState(!sandbox); + const [warnUnsavedChanges, setWarnUnsavedChanges] = useState(true); + const [unsavedChanges, setUnsavedChanges] = useState(false); + const unsavedChangesRef = useRef(unsavedChanges); // onBeforeUnload lives outside React and needs ref to unsavedChanges const warnUnsavedTimeout = useRef(null); // timers live outside React and need ref to consistently track time const saveTimeout = useRef(null); @@ -59,7 +57,6 @@ export default function useCommonEditPageFunctions(dependencies) { e.preventDefault(); } }; - document.addEventListener('keydown', handleControlKeys); window.onbeforeunload = ()=>{ if(unsavedChangesRef.current) @@ -145,12 +142,43 @@ export default function useCommonEditPageFunctions(dependencies) { }, newTimeout); }); + const renderSaveButton = ()=>{ + if(isSaving) + return saving...; + + if(unsavedChanges && warnUnsavedChanges) { + resetWarnUnsavedTimer(); + const elapsedTime = Math.round((new Date() - lastSavedTime) / 1000 / 60); + const text = elapsedTime === 0 + ? `Autosave is OFF${sandbox ? ' for this sandbox page' : ''}.` + : `Autosave is OFF${sandbox ? ' for this sandbox page' : ''}, and you haven't saved for ${elapsedTime} minutes.`; + + return + Reminder... +
{text}
+ ; + } + + if(unsavedChanges) + return trySave(true, true, saveGoogle)} color='blue' icon='fas fa-save'>save now; + + if(autoSaveEnabled) + return auto-saved; + + if(sandbox) + return save now; + + return saved; + }; + return { - resetWarnUnsavedTimer, handleSplitMove, handleBrewChange, toggleAutoSave, clearError, trySave, + renderSaveButton, + autoSaveEnabled, + unsavedChanges, } } \ No newline at end of file