From d2afa7adeae5327eba70535c396cd83066e521d5 Mon Sep 17 00:00:00 2001 From: David Bolack Date: Tue, 23 Jul 2024 22:17:52 -0500 Subject: [PATCH] Move fetchThemeBundle into /shared/helpers This might not be the best rework - I was unsure if the *this* that would be available when called would see the appropriate object so I assumed not and pass it as a parameter. Works, but may be bad form. --- client/homebrew/pages/editPage/editPage.jsx | 17 +++-------------- client/homebrew/pages/homePage/homePage.jsx | 14 ++------------ client/homebrew/pages/newPage/newPage.jsx | 17 +++-------------- client/homebrew/pages/sharePage/sharePage.jsx | 15 ++------------- shared/helpers.js | 13 ++++++++++++- 5 files changed, 22 insertions(+), 54 deletions(-) diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx index 05bd79d4d..39a6d1931 100644 --- a/client/homebrew/pages/editPage/editPage.jsx +++ b/client/homebrew/pages/editPage/editPage.jsx @@ -25,7 +25,7 @@ const LockNotification = require('./lockNotification/lockNotification.jsx'); const Markdown = require('naturalcrit/markdown.js'); const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js'); -const { printCurrentBrew } = require('../../../../shared/helpers.js'); +const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpers.js'); const googleDriveIcon = require('../../googleDrive.svg'); @@ -88,7 +88,7 @@ const EditPage = createClass({ htmlErrors : Markdown.validate(prevState.brew.text) })); - this.fetchThemeBundle(this.props.brew.renderer, this.props.brew.theme); + fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme); document.addEventListener('keydown', this.handleControlKeys); }, @@ -135,7 +135,7 @@ const EditPage = createClass({ handleMetaChange : function(metadata, field=undefined){ if(field == 'theme' || field == 'renderer') // Fetch theme bundle only if theme or renderer was changed - this.fetchThemeBundle(metadata.renderer, metadata.theme); + fetchThemeBundle(this, metadata.renderer, metadata.theme); this.setState((prevState)=>({ brew : { @@ -150,17 +150,6 @@ const EditPage = createClass({ return !_.isEqual(this.state.brew, this.savedBrew); }, - // Loads the theme bundle and parses it out. Called when the iFrame is first mounted, and when a new theme is selected - fetchThemeBundle : function(renderer, theme) { - fetch(`${window.location.protocol}//${window.location.host}/theme/${renderer}/${theme}`).then((response)=>response.json()).then((themeBundle)=>{ - themeBundle.joinedStyles = themeBundle.styles.map((style)=>``).join('\n\n'); //DOMPurify.sanitize(joinedStyles, purifyConfig); - this.setState((prevState)=>({ // MOVE TO MOUNT STEP OF SHARE / NEW / EDIT - ...prevState, - themeBundle : themeBundle - })); - }); - }, - trySave : function(immediate=false){ if(!this.debounceSave) this.debounceSave = _.debounce(this.save, SAVE_TIMEOUT); if(this.hasChanges()){ diff --git a/client/homebrew/pages/homePage/homePage.jsx b/client/homebrew/pages/homePage/homePage.jsx index 0609d5b8b..bcfd237b4 100644 --- a/client/homebrew/pages/homePage/homePage.jsx +++ b/client/homebrew/pages/homePage/homePage.jsx @@ -13,6 +13,7 @@ const HelpNavItem = require('../../navbar/help.navitem.jsx'); const RecentNavItem = require('../../navbar/recent.navitem.jsx').both; const AccountNavItem = require('../../navbar/account.navitem.jsx'); const ErrorNavItem = require('../../navbar/error-navitem.jsx'); +const { fetchThemeBundle } = require('../../../../shared/helpers.js'); const SplitPane = require('naturalcrit/splitPane/splitPane.jsx'); @@ -42,18 +43,7 @@ const HomePage = createClass({ editor : React.createRef(null), componentDidMount : function() { - this.fetchThemeBundle(this.props.brew.renderer, this.props.brew.theme); - }, - - // Loads the theme bundle and parses it out. Called when the iFrame is first mounted, and when a new theme is selected - fetchThemeBundle : function(renderer, theme) { - fetch(`${window.location.protocol}//${window.location.host}/theme/${renderer}/${theme}`).then((response)=>response.json()).then((themeBundle)=>{ - themeBundle.joinedStyles = themeBundle.styles.map((style)=>``).join('\n\n'); //DOMPurify.sanitize(joinedStyles, purifyConfig); - this.setState((prevState)=>({ // MOVE TO MOUNT STEP OF SHARE / NEW / EDIT - ...prevState, - themeBundle : themeBundle - })); - }); + fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme); }, handleSave : function(){ diff --git a/client/homebrew/pages/newPage/newPage.jsx b/client/homebrew/pages/newPage/newPage.jsx index e8c2636b0..c9160062f 100644 --- a/client/homebrew/pages/newPage/newPage.jsx +++ b/client/homebrew/pages/newPage/newPage.jsx @@ -19,7 +19,7 @@ const Editor = require('../../editor/editor.jsx'); const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx'); const { DEFAULT_BREW } = require('../../../../server/brewDefaults.js'); -const { printCurrentBrew } = require('../../../../shared/helpers.js'); +const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpers.js'); const BREWKEY = 'homebrewery-new'; const STYLEKEY = 'homebrewery-new-style'; @@ -78,7 +78,7 @@ const NewPage = createClass({ saveGoogle : (saveStorage == 'GOOGLE-DRIVE' && this.state.saveGoogle) }); - this.fetchThemeBundle(this.props.brew.renderer, this.props.brew.theme); + fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme); localStorage.setItem(BREWKEY, brew.text); if(brew.style) @@ -89,17 +89,6 @@ const NewPage = createClass({ document.removeEventListener('keydown', this.handleControlKeys); }, - // Loads the theme bundle and parses it out. Called when the iFrame is first mounted, and when a new theme is selected - fetchThemeBundle : function(renderer, theme) { - fetch(`${window.location.protocol}//${window.location.host}/theme/${renderer}/${theme}`).then((response)=>response.json()).then((themeBundle)=>{ - themeBundle.joinedStyles = themeBundle.styles.map((style)=>``).join('\n\n'); //DOMPurify.sanitize(joinedStyles, purifyConfig); - this.setState((prevState)=>({ // MOVE TO MOUNT STEP OF SHARE / NEW / EDIT - ...prevState, - themeBundle : themeBundle - })); - }); - }, - handleControlKeys : function(e){ if(!(e.ctrlKey || e.metaKey)) return; const S_KEY = 83; @@ -138,7 +127,7 @@ const NewPage = createClass({ handleMetaChange : function(metadata, field=undefined){ if(field == 'theme' || field == 'renderer') // Fetch theme bundle only if theme or renderer was changed - this.fetchThemeBundle(metadata.renderer, metadata.theme); + fetchThemeBundle(this, metadata.renderer, metadata.theme); this.setState((prevState)=>({ brew : { ...prevState.brew, ...metadata }, diff --git a/client/homebrew/pages/sharePage/sharePage.jsx b/client/homebrew/pages/sharePage/sharePage.jsx index c1f044d2d..390e577d0 100644 --- a/client/homebrew/pages/sharePage/sharePage.jsx +++ b/client/homebrew/pages/sharePage/sharePage.jsx @@ -12,7 +12,7 @@ const Account = require('../../navbar/account.navitem.jsx'); const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx'); const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js'); -const { printCurrentBrew } = require('../../../../shared/helpers.js'); +const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpers.js'); const SharePage = createClass({ displayName : 'SharePage', @@ -31,24 +31,13 @@ const SharePage = createClass({ componentDidMount : function() { document.addEventListener('keydown', this.handleControlKeys); - this.fetchThemeBundle(this.props.brew.renderer, this.props.brew.theme); + fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme); }, componentWillUnmount : function() { document.removeEventListener('keydown', this.handleControlKeys); }, - // Loads the theme bundle and parses it out. Called when the iFrame is first mounted, and when a new theme is selected - fetchThemeBundle : function(renderer, theme) { - fetch(`${window.location.protocol}//${window.location.host}/theme/${renderer}/${theme}`).then((response)=>response.json()).then((themeBundle)=>{ - themeBundle.joinedStyles = themeBundle.styles.map((style)=>``).join('\n\n'); //DOMPurify.sanitize(joinedStyles, purifyConfig); - this.setState((prevState)=>({ // MOVE TO MOUNT STEP OF SHARE / NEW / EDIT - ...prevState, - themeBundle : themeBundle - })); - }); - }, - handleControlKeys : function(e){ if(!(e.ctrlKey || e.metaKey)) return; const P_KEY = 80; diff --git a/shared/helpers.js b/shared/helpers.js index 321791f84..8f9e23928 100644 --- a/shared/helpers.js +++ b/shared/helpers.js @@ -33,7 +33,18 @@ const printCurrentBrew = ()=>{ } }; +const fetchThemeBundle = (obj, renderer, theme)=>{ + fetch(`${window.location.protocol}//${window.location.host}/theme/${renderer}/${theme}`).then((response)=>response.json()).then((themeBundle)=>{ + themeBundle.joinedStyles = themeBundle.styles.map((style)=>``).join('\n\n'); //DOMPurify.sanitize(joinedStyles, purifyConfig); + obj.setState((prevState)=>({ // MOVE TO MOUNT STEP OF SHARE / NEW / EDIT + ...prevState, + themeBundle : themeBundle + })); + }); +}; + module.exports = { splitTextStyleAndMetadata, - printCurrentBrew + printCurrentBrew, + fetchThemeBundle, };