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

Merge pull request #5008 from naturalcrit/New/Edit/Home-Common-startup-events

Browse Source 
Give "unsaved change" warning to NewPage and HomePage.
This commit is contained in:
Trevor Buckner
2026-09-09 20:01:48 -04:00
committed by GitHub
parent 06b5dbca23 e4d6611027
commit e159faa013
3 changed files with 93 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/homebrew/pages/editPage/editPage.jsx
+9 -7
View File
@@ -50,7 +50,7 @@ const SNIPKEY = 'HB_newPage_snippets';
const METAKEY = 'HB_newPage_meta'; const METAKEY = 'HB_newPage_meta';
const useLocalStorage = false; const useLocalStorage = false;
const neverSaved = false; const sandbox = false;
const EditPage = (props)=>{ const EditPage = (props)=>{
props = { props = {
@@ -101,7 +101,8 @@ const EditPage = (props)=>{
}); });
useEffect(()=>{ useEffect(()=>{
const autoSavePref = JSON.parse(localStorage.getItem(AUTOSAVE_KEY) ?? true); const autoSavePref = !sandbox && JSON.parse(localStorage.getItem(AUTOSAVE_KEY) ?? true);
setAutoSaveEnabled(autoSavePref); setAutoSaveEnabled(autoSavePref);
setWarnUnsavedChanges(!autoSavePref); setWarnUnsavedChanges(!autoSavePref);
setHTMLErrors(hbfm.validate(currentBrew.text)); setHTMLErrors(hbfm.validate(currentBrew.text));
@@ -122,6 +123,7 @@ const EditPage = (props)=>{
if(unsavedChangesRef.current) if(unsavedChangesRef.current)
return 'You have unsaved changes!'; return 'You have unsaved changes!';
}; };
return ()=>{ return ()=>{
document.removeEventListener('keydown', handleControlKeys); document.removeEventListener('keydown', handleControlKeys);
window.onbeforeunload = null; window.onbeforeunload = null;
@@ -313,8 +315,8 @@ const EditPage = (props)=>{
resetWarnUnsavedTimer(); resetWarnUnsavedTimer();
const elapsedTime = Math.round((new Date() - lastSavedTime) / 1000 / 60); const elapsedTime = Math.round((new Date() - lastSavedTime) / 1000 / 60);
const text = elapsedTime === 0 const text = elapsedTime === 0
? 'Autosave is OFF.' ? `Autosave is OFF${sandbox ? ' for this sandbox page' : ''}.`
: `Autosave is OFF, and you haven't saved for ${elapsedTime} minutes.`; : `Autosave is OFF${sandbox ? ' for this sandbox page' : ''}, and you haven't saved for ${elapsedTime} minutes.`;
return <Nav.item className='save error' icon='fas fa-exclamation-circle'> return <Nav.item className='save error' icon='fas fa-exclamation-circle'>
Reminder... Reminder...
@@ -330,9 +332,9 @@ const EditPage = (props)=>{
if(autoSaveEnabled) if(autoSaveEnabled)
return <Nav.item className='save saved'>auto-saved</Nav.item>; return <Nav.item className='save saved'>auto-saved</Nav.item>;
// #5 - No unsaved changes, and has never been saved, hide the button // #5 - Sandbox with no unsaved changes, and has never been saved, hide the button
if(neverSaved) if(sandbox)
return <Nav.item className='save neverSaved' disabled={true}>save now</Nav.item>; return <Nav.item className='save sandbox' disabled={true}>save now</Nav.item>;
// DEFAULT - No unsaved changes, show SAVED // DEFAULT - No unsaved changes, show SAVED
return <Nav.item className='save saved'>saved</Nav.item>; return <Nav.item className='save saved'>saved</Nav.item>;
client/homebrew/pages/homePage/homePage.jsx
+39 -19
View File
@@ -32,13 +32,18 @@ const { both: RecentNavItem } = RecentNavItems;
import Headtags from '@vitreum/headtags.js'; import Headtags from '@vitreum/headtags.js';
const Meta = Headtags.Meta; const Meta = Headtags.Meta;
const BREWKEY = 'homebrewery-new'; const SAVE_TIMEOUT = 10000;
const STYLEKEY = 'homebrewery-new-style'; const UNSAVED_WARNING_TIMEOUT = 900000; //Warn user afer 15 minutes of unsaved changes
const SNIPKEY = 'homebrewery-new-snippets'; const UNSAVED_WARNING_POPUP_TIMEOUT = 4000; //Show the warning for 4 seconds
const METAKEY = 'homebrewery-new-meta';
const AUTOSAVE_KEY = 'HB_editor_autoSaveOn';
const BREWKEY = 'HB_newPage_content';
const STYLEKEY = 'HB_newPage_style';
const SNIPKEY = 'HB_newPage_snippets';
const METAKEY = 'HB_newPage_meta';
const useLocalStorage = false; const useLocalStorage = false;
const neverSaved = true; const sandbox = true;
const HomePage =(props)=>{ const HomePage =(props)=>{
props = { props = {
@@ -55,10 +60,13 @@ const HomePage =(props)=>{
const [themeBundle, setThemeBundle] = useState({}); const [themeBundle, setThemeBundle] = useState({});
const [unsavedChanges, setUnsavedChanges] = useState(false); const [unsavedChanges, setUnsavedChanges] = useState(false);
const [isSaving, setIsSaving] = useState(false); const [isSaving, setIsSaving] = useState(false);
const [autoSaveEnabled, setAutoSaveEnable] = useState(false); const [lastSavedTime, setLastSavedTime] = useState(new Date());
const [autoSaveEnabled, setAutoSaveEnabled] = useState(false);
const [warnUnsavedChanges, setWarnUnsavedChanges] = useState(true);
const editorRef = useRef(null); const editorRef = useRef(null);
const lastSavedBrew = useRef(_.cloneDeep(props.brew)); const lastSavedBrew = useRef(_.cloneDeep(props.brew));
const warnUnsavedTimeout = useRef(null);
const unsavedChangesRef = useRef(unsavedChanges); const unsavedChangesRef = useRef(unsavedChanges);
const { const {
@@ -79,6 +87,11 @@ const HomePage =(props)=>{
}); });
useEffect(()=>{ useEffect(()=>{
const autoSavePref = !sandbox && JSON.parse(localStorage.getItem(AUTOSAVE_KEY) ?? true);
setAutoSaveEnabled(autoSavePref);
setWarnUnsavedChanges(!autoSavePref);
setHTMLErrors(hbfm.validate(currentBrew.text));
fetchThemeBundle(setError, setThemeBundle, currentBrew.renderer, currentBrew.theme); fetchThemeBundle(setError, setThemeBundle, currentBrew.renderer, currentBrew.theme);
const handleControlKeys = (e)=>{ const handleControlKeys = (e)=>{
@@ -96,6 +109,7 @@ const HomePage =(props)=>{
if(unsavedChangesRef.current) if(unsavedChangesRef.current)
return 'You have unsaved changes!'; return 'You have unsaved changes!';
}; };
return ()=>{ return ()=>{
document.removeEventListener('keydown', handleControlKeys); document.removeEventListener('keydown', handleControlKeys);
window.onbeforeunload = null; window.onbeforeunload = null;
@@ -130,24 +144,30 @@ const HomePage =(props)=>{
editorRef.current.update(); editorRef.current.update();
}; };
const resetWarnUnsavedTimer = ()=>{
setTimeout(()=>setWarnUnsavedChanges(false), UNSAVED_WARNING_POPUP_TIMEOUT); // Hide the warning after 4 seconds
clearTimeout(warnUnsavedTimeout.current);
warnUnsavedTimeout.current = setTimeout(()=>setWarnUnsavedChanges(true), UNSAVED_WARNING_TIMEOUT); // 15 minutes between unsaved work warnings
};
const renderSaveButton = ()=>{ const renderSaveButton = ()=>{
// #1 - Currently saving, show SAVING // #1 - Currently saving, show SAVING
if(isSaving) if(isSaving)
return <Nav.item className='save' icon='fas fa-spinner fa-spin'>saving...</Nav.item>; return <Nav.item className='save' icon='fas fa-spinner fa-spin'>saving...</Nav.item>;
// #2 - Unsaved changes exist, autosave is OFF and warning timer has expired, show AUTOSAVE WARNING // #2 - Unsaved changes exist, autosave is OFF and warning timer has expired, show AUTOSAVE WARNING
// if(unsavedChanges && warnUnsavedChanges) { if(unsavedChanges && warnUnsavedChanges) {
// resetWarnUnsavedTimer(); resetWarnUnsavedTimer();
// const elapsedTime = Math.round((new Date() - lastSavedTime) / 1000 / 60); const elapsedTime = Math.round((new Date() - lastSavedTime) / 1000 / 60);
// const text = elapsedTime === 0 const text = elapsedTime === 0
// ? 'Autosave is OFF.' ? `Autosave is OFF${sandbox ? ' for this sandbox page' : ''}.`
// : `Autosave is OFF, and you haven't saved for ${elapsedTime} minutes.`; : `Autosave is OFF${sandbox ? ' for this sandbox page' : ''}, and you haven't saved for ${elapsedTime} minutes.`;
// return <Nav.item className='save error' icon='fas fa-exclamation-circle'> return <Nav.item className='save error' icon='fas fa-exclamation-circle'>
// Reminder... Reminder...
// <div className='errorContainer'>{text}</div> <div className='errorContainer'>{text}</div>
// </Nav.item>; </Nav.item>;
// } }
// #3 - Unsaved changes exist, click to save, show SAVE NOW // #3 - Unsaved changes exist, click to save, show SAVE NOW
if(unsavedChanges) if(unsavedChanges)
@@ -157,8 +177,8 @@ const HomePage =(props)=>{
if(autoSaveEnabled) if(autoSaveEnabled)
return <Nav.item className='save saved'>auto-saved</Nav.item>; return <Nav.item className='save saved'>auto-saved</Nav.item>;
// #5 - No unsaved changes, and has never been saved, hide the button // #5 - Sandbox with no unsaved changes, and has never been saved, hide the button
if(neverSaved) if(sandbox)
return <Nav.item className='save neverSaved' disabled={true}>save now</Nav.item>; return <Nav.item className='save neverSaved' disabled={true}>save now</Nav.item>;
// DEFAULT - No unsaved changes, show SAVED // DEFAULT - No unsaved changes, show SAVED
client/homebrew/pages/newPage/newPage.jsx
+43 -17
View File
@@ -28,15 +28,20 @@ import RecentNavItems from '@navbar/recent.navitem.jsx';
const { both: RecentNavItem } = RecentNavItems; const { both: RecentNavItem } = RecentNavItems;
// Page specific imports // Page specific imports
const SAVE_TIMEOUT = 10000;
const UNSAVED_WARNING_TIMEOUT = 900000; //Warn user afer 15 minutes of unsaved changes
const UNSAVED_WARNING_POPUP_TIMEOUT = 4000; //Show the warning for 4 seconds
const AUTOSAVE_KEY = 'HB_editor_autoSaveOn';
const BREWKEY = 'HB_newPage_content'; const BREWKEY = 'HB_newPage_content';
const STYLEKEY = 'HB_newPage_style'; const STYLEKEY = 'HB_newPage_style';
const METAKEY = 'HB_newPage_metadata';
const SNIPKEY = 'HB_newPage_snippets'; const SNIPKEY = 'HB_newPage_snippets';
const METAKEY = 'HB_newPage_meta';
const SAVEKEYPREFIX = 'HB_editor_defaultSave_'; const SAVEKEYPREFIX = 'HB_editor_defaultSave_';
const useLocalStorage = true; const useLocalStorage = true;
const neverSaved = true; const sandbox = true;
const NewPage = (props)=>{ const NewPage = (props)=>{
props = { props = {
@@ -46,6 +51,7 @@ const NewPage = (props)=>{
const [currentBrew, setCurrentBrew] = useState(props.brew); const [currentBrew, setCurrentBrew] = useState(props.brew);
const [isSaving, setIsSaving] = useState(false); const [isSaving, setIsSaving] = useState(false);
const [lastSavedTime, setLastSavedTime] = useState(new Date());
const [saveGoogle, setSaveGoogle] = useState(global.account?.googleId ? true : false); const [saveGoogle, setSaveGoogle] = useState(global.account?.googleId ? true : false);
const [error, setError] = useState(null); const [error, setError] = useState(null);
const [HTMLErrors, setHTMLErrors] = useState(hbfm.validate(props.brew.text)); const [HTMLErrors, setHTMLErrors] = useState(hbfm.validate(props.brew.text));
@@ -55,14 +61,19 @@ const NewPage = (props)=>{
const [themeBundle, setThemeBundle] = useState({}); const [themeBundle, setThemeBundle] = useState({});
const [unsavedChanges, setUnsavedChanges] = useState(false); const [unsavedChanges, setUnsavedChanges] = useState(false);
const [autoSaveEnabled, setAutoSaveEnabled] = useState(false); const [autoSaveEnabled, setAutoSaveEnabled] = useState(false);
const [warnUnsavedChanges, setWarnUnsavedChanges] = useState(true);
const editorRef = useRef(null); const editorRef = useRef(null);
const lastSavedBrew = useRef(_.cloneDeep(props.brew)); const lastSavedBrew = useRef(_.cloneDeep(props.brew));
// const saveTimeout = useRef(null); // const saveTimeout = useRef(null);
// const warnUnsavedTimeout = 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 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 unsavedChangesRef = useRef(unsavedChanges); // Similarly, onBeforeUnload lives outside React and needs ref to unsavedChanges
useEffect(()=>{
loadBrew();
}, []);
const { const {
handleBrewChange handleBrewChange
} = useCommonEditPageFunctions({ } = useCommonEditPageFunctions({
@@ -81,7 +92,11 @@ const NewPage = (props)=>{
}); });
useEffect(()=>{ useEffect(()=>{
loadBrew(); const autoSavePref = !sandbox && JSON.parse(localStorage.getItem(AUTOSAVE_KEY) ?? true);
setAutoSaveEnabled(autoSavePref);
setWarnUnsavedChanges(!autoSavePref);
setHTMLErrors(hbfm.validate(currentBrew.text));
fetchThemeBundle(setError, setThemeBundle, currentBrew.renderer, currentBrew.theme); fetchThemeBundle(setError, setThemeBundle, currentBrew.renderer, currentBrew.theme);
const handleControlKeys = (e)=>{ const handleControlKeys = (e)=>{
@@ -95,9 +110,14 @@ const NewPage = (props)=>{
}; };
document.addEventListener('keydown', handleControlKeys); document.addEventListener('keydown', handleControlKeys);
window.onbeforeunload = ()=>{
if(unsavedChangesRef.current)
return 'You have unsaved changes!';
};
return ()=>{ return ()=>{
document.removeEventListener('keydown', handleControlKeys); document.removeEventListener('keydown', handleControlKeys);
window.onbeforeunload = null;
}; };
}, []); }, []);
@@ -146,6 +166,12 @@ const NewPage = (props)=>{
editorRef.current.update(); editorRef.current.update();
}; };
const resetWarnUnsavedTimer = ()=>{
setTimeout(()=>setWarnUnsavedChanges(false), UNSAVED_WARNING_POPUP_TIMEOUT); // Hide the warning after 4 seconds
clearTimeout(warnUnsavedTimeout.current);
warnUnsavedTimeout.current = setTimeout(()=>setWarnUnsavedChanges(true), UNSAVED_WARNING_TIMEOUT); // 15 minutes between unsaved work warnings
};
const trySave = async ()=>{ const trySave = async ()=>{
setIsSaving(true); setIsSaving(true);
@@ -180,18 +206,18 @@ const NewPage = (props)=>{
return <Nav.item className='save' icon='fas fa-spinner fa-spin'>saving...</Nav.item>; return <Nav.item className='save' icon='fas fa-spinner fa-spin'>saving...</Nav.item>;
// #2 - Unsaved changes exist, autosave is OFF and warning timer has expired, show AUTOSAVE WARNING // #2 - Unsaved changes exist, autosave is OFF and warning timer has expired, show AUTOSAVE WARNING
// if(unsavedChanges && warnUnsavedChanges) { if(unsavedChanges && warnUnsavedChanges) {
// resetWarnUnsavedTimer(); resetWarnUnsavedTimer();
// const elapsedTime = Math.round((new Date() - lastSavedTime) / 1000 / 60); const elapsedTime = Math.round((new Date() - lastSavedTime) / 1000 / 60);
// const text = elapsedTime === 0 const text = elapsedTime === 0
// ? 'Autosave is OFF.' ? `Autosave is OFF${sandbox ? ' for this sandbox page' : ''}.`
// : `Autosave is OFF, and you haven't saved for ${elapsedTime} minutes.`; : `Autosave is OFF${sandbox ? ' for this sandbox page' : ''}, and you haven't saved for ${elapsedTime} minutes.`;
// return <Nav.item className='save error' icon='fas fa-exclamation-circle'> return <Nav.item className='save error' icon='fas fa-exclamation-circle'>
// Reminder... Reminder...
// <div className='errorContainer'>{text}</div> <div className='errorContainer'>{text}</div>
// </Nav.item>; </Nav.item>;
// } }
// #3 - Unsaved changes exist, click to save, show SAVE NOW // #3 - Unsaved changes exist, click to save, show SAVE NOW
if(unsavedChanges) if(unsavedChanges)
@@ -201,8 +227,8 @@ const NewPage = (props)=>{
if(autoSaveEnabled) if(autoSaveEnabled)
return <Nav.item className='save saved'>auto-saved</Nav.item>; return <Nav.item className='save saved'>auto-saved</Nav.item>;
// #5 - No unsaved changes, and has never been saved, hide the button // #5 - Sandbox with no unsaved changes, and has never been saved, hide the button
if(neverSaved) if(sandbox)
return <Nav.item className='save neverSaved' disabled={true}>save now</Nav.item>; return <Nav.item className='save neverSaved' disabled={true}>save now</Nav.item>;
// DEFAULT - No unsaved changes, show SAVED // DEFAULT - No unsaved changes, show SAVED