mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-09-20 12:22:59 +00:00
Merge pull request #5009 from naturalcrit/new/edit/home-exctractcommonsetupsteps
New/Edit/Home Move setup effects to common functions
This commit is contained in:
@@ -8,7 +8,6 @@ import { hbfm } from 'hbmarkedwrapper';
|
||||
import _ from 'lodash';
|
||||
|
||||
import { DEFAULT_BREW_LOAD } from '../../../../server/brewDefaults.js';
|
||||
import { printCurrentBrew, fetchThemeBundle } from '@shared/helpers.js';
|
||||
|
||||
import useCommonEditPageFunctions from '../../utils/commonEditPageFunctions.js'
|
||||
|
||||
@@ -43,7 +42,6 @@ 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 STYLEKEY = 'HB_newPage_style';
|
||||
const SNIPKEY = 'HB_newPage_snippets';
|
||||
@@ -90,46 +88,23 @@ const EditPage = (props)=>{
|
||||
setThemeBundle,
|
||||
HTMLErrors,
|
||||
setHTMLErrors,
|
||||
currentBrew,
|
||||
setCurrentBrew,
|
||||
useLocalStorage,
|
||||
BREWKEY,
|
||||
STYLEKEY,
|
||||
SNIPKEY,
|
||||
METAKEY,
|
||||
fetchThemeBundle,
|
||||
hbfm
|
||||
hbfm,
|
||||
autoSaveEnabled,
|
||||
setAutoSaveEnabled,
|
||||
setWarnUnsavedChanges,
|
||||
trySaveRef,
|
||||
unsavedChangesRef,
|
||||
sandbox,
|
||||
saveGoogle
|
||||
});
|
||||
|
||||
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);
|
||||
|
||||
const handleControlKeys = (e)=>{
|
||||
if(!(e.ctrlKey || e.metaKey)) return;
|
||||
if(e.keyCode === 83) trySaveRef.current(true, true, saveGoogle);
|
||||
if(e.keyCode === 80) printCurrentBrew();
|
||||
if([83, 80].includes(e.keyCode)) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', handleControlKeys);
|
||||
window.onbeforeunload = ()=>{
|
||||
if(unsavedChangesRef.current)
|
||||
return 'You have unsaved changes!';
|
||||
};
|
||||
|
||||
return ()=>{
|
||||
document.removeEventListener('keydown', handleControlKeys);
|
||||
window.onbeforeunload = null;
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(()=>{
|
||||
trySaveRef.current = trySave;
|
||||
unsavedChangesRef.current = unsavedChanges;
|
||||
|
||||
@@ -8,7 +8,6 @@ import { hbfm } from 'hbmarkedwrapper';
|
||||
import _ from 'lodash';
|
||||
|
||||
import { DEFAULT_BREW } from '../../../../server/brewDefaults.js';
|
||||
import { printCurrentBrew, fetchThemeBundle } from '@shared/helpers.js';
|
||||
|
||||
import useCommonEditPageFunctions from '../../utils/commonEditPageFunctions.js'
|
||||
|
||||
@@ -36,7 +35,6 @@ 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 STYLEKEY = 'HB_newPage_style';
|
||||
const SNIPKEY = 'HB_newPage_snippets';
|
||||
@@ -67,6 +65,7 @@ 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 {
|
||||
@@ -76,46 +75,22 @@ const HomePage =(props)=>{
|
||||
setThemeBundle,
|
||||
HTMLErrors,
|
||||
setHTMLErrors,
|
||||
currentBrew,
|
||||
setCurrentBrew,
|
||||
useLocalStorage,
|
||||
BREWKEY,
|
||||
STYLEKEY,
|
||||
SNIPKEY,
|
||||
METAKEY,
|
||||
fetchThemeBundle,
|
||||
hbfm
|
||||
hbfm,
|
||||
autoSaveEnabled,
|
||||
setAutoSaveEnabled,
|
||||
setWarnUnsavedChanges,
|
||||
trySaveRef,
|
||||
unsavedChangesRef,
|
||||
sandbox
|
||||
});
|
||||
|
||||
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);
|
||||
|
||||
const handleControlKeys = (e)=>{
|
||||
if(!(e.ctrlKey || e.metaKey)) return;
|
||||
if(e.keyCode === 83) trySaveRef.current(true);
|
||||
if(e.keyCode === 80) printCurrentBrew();
|
||||
if([83, 80].includes(e.keyCode)) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', handleControlKeys);
|
||||
window.onbeforeunload = ()=>{
|
||||
if(unsavedChangesRef.current)
|
||||
return 'You have unsaved changes!';
|
||||
};
|
||||
|
||||
return ()=>{
|
||||
document.removeEventListener('keydown', handleControlKeys);
|
||||
window.onbeforeunload = null;
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(()=>{
|
||||
unsavedChangesRef.current = unsavedChanges;
|
||||
}, [unsavedChanges]);
|
||||
|
||||
@@ -32,7 +32,6 @@ 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 STYLEKEY = 'HB_newPage_style';
|
||||
const SNIPKEY = 'HB_newPage_snippets';
|
||||
@@ -81,46 +80,22 @@ const NewPage = (props)=>{
|
||||
setThemeBundle,
|
||||
HTMLErrors,
|
||||
setHTMLErrors,
|
||||
currentBrew,
|
||||
setCurrentBrew,
|
||||
useLocalStorage,
|
||||
BREWKEY,
|
||||
STYLEKEY,
|
||||
SNIPKEY,
|
||||
METAKEY,
|
||||
fetchThemeBundle,
|
||||
hbfm
|
||||
hbfm,
|
||||
autoSaveEnabled,
|
||||
setAutoSaveEnabled,
|
||||
setWarnUnsavedChanges,
|
||||
trySaveRef,
|
||||
unsavedChangesRef,
|
||||
sandbox
|
||||
});
|
||||
|
||||
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);
|
||||
|
||||
const handleControlKeys = (e)=>{
|
||||
if(!(e.ctrlKey || e.metaKey)) return;
|
||||
if(e.keyCode === 83) trySaveRef.current(true);
|
||||
if(e.keyCode === 80) printCurrentBrew();
|
||||
if([83, 80].includes(e.keyCode)) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', handleControlKeys);
|
||||
window.onbeforeunload = ()=>{
|
||||
if(unsavedChangesRef.current)
|
||||
return 'You have unsaved changes!';
|
||||
};
|
||||
|
||||
return ()=>{
|
||||
document.removeEventListener('keydown', handleControlKeys);
|
||||
window.onbeforeunload = null;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const loadBrew = ()=>{
|
||||
const brew = { ...currentBrew };
|
||||
if(!brew.shareId && typeof window !== 'undefined') { //Load from localStorage if in client browser
|
||||
|
||||
@@ -1,43 +1,85 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { printCurrentBrew, fetchThemeBundle } from '@shared/helpers.js';
|
||||
|
||||
const AUTOSAVE_KEY = 'HB_editor_autoSaveOn';
|
||||
|
||||
export default function useCommonEditPageFunctions(dependencies) {
|
||||
const {
|
||||
setError,
|
||||
setThemeBundle,
|
||||
HTMLErrors,
|
||||
setHTMLErrors,
|
||||
setCurrentBrew,
|
||||
useLocalStorage,
|
||||
BREWKEY,
|
||||
STYLEKEY,
|
||||
SNIPKEY,
|
||||
METAKEY,
|
||||
fetchThemeBundle,
|
||||
hbfm
|
||||
} = dependencies;
|
||||
const {
|
||||
setError,
|
||||
setThemeBundle,
|
||||
HTMLErrors,
|
||||
setHTMLErrors,
|
||||
currentBrew,
|
||||
setCurrentBrew,
|
||||
useLocalStorage,
|
||||
BREWKEY,
|
||||
STYLEKEY,
|
||||
SNIPKEY,
|
||||
METAKEY,
|
||||
hbfm,
|
||||
autoSaveEnabled,
|
||||
setAutoSaveEnabled,
|
||||
setWarnUnsavedChanges,
|
||||
trySaveRef,
|
||||
sandbox,
|
||||
saveGoogle = false,
|
||||
unsavedChangesRef
|
||||
} = dependencies;
|
||||
|
||||
const handleBrewChange = (field)=>(value, subfield)=>{ //'text', 'style', 'snippets', 'metadata'
|
||||
if(subfield == 'renderer' || subfield == 'theme')
|
||||
fetchThemeBundle(setError, setThemeBundle, value.renderer, value.theme);
|
||||
//==--------- Page setup ----------==//
|
||||
useEffect(()=>{
|
||||
const autoSavePref = !sandbox && JSON.parse(localStorage.getItem(AUTOSAVE_KEY) ?? true);
|
||||
setAutoSaveEnabled(autoSavePref);
|
||||
console.log(autoSavePref)
|
||||
setWarnUnsavedChanges(!autoSavePref);
|
||||
setHTMLErrors(hbfm.validate(currentBrew.text));
|
||||
fetchThemeBundle(setError, setThemeBundle, currentBrew.renderer, currentBrew.theme);
|
||||
|
||||
//If there are HTML errors, run the validator on every change to give quick feedback
|
||||
if(HTMLErrors.length && (field == 'text' || field == 'snippets'))
|
||||
setHTMLErrors(hbfm.validate(value));
|
||||
const handleControlKeys = (e)=>{
|
||||
if(!(e.ctrlKey || e.metaKey)) return;
|
||||
if(e.keyCode === 83) trySaveRef.current(true, true, saveGoogle);
|
||||
if(e.keyCode === 80) printCurrentBrew();
|
||||
if([83, 80].includes(e.keyCode)) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
if(field == 'metadata') setCurrentBrew((prev)=>({ ...prev, ...value }));
|
||||
else setCurrentBrew((prev)=>({ ...prev, [field]: value }));
|
||||
document.addEventListener('keydown', handleControlKeys);
|
||||
window.onbeforeunload = ()=>{
|
||||
if(unsavedChangesRef.current)
|
||||
return 'You have unsaved changes!';
|
||||
};
|
||||
return ()=>{
|
||||
document.removeEventListener('keydown', handleControlKeys);
|
||||
window.onBeforeUnload = null;
|
||||
};
|
||||
}, []);
|
||||
|
||||
if(useLocalStorage) {
|
||||
if(field == 'text') localStorage.setItem(BREWKEY, value);
|
||||
if(field == 'style') localStorage.setItem(STYLEKEY, value);
|
||||
if(field == 'snippets') localStorage.setItem(SNIPKEY, value);
|
||||
if(field == 'metadata') localStorage.setItem(METAKEY, JSON.stringify({
|
||||
renderer : value.renderer,
|
||||
theme : value.theme,
|
||||
lang : value.lang
|
||||
}));
|
||||
}
|
||||
};
|
||||
const handleBrewChange = (field)=>(value, subfield)=>{ //'text', 'style', 'snippets', 'metadata'
|
||||
if(subfield == 'renderer' || subfield == 'theme')
|
||||
fetchThemeBundle(setError, setThemeBundle, value.renderer, value.theme);
|
||||
|
||||
return {
|
||||
handleBrewChange
|
||||
}
|
||||
//If there are HTML errors, run the validator on every change to give quick feedback
|
||||
if(HTMLErrors.length && (field == 'text' || field == 'snippets'))
|
||||
setHTMLErrors(hbfm.validate(value));
|
||||
|
||||
if(field == 'metadata') setCurrentBrew((prev)=>({ ...prev, ...value }));
|
||||
else setCurrentBrew((prev)=>({ ...prev, [field]: value }));
|
||||
|
||||
if(useLocalStorage) {
|
||||
if(field == 'text') localStorage.setItem(BREWKEY, value);
|
||||
if(field == 'style') localStorage.setItem(STYLEKEY, value);
|
||||
if(field == 'snippets') localStorage.setItem(SNIPKEY, value);
|
||||
if(field == 'metadata') localStorage.setItem(METAKEY, JSON.stringify({
|
||||
renderer : value.renderer,
|
||||
theme : value.theme,
|
||||
lang : value.lang
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
handleBrewChange
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user