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