From c2509e860752e23812bb408e331c02c918aadd54 Mon Sep 17 00:00:00 2001 From: André Oliveira <37463445+SpecialAro@users.noreply.github.com> Date: Thu, 4 Aug 2022 00:12:03 +0100 Subject: chore: change values inside mobx actions to fix console warnings (#532) --- src/components/services/content/ServiceWebview.js | 128 -------------------- src/components/services/content/ServiceWebview.jsx | 132 +++++++++++++++++++++ 2 files changed, 132 insertions(+), 128 deletions(-) delete mode 100644 src/components/services/content/ServiceWebview.js create mode 100644 src/components/services/content/ServiceWebview.jsx (limited to 'src/components/services/content') diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js deleted file mode 100644 index 502f87225..000000000 --- a/src/components/services/content/ServiceWebview.js +++ /dev/null @@ -1,128 +0,0 @@ -import { Component } from 'react'; -import PropTypes from 'prop-types'; -import { observer } from 'mobx-react'; -import { makeObservable, observable, reaction } from 'mobx'; -import ElectronWebView from 'react-electron-web-view'; -import { join } from 'path'; - -import ServiceModel from '../../../models/Service'; - -const debug = require('../../../preload-safe-debug')('Ferdium:Services'); - -class ServiceWebview extends Component { - static propTypes = { - service: PropTypes.instanceOf(ServiceModel).isRequired, - setWebviewReference: PropTypes.func.isRequired, - detachService: PropTypes.func.isRequired, - isSpellcheckerEnabled: PropTypes.bool.isRequired, - }; - - @observable webview = null; - - constructor(props) { - super(props); - - makeObservable(this); - - reaction( - () => this.webview, - () => { - if (this.webview && this.webview.view) { - this.webview.view.addEventListener('console-message', e => { - debug('Service logged a message:', e.message); - }); - this.webview.view.addEventListener('did-navigate', () => { - if (this.props.service._webview) { - document.title = `Ferdium - ${this.props.service.name} ${ - this.props.service.dialogTitle - ? ` - ${this.props.service.dialogTitle}` - : '' - } ${`- ${this.props.service._webview.getTitle()}`}`; - } - }); - } - }, - ); - } - - componentWillUnmount() { - const { service, detachService } = this.props; - detachService({ service }); - } - - refocusWebview = () => { - const { webview } = this; - debug('Refocus Webview is called', this.props.service); - if (!webview) return; - if (this.props.service.isActive) { - webview.view.blur(); - webview.view.focus(); - window.setTimeout(() => { - document.title = `Ferdium - ${this.props.service.name} ${ - this.props.service.dialogTitle - ? ` - ${this.props.service.dialogTitle}` - : '' - } ${`- ${this.props.service._webview.getTitle()}`}`; - }, 100); - } else { - debug('Refocus not required - Not active service'); - } - }; - - render() { - const { service, setWebviewReference, isSpellcheckerEnabled } = this.props; - - const preloadScript = join( - __dirname, - '..', - '..', - '..', - 'webview', - 'recipe.js', - ); - - return ( - { - this.webview = webview; - if (webview && webview.view) { - webview.view.addEventListener( - 'did-stop-loading', - this.refocusWebview, - ); - } - }} - autosize - src={service.url} - preload={preloadScript} - partition={service.partition} - onDidAttach={() => { - // Force the event handler to run in a new task. - // This resolves a race condition when the `did-attach` is called, - // but the webview is not attached to the DOM yet: - // https://github.com/electron/electron/issues/31918 - // This prevents us from immediately attaching listeners such as `did-stop-load`: - // https://github.com/ferdium/ferdium-app/issues/157 - setTimeout(() => { - setWebviewReference({ - serviceId: service.id, - webview: this.webview.view, - }); - }, 0); - }} - onUpdateTargetUrl={this.updateTargetUrl} - useragent={service.userAgent} - disablewebsecurity={ - service.recipe.disablewebsecurity ? true : undefined - } - allowpopups - nodeintegration - webpreferences={`spellcheck=${ - isSpellcheckerEnabled ? 1 : 0 - }, contextIsolation=1`} - /> - ); - } -} - -export default observer(ServiceWebview); diff --git a/src/components/services/content/ServiceWebview.jsx b/src/components/services/content/ServiceWebview.jsx new file mode 100644 index 000000000..835c5125e --- /dev/null +++ b/src/components/services/content/ServiceWebview.jsx @@ -0,0 +1,132 @@ +import { Component } from 'react'; +import PropTypes from 'prop-types'; +import { observer } from 'mobx-react'; +import { action, makeObservable, observable, reaction } from 'mobx'; +import ElectronWebView from 'react-electron-web-view'; +import { join } from 'path'; + +import ServiceModel from '../../../models/Service'; + +const debug = require('../../../preload-safe-debug')('Ferdium:Services'); + +class ServiceWebview extends Component { + static propTypes = { + service: PropTypes.instanceOf(ServiceModel).isRequired, + setWebviewReference: PropTypes.func.isRequired, + detachService: PropTypes.func.isRequired, + isSpellcheckerEnabled: PropTypes.bool.isRequired, + }; + + @observable webview = null; + + constructor(props) { + super(props); + + makeObservable(this); + + reaction( + () => this.webview, + () => { + if (this.webview && this.webview.view) { + this.webview.view.addEventListener('console-message', e => { + debug('Service logged a message:', e.message); + }); + this.webview.view.addEventListener('did-navigate', () => { + if (this.props.service._webview) { + document.title = `Ferdium - ${this.props.service.name} ${ + this.props.service.dialogTitle + ? ` - ${this.props.service.dialogTitle}` + : '' + } ${`- ${this.props.service._webview.getTitle()}`}`; + } + }); + } + }, + ); + } + + componentWillUnmount() { + const { service, detachService } = this.props; + detachService({ service }); + } + + refocusWebview = () => { + const { webview } = this; + debug('Refocus Webview is called', this.props.service); + if (!webview) return; + if (this.props.service.isActive) { + webview.view.blur(); + webview.view.focus(); + window.setTimeout(() => { + document.title = `Ferdium - ${this.props.service.name} ${ + this.props.service.dialogTitle + ? ` - ${this.props.service.dialogTitle}` + : '' + } ${`- ${this.props.service._webview.getTitle()}`}`; + }, 100); + } else { + debug('Refocus not required - Not active service'); + } + }; + + @action _setWebview(webview) { + this.webview = webview; + } + + render() { + const { service, setWebviewReference, isSpellcheckerEnabled } = this.props; + + const preloadScript = join( + __dirname, + '..', + '..', + '..', + 'webview', + 'recipe.js', + ); + + return ( + { + this._setWebview(webview); + if (webview && webview.view) { + webview.view.addEventListener( + 'did-stop-loading', + this.refocusWebview, + ); + } + }} + autosize + src={service.url} + preload={preloadScript} + partition={service.partition} + onDidAttach={() => { + // Force the event handler to run in a new task. + // This resolves a race condition when the `did-attach` is called, + // but the webview is not attached to the DOM yet: + // https://github.com/electron/electron/issues/31918 + // This prevents us from immediately attaching listeners such as `did-stop-load`: + // https://github.com/ferdium/ferdium-app/issues/157 + setTimeout(() => { + setWebviewReference({ + serviceId: service.id, + webview: this.webview.view, + }); + }, 0); + }} + onUpdateTargetUrl={this.updateTargetUrl} + useragent={service.userAgent} + disablewebsecurity={ + service.recipe.disablewebsecurity ? true : undefined + } + allowpopups + nodeintegration + webpreferences={`spellcheck=${ + isSpellcheckerEnabled ? 1 : 0 + }, contextIsolation=1`} + /> + ); + } +} + +export default observer(ServiceWebview); -- cgit v1.2.3-70-g09d2