diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx index 990403d6c..b8a254497 100644 --- a/client/homebrew/pages/editPage/editPage.jsx +++ b/client/homebrew/pages/editPage/editPage.jsx @@ -11,10 +11,6 @@ import { DEFAULT_BREW_LOAD } from '../../../../server/brewDefau import useCommonEditPageFunctions from '../../utils/commonEditPageFunctions.jsx'; -import SplitPane from '@components/splitPane/splitPane.jsx'; -import Editor from '../../editor/editor.jsx'; -import BrewRenderer from '../../brewRenderer/brewRenderer.jsx'; - import Nav from '@navbar/nav.jsx'; import Navbar from '@navbar/navbar.jsx'; import NewBrewItem from '@navbar/newbrew.navitem.jsx'; @@ -27,14 +23,11 @@ import RecentNavItems from '@navbar/recent.navitem.jsx'; const { both: RecentNavItem } = RecentNavItems; // Page specific imports -import Headtags from '../../../../vitreum/headtags.js'; -const Meta = Headtags.Meta; import { md5 } from 'hash-wasm'; import { gzipSync, strToU8 } from 'fflate'; import { makePatches, stringifyPatches } from '@sanity/diff-match-patch'; import ShareNavItem from '@navbar/share.navitem.jsx'; -import LockNotification from './lockNotification/lockNotification.jsx'; import { updateHistory, versionHistoryGarbageCollection } from '../../utils/versionHistory.js'; import googleDriveIcon from '../../googleDrive.svg'; @@ -43,8 +36,10 @@ const STYLEKEY = 'HB_newPage_style'; const SNIPKEY = 'HB_newPage_snippets'; const METAKEY = 'HB_newPage_meta'; -const useLocalStorage = false; -const sandbox = false; +const useLocalStorage = false; +const sandbox = false; +const showFloatingButtons = false; +const pageName = "editPage"; const EditPage = (props)=>{ props = { @@ -56,25 +51,13 @@ const EditPage = (props)=>{ const [saveGoogle, setSaveGoogle] = useState(!!props.brew.googleId); const [error, setError] = useState(null); const [HTMLErrors, setHTMLErrors] = useState(hbfm.validate(props.brew.text)); - const [currentEditorViewPageNum, setCurrentEditorViewPageNum] = useState(1); - const [currentEditorCursorPageNum, setCurrentEditorCursorPageNum] = useState(1); - const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1); - const [themeBundle, setThemeBundle] = useState({}); const [alertTrashedGoogleBrew, setAlertTrashedGoogleBrew] = useState(props.brew.trashed); const [alertNoGoogleToTransfer, setAlertNoGoogleToTransfer] = useState(false); const [alertOwnershipToTransfer, setAlertOwnershipToTransfer] = useState(false); const [confirmGoogleTransfer, setConfirmGoogleTransfer] = useState(false); - const editorRef = useRef(null); const lastSavedBrew = useRef(_.cloneDeep(props.brew)); - const updateBrew = (newData)=>setCurrentBrew((prevBrew)=>({ - ...prevBrew, - style : newData.style, - text : newData.text, - snippets : newData.snippets - })); - const handleGoogleClick = ()=>{ if(currentBrew.authors.length > 0 && global.account?.username !== currentBrew.authors[0]) { setAlertOwnershipToTransfer(true); @@ -238,12 +221,13 @@ const EditPage = (props)=>{ toggleAutoSave, clearError, renderSaveButton, + renderPanels, autoSaveEnabled, - trySave + trySave, + currentBrewRendererPageNum } = useCommonEditPageFunctions({ saveGoogle, setError, - setThemeBundle, HTMLErrors, setHTMLErrors, currentBrew, @@ -255,51 +239,15 @@ const EditPage = (props)=>{ METAKEY, hbfm, sandbox, + showFloatingButtons, lastSavedBrew, - editorRef, save, + renderNavbar, + pageName, + userThemes: props.userThemes }); - return ( -
- - - {renderNavbar()} - - {currentBrew.lock && } - -
- - - - -
-
- ); + return renderPanels(); }; export default EditPage; diff --git a/client/homebrew/pages/homePage/homePage.jsx b/client/homebrew/pages/homePage/homePage.jsx index af4c4cbf5..a3fb3e557 100644 --- a/client/homebrew/pages/homePage/homePage.jsx +++ b/client/homebrew/pages/homePage/homePage.jsx @@ -11,10 +11,6 @@ import { DEFAULT_BREW } from '../../../../server/brewDefau import useCommonEditPageFunctions from '../../utils/commonEditPageFunctions.jsx'; -import SplitPane from '@components/splitPane/splitPane.jsx'; -import Editor from '../../editor/editor.jsx'; -import BrewRenderer from '../../brewRenderer/brewRenderer.jsx'; - import Nav from '@navbar/nav.jsx'; import Navbar from '@navbar/navbar.jsx'; import NewBrewItem from '@navbar/newbrew.navitem.jsx'; @@ -28,16 +24,17 @@ const { both: RecentNavItem } = RecentNavItems; // Page specific imports -import Headtags from '@vitreum/headtags.js'; -const Meta = Headtags.Meta; + const BREWKEY = 'HB_newPage_content'; const STYLEKEY = 'HB_newPage_style'; const SNIPKEY = 'HB_newPage_snippets'; const METAKEY = 'HB_newPage_meta'; -const useLocalStorage = false; -const sandbox = true; +const useLocalStorage = false; +const sandbox = true; +const showFloatingButtons = true; +const pageName = "homePage"; const HomePage =(props)=>{ props = { @@ -49,12 +46,7 @@ const HomePage =(props)=>{ const [saveGoogle, setSaveGoogle] = useState(global.account?.googleId ? true : false); const [error, setError] = useState(undefined); const [HTMLErrors, setHTMLErrors] = useState(hbfm.validate(props.brew.text)); - const [currentEditorViewPageNum, setCurrentEditorViewPageNum] = useState(1); - const [currentEditorCursorPageNum, setCurrentEditorCursorPageNum] = useState(1); - const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1); - const [themeBundle, setThemeBundle] = useState({}); - const editorRef = useRef(null); const lastSavedBrew = useRef(_.cloneDeep(props.brew)); const save = async (brew, saveToGoogle)=>{ @@ -93,12 +85,12 @@ const HomePage =(props)=>{ handleBrewChange, clearError, renderSaveButton, + renderPanels, unsavedChanges, trySave } = useCommonEditPageFunctions({ saveGoogle, setError, - setThemeBundle, HTMLErrors, setHTMLErrors, currentBrew, @@ -110,49 +102,15 @@ const HomePage =(props)=>{ METAKEY, hbfm, sandbox, + showFloatingButtons, lastSavedBrew, - editorRef, save, + renderNavbar, + pageName, + userThemes: {} }); - return ( -
- - {renderNavbar()} -
- - - - -
-
trySave(true, true, saveGoogle)}> - Save current -
- - - Create your own - -
- ); + return renderPanels(); }; export default HomePage; diff --git a/client/homebrew/pages/newPage/newPage.jsx b/client/homebrew/pages/newPage/newPage.jsx index b7f8fb7cd..0e86381c1 100644 --- a/client/homebrew/pages/newPage/newPage.jsx +++ b/client/homebrew/pages/newPage/newPage.jsx @@ -12,10 +12,6 @@ import { printCurrentBrew, fetchThemeBundle, splitTextStyleAndMetadata } from '@ import useCommonEditPageFunctions from '../../utils/commonEditPageFunctions.jsx'; -import SplitPane from '@components/splitPane/splitPane.jsx'; -import Editor from '../../editor/editor.jsx'; -import BrewRenderer from '../../brewRenderer/brewRenderer.jsx'; - import Nav from '@navbar/nav.jsx'; import Navbar from '@navbar/navbar.jsx'; import NewBrewItem from '@navbar/newbrew.navitem.jsx'; @@ -35,8 +31,10 @@ const METAKEY = 'HB_newPage_meta'; const SAVEKEYPREFIX = 'HB_editor_defaultSave_'; -const useLocalStorage = true; -const sandbox = true; +const useLocalStorage = true; +const sandbox = true; +const showFloatingButtons = false; +const pageName = "newPage"; const NewPage = (props)=>{ props = { @@ -48,12 +46,7 @@ const NewPage = (props)=>{ const [saveGoogle, setSaveGoogle] = useState(global.account?.googleId ? true : false); const [error, setError] = useState(null); const [HTMLErrors, setHTMLErrors] = useState(hbfm.validate(props.brew.text)); - const [currentEditorViewPageNum, setCurrentEditorViewPageNum] = useState(1); - const [currentEditorCursorPageNum, setCurrentEditorCursorPageNum] = useState(1); - const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1); - const [themeBundle, setThemeBundle] = useState({}); - const editorRef = useRef(null); const lastSavedBrew = useRef(_.cloneDeep(props.brew)); useEffect(()=>{ @@ -140,11 +133,11 @@ const NewPage = (props)=>{ handleSplitMove, handleBrewChange, clearError, - renderSaveButton + renderSaveButton, + renderPanels } = useCommonEditPageFunctions({ saveGoogle, setError, - setThemeBundle, HTMLErrors, setHTMLErrors, currentBrew, @@ -156,44 +149,15 @@ const NewPage = (props)=>{ METAKEY, hbfm, sandbox, + showFloatingButtons, lastSavedBrew, - editorRef, save, + renderNavbar, + pageName, + userThemes: props.userThemes }); - return ( -
- {renderNavbar()} -
- - - - -
-
- ); + return renderPanels(); }; export default NewPage; diff --git a/client/homebrew/utils/commonEditPageFunctions.jsx b/client/homebrew/utils/commonEditPageFunctions.jsx index b4d3022b4..0945b37be 100644 --- a/client/homebrew/utils/commonEditPageFunctions.jsx +++ b/client/homebrew/utils/commonEditPageFunctions.jsx @@ -3,6 +3,13 @@ import { printCurrentBrew, fetchThemeBundle } from '@shared/helpers.js'; import _ from 'lodash'; import Nav from '@navbar/nav.jsx'; +import Headtags from '@vitreum/headtags.js'; +import SplitPane from '@components/splitPane/splitPane.jsx'; +import Editor from '../editor/editor.jsx'; +import BrewRenderer from '../brewRenderer/brewRenderer.jsx'; +import LockNotification from '../pages/editPage/lockNotification/lockNotification.jsx'; +const Meta = Headtags.Meta; + const AUTOSAVE_KEY = 'HB_editor_autoSaveOn'; const SAVE_TIMEOUT = 10000; //Autosave 10 seconds after last change @@ -13,7 +20,6 @@ export default function useCommonEditPageFunctions(dependencies) { const { saveGoogle, setError, - setThemeBundle, HTMLErrors, setHTMLErrors, currentBrew, @@ -25,9 +31,12 @@ export default function useCommonEditPageFunctions(dependencies) { METAKEY, hbfm, sandbox, + showFloatingButtons, lastSavedBrew, - editorRef, save, + renderNavbar, + pageName, + userThemes = {} } = dependencies; const [isSaving, setIsSaving] = useState(false); @@ -35,10 +44,16 @@ export default function useCommonEditPageFunctions(dependencies) { const [autoSaveEnabled, setAutoSaveEnabled] = useState(!sandbox); const [warnUnsavedChanges, setWarnUnsavedChanges] = useState(true); const [unsavedChanges, setUnsavedChanges] = useState(false); + const [themeBundle, setThemeBundle] = useState({}); + + const [currentEditorViewPageNum, setCurrentEditorViewPageNum] = useState(1); + const [currentEditorCursorPageNum, setCurrentEditorCursorPageNum] = useState(1); + const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1); 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); + const editorRef = useRef(null); //==--------- Page setup ----------==// useEffect(()=>{ @@ -171,6 +186,67 @@ export default function useCommonEditPageFunctions(dependencies) { return saved; }; + //TODO: Candidate for removal; only used in editPage, so may not be necessary + const updateBrew = (newData)=>setCurrentBrew((prevBrew)=>({ + ...prevBrew, + style : newData.style, + text : newData.text, + snippets : newData.snippets + })); + + const renderFloatingSaveButtons = ()=>( + <> +
trySave(true, true, saveGoogle)}> + Save current +
+ + + Create your own + + + ); + + const renderPanels = ()=>( +
+ + {(pageName == 'editPage') && } + {renderNavbar()} + {currentBrew.lock && } +
+ + + + +
+ {showFloatingButtons && renderFloatingSaveButtons()} +
+ ); + return { handleSplitMove, handleBrewChange, @@ -178,7 +254,9 @@ export default function useCommonEditPageFunctions(dependencies) { clearError, trySave, renderSaveButton, + renderPanels, autoSaveEnabled, unsavedChanges, + currentBrewRendererPageNum }; } \ No newline at end of file