diff --git a/client/homebrew/pages/basePages/editPage/editPage.jsx b/client/homebrew/pages/basePages/editPage/editPage.jsx index bba1d5bc9..082b89896 100644 --- a/client/homebrew/pages/basePages/editPage/editPage.jsx +++ b/client/homebrew/pages/basePages/editPage/editPage.jsx @@ -11,6 +11,15 @@ const AccountNavItem = require('../../../navbar/account.navitem.jsx'); const RecentNavItem = require('../../../navbar/recent.navitem.jsx').both; const VaultNavItem = require('../../../navbar/vault.navitem.jsx'); +const SplitPane = require('client/components/splitPane/splitPane.jsx'); +const Editor = require('../../../editor/editor.jsx'); +const BrewRenderer = require('../../../brewRenderer/brewRenderer.jsx'); + +const { fetchThemeBundle } = require('../../../../../shared/helpers.js'); + +import { useEffect, useState, useRef } from 'react'; +import Markdown from 'naturalcrit/markdown.js'; + const BREWKEY = 'homebrewery-new'; const STYLEKEY = 'homebrewery-new-style'; const METAKEY = 'homebrewery-new-meta'; @@ -87,6 +96,39 @@ const BaseEditPage = (props)=>{ setError(null); setIsSaving(false); }; + + const save = async ()=>{ + setIsSaving(true); + await props.performSave(brew, saveGoogle) + .catch((err)=>{ + setError(err); + }); + setIsSaving(false) + }; + + const handleControlKeys = (e)=>{ + if(!(e.ctrlKey || e.metaKey)) return; + const S_KEY = 83; + const P_KEY = 80; + if(e.keyCode == S_KEY) save(); + if(e.keyCode == P_KEY) BrewRenderer.printCurrentBrew(); + if(e.keyCode == P_KEY || e.keyCode == S_KEY){ + e.stopPropagation(); + e.preventDefault(); + } + }; + + useEffect(() => { + props.loadBrew?.(brew, setBrew, setSaveGoogle); //Initial load from localStorage/etc. + + document.addEventListener('keydown', handleControlKeys); + return document.removeEventListener('keydown', handleControlKeys); + }, []); + + useEffect(() => { + fetchThemeBundle(setError, setThemeBundle, brew.renderer, brew.theme); + }, [brew.renderer, brew.theme]); + return (
@@ -94,7 +136,13 @@ const BaseEditPage = (props)=>{ {props.brew.title} - {props.navButtons} + {error + ? + : props.saveButton?.(save, isSaving) + } + {props.renderUniqueNav?.()} + + diff --git a/client/homebrew/pages/homePage/homePage.jsx b/client/homebrew/pages/homePage/homePage.jsx index 2eb6f3f61..a38267617 100644 --- a/client/homebrew/pages/homePage/homePage.jsx +++ b/client/homebrew/pages/homePage/homePage.jsx @@ -5,14 +5,9 @@ const cx = require('classnames'); import request from '../../utils/request-middleware.js'; const { Meta } = require('vitreum/headtags'); -const Nav = require('naturalcrit/nav/nav.jsx'); -const ErrorNavItem = require('../../navbar/error-navitem.jsx'); -const { fetchThemeBundle } = require('../../../../shared/helpers.js'); + const BaseEditPage = require('../basePages/editPage/editPage.jsx'); -const SplitPane = require('client/components/splitPane/splitPane.jsx'); -const Editor = require('../../editor/editor.jsx'); -const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx'); const { DEFAULT_BREW } = require('../../../../server/brewDefaults.js'); @@ -24,58 +19,20 @@ const HomePage = createClass({ }; }, - editor : React.createRef(null), - - componentDidMount : function() { - fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme); - }, - - save : function(){ - this.setState({ - isSaving : true - }); - - request.post('/api') - .send(this.state.brew) - .end((err, res)=>{ - if(err) { - this.setState({ error: err }); - return; - } - const brew = res.body; - window.location = `/edit/${brew.editId}`; - }) - .catch((err)=>{ - this.setState({ isSaving: false, error: err }); + save : function(brew){ + return request + .post('/api') + .send(brew) + .then((res) => { + const saved = res.body; + window.location = `/edit/${saved.editId}`; }); }, - renderSaveButton : function(){ - if(this.state.isSaving){ - return - save... - ; - } else { - return - save - ; - } - }, - - renderNavbar : function(){ - return <> - - {this.state.error ? - : - null - } - - ; - }, render : function(){ return diff --git a/client/homebrew/pages/newPage/newPage.jsx b/client/homebrew/pages/newPage/newPage.jsx index 7270df289..7647ec20b 100644 --- a/client/homebrew/pages/newPage/newPage.jsx +++ b/client/homebrew/pages/newPage/newPage.jsx @@ -4,24 +4,16 @@ const React = require('react'); const createClass = require('create-react-class'); import request from '../../utils/request-middleware.js'; -import Markdown from 'naturalcrit/markdown.js'; - const Nav = require('naturalcrit/nav/nav.jsx'); -const ErrorNavItem = require('../../navbar/error-navitem.jsx'); const BaseEditPage = require('../basePages/editPage/editPage.jsx'); -const SplitPane = require('client/components/splitPane/splitPane.jsx'); -const Editor = require('../../editor/editor.jsx'); -const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx'); const { DEFAULT_BREW } = require('../../../../server/brewDefaults.js'); -const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpers.js'); const BREWKEY = 'homebrewery-new'; const STYLEKEY = 'homebrewery-new-style'; const METAKEY = 'homebrewery-new-meta'; -let SAVEKEY; - +const SAVEKEY = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${global.account?.username || ''}`; const NewPage = createClass({ displayName : 'NewPage', @@ -31,37 +23,24 @@ const NewPage = createClass({ }; }, - - editor : React.createRef(null), - - componentDidMount : function() { - document.addEventListener('keydown', this.handleControlKeys); - - const brew = this.state.brew; - - if(!this.props.brew.shareId && typeof window !== 'undefined') { //Load from localStorage if in client browser + loadBrew : function(brew, setBrew, setSaveGoogle) { + if(!brew.shareId && typeof window !== 'undefined') { //Load from localStorage if in client browser + //TODO: Move localstorage handling to BaseEditPage? const brewStorage = localStorage.getItem(BREWKEY); const styleStorage = localStorage.getItem(STYLEKEY); - const metaStorage = JSON.parse(localStorage.getItem(METAKEY)); + const metaStorage = JSON.parse(localStorage.getItem(METAKEY)); - brew.text = brewStorage ?? brew.text; - brew.style = styleStorage ?? brew.style; - // brew.title = metaStorage?.title || this.state.brew.title; - // brew.description = metaStorage?.description || this.state.brew.description; + brew.text = brewStorage ?? brew.text; + brew.style = styleStorage ?? brew.style; brew.renderer = metaStorage?.renderer ?? brew.renderer; brew.theme = metaStorage?.theme ?? brew.theme; brew.lang = metaStorage?.lang ?? brew.lang; } - SAVEKEY = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${global.account?.username || ''}`; const saveStorage = localStorage.getItem(SAVEKEY) || 'HOMEBREWERY'; - this.setState({ - brew : brew, - saveGoogle : (saveStorage == 'GOOGLE-DRIVE' && this.state.saveGoogle) - }); - - fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme); + setBrew(brew); + setSaveGoogle(saveStorage == 'GOOGLE-DRIVE' && this.state.saveGoogle); localStorage.setItem(BREWKEY, brew.text); if(brew.style) @@ -71,67 +50,38 @@ const NewPage = createClass({ window.history.replaceState({}, window.location.title, '/new/'); } }, - componentWillUnmount : function() { - document.removeEventListener('keydown', this.handleControlKeys); - }, - - - save : async function(){ - this.setState({ - isSaving : true - }); - - let brew = this.state.brew; - // Split out CSS to Style if CSS codefence exists - if(brew.text.startsWith('```css') && brew.text.indexOf('```\n\n') > 0) { - const index = brew.text.indexOf('```\n\n'); - brew.style = `${brew.style ? `${brew.style}\n` : ''}${brew.text.slice(7, index - 1)}`; - brew.text = brew.text.slice(index + 5); - } + save : async function(brew, saveGoogle){ brew.pageCount=((brew.renderer=='legacy' ? brew.text.match(/\\page/g) : brew.text.match(/^\\page$/gm)) || []).length + 1; - const res = await request - .post(`/api${this.state.saveGoogle ? '?saveToGoogle=true' : ''}`) + return request + .post(`/api${saveGoogle ? '?saveToGoogle=true' : ''}`) .send(brew) - .catch((err)=>{ - this.setState({ isSaving: false, error: err }); + .then((res) => { + //TODO: Move localstorage handling to BaseEditPage? + localStorage.removeItem(BREWKEY); + localStorage.removeItem(STYLEKEY); + localStorage.removeItem(METAKEY); + const saved = res.body; + window.location = `/edit/${saved.editId}`; }); - if(!res) return; - - brew = res.body; - localStorage.removeItem(BREWKEY); - localStorage.removeItem(STYLEKEY); - localStorage.removeItem(METAKEY); - window.location = `/edit/${brew.editId}`; }, - renderSaveButton : function(){ - if(this.state.isSaving){ + renderSaveButton : function(save, isSaving){ + if(isSaving){ return save... ; } else { - return + return save ; } }, - renderNavbar : function(){ - return <> - - {this.state.error ? - : - this.renderSaveButton() - } - - ; - }, - render : function(){ return