+
trySave(true, true, saveGoogle)}>
Save current
diff --git a/client/homebrew/pages/newPage/newPage.jsx b/client/homebrew/pages/newPage/newPage.jsx
index 9db9f11f2..1ec1720f4 100644
--- a/client/homebrew/pages/newPage/newPage.jsx
+++ b/client/homebrew/pages/newPage/newPage.jsx
@@ -28,8 +28,6 @@ import RecentNavItems from '@navbar/recent.navitem.jsx';
const { both: RecentNavItem } = RecentNavItems;
// Page specific imports
-const SAVE_TIMEOUT = 10000;
-
const BREWKEY = 'HB_newPage_content';
const STYLEKEY = 'HB_newPage_style';
const SNIPKEY = 'HB_newPage_snippets';
@@ -96,24 +94,22 @@ const NewPage = (props)=>{
window.history.replaceState({}, window.location.title, '/new/');
};
- const trySave = useEffectEvent(async ()=>{
- setIsSaving(true);
-
- const updatedBrew = { ...currentBrew };
- splitTextStyleAndMetadata(updatedBrew);
-
- const pageRegex = updatedBrew.renderer === 'legacy' ? /\\page/g : /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/gm;
- updatedBrew.pageCount = (updatedBrew.text.match(pageRegex) || []).length + 1;
+ const save = async (brew, saveToGoogle)=>{
+ //Prepare content to send to server
+ const brewToSave = {
+ ...brew,
+ text : brew.text.normalize('NFC'),
+ pageCount : ((brew.renderer === 'legacy' ? brew.text.match(/\\page/g) : brew.text.match(/^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/gm)) || []).length + 1,
+ textBin : undefined
+ };
const res = await request
.post(`/api${saveGoogle ? '?saveToGoogle=true' : ''}`)
- .send(updatedBrew)
+ .send(brewToSave)
.catch((err)=>{
- setIsSaving(false);
+ console.error('Error Updating Local Brew');
setError(err);
});
-
- setIsSaving(false);
if(!res) return;
const savedBrew = res.body;
@@ -123,7 +119,7 @@ const NewPage = (props)=>{
localStorage.removeItem(METAKEY);
window.onbeforeunload = null;
window.location = `/edit/${savedBrew.editId}`;
- });
+ };
const renderSaveButton = ()=>{
// #1 - Currently saving, show SAVING
@@ -146,7 +142,7 @@ const NewPage = (props)=>{
// #3 - Unsaved changes exist, click to save, show SAVE NOW
if(unsavedChanges)
- return
save now;
+ 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)
@@ -188,8 +184,10 @@ const NewPage = (props)=>{
const {
resetWarnUnsavedTimer,
handleSplitMove,
- handleBrewChange
+ handleBrewChange,
+ trySave
} = useCommonEditPageFunctions({
+ saveGoogle,
setError,
setThemeBundle,
HTMLErrors,
@@ -207,10 +205,14 @@ const NewPage = (props)=>{
setWarnUnsavedChanges,
unsavedChanges,
setUnsavedChanges,
- trySave,
sandbox,
lastSavedBrew,
- editorRef
+ editorRef,
+ isSaving,
+ setIsSaving,
+ save,
+ lastSavedTime,
+ setLastSavedTime
});
return (
diff --git a/client/homebrew/utils/commonEditPageFunctions.js b/client/homebrew/utils/commonEditPageFunctions.js
index f0c398ae4..e49e29136 100644
--- a/client/homebrew/utils/commonEditPageFunctions.js
+++ b/client/homebrew/utils/commonEditPageFunctions.js
@@ -1,14 +1,16 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useEffectEvent, useRef } from 'react';
import { printCurrentBrew, fetchThemeBundle } from '@shared/helpers.js';
import _ from 'lodash';
const AUTOSAVE_KEY = 'HB_editor_autoSaveOn';
+const SAVE_TIMEOUT = 10000; //Autosave 10 seconds after last change
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
export default function useCommonEditPageFunctions(dependencies) {
const {
+ saveGoogle,
setError,
setThemeBundle,
HTMLErrors,
@@ -24,18 +26,21 @@ export default function useCommonEditPageFunctions(dependencies) {
autoSaveEnabled,
setAutoSaveEnabled,
setWarnUnsavedChanges,
- trySave = ()=>{},
sandbox,
- saveGoogle = false,
unsavedChanges,
setUnsavedChanges,
lastSavedBrew,
editorRef,
- saveTimeout = undefined
+ isSaving,
+ setIsSaving,
+ save,
+ lastSavedTime,
+ setLastSavedTime
} = dependencies;
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);
//==--------- Page setup ----------==//
useEffect(()=>{
@@ -116,10 +121,30 @@ export default function useCommonEditPageFunctions(dependencies) {
setWarnUnsavedChanges(autoSaveEnabled);
};
+ const trySave = useEffectEvent((forceSave = false, hasChanges = true, saveToGoogle = false)=>{
+ clearTimeout(saveTimeout.current);
+ if(isSaving) return;
+ if(!forceSave && !hasChanges) return;
+ const newTimeout = forceSave ? 0 : SAVE_TIMEOUT;
+
+ saveTimeout.current = setTimeout(async ()=>{
+ setIsSaving(true);
+ setError(null);
+ await save(currentBrew, saveToGoogle)
+ .catch((err)=>{
+ setError(err);
+ });
+ setIsSaving(false);
+ setLastSavedTime(new Date());
+ if(!autoSaveEnabled) resetWarnUnsavedTimer();
+ }, newTimeout);
+ });
+
return {
resetWarnUnsavedTimer,
handleSplitMove,
handleBrewChange,
- toggleAutoSave
+ toggleAutoSave,
+ trySave,
}
}
\ No newline at end of file