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) --- .../webControls/containers/WebControlsScreen.js | 143 ------------------- .../webControls/containers/WebControlsScreen.jsx | 151 +++++++++++++++++++++ 2 files changed, 151 insertions(+), 143 deletions(-) delete mode 100644 src/features/webControls/containers/WebControlsScreen.js create mode 100644 src/features/webControls/containers/WebControlsScreen.jsx (limited to 'src/features/webControls/containers') diff --git a/src/features/webControls/containers/WebControlsScreen.js b/src/features/webControls/containers/WebControlsScreen.js deleted file mode 100644 index e5567eec5..000000000 --- a/src/features/webControls/containers/WebControlsScreen.js +++ /dev/null @@ -1,143 +0,0 @@ -import { Component } from 'react'; -import { observer, inject } from 'mobx-react'; -import PropTypes from 'prop-types'; - -import { autorun, makeObservable, observable } from 'mobx'; -import WebControls from '../components/WebControls'; -import ServicesStore from '../../../stores/ServicesStore'; -import Service from '../../../models/Service'; -import { SEARCH_ENGINE_URLS } from '../../../config'; -import AppStore from '../../../stores/AppStore'; - -const URL_EVENTS = [ - 'load-commit', - 'will-navigate', - 'did-navigate', - 'did-navigate-in-page', -]; - -class WebControlsScreen extends Component { - @observable url = ''; - - @observable canGoBack = false; - - @observable canGoForward = false; - - webview = null; - - autorunDisposer = null; - - constructor(props) { - super(props); - - makeObservable(this); - } - - componentDidMount() { - const { service } = this.props; - - this.autorunDisposer = autorun(() => { - if (service.isAttached) { - this.webview = service.webview; - this.url = this.webview.getURL(); - - for (const event of URL_EVENTS) { - this.webview.addEventListener(event, e => { - if (!e.isMainFrame) return; - - this.url = e.url; - this.canGoBack = this.webview.canGoBack(); - this.canGoForward = this.webview.canGoForward(); - }); - } - } - }); - } - - componentWillUnmount() { - this.autorunDisposer(); - } - - goHome() { - if (!this.webview) return; - this.webview.goToIndex(0); - } - - reload() { - if (!this.webview) return; - - this.webview.reload(); - } - - goBack() { - if (!this.webview) return; - - this.webview.goBack(); - } - - goForward() { - if (!this.webview) return; - - this.webview.goForward(); - } - - navigate(newUrl) { - if (!this.webview) return; - - let url = newUrl; - - try { - url = new URL(url).toString(); - } catch { - url = - // eslint-disable-next-line no-useless-escape - /^((?!-))(xn--)?[\da-z][\d_a-z-]{0,61}[\da-z]{0,1}\.(xn--)?([\da-z\-]{1,61}|[\da-z-]{1,30}\.[a-z]{2,})$/.test( - url, - ) - ? `http://${url}` - : SEARCH_ENGINE_URLS[this.settings.app.searchEngine]({ - searchTerm: url, - }); - } - - this.webview.loadURL(url); - this.url = url; - } - - openInBrowser() { - const { openExternalUrl } = this.props.actions.app; - - if (!this.webview) return; - - openExternalUrl({ url: this.url }); - } - - render() { - return ( - this.goHome()} - reload={() => this.reload()} - openInBrowser={() => this.openInBrowser()} - canGoBack={this.canGoBack} - goBack={() => this.goBack()} - canGoForward={this.canGoForward} - goForward={() => this.goForward()} - navigate={url => this.navigate(url)} - url={this.url} - /> - ); - } -} - -export default inject('stores', 'actions')(observer(WebControlsScreen)); - -WebControlsScreen.propTypes = { - service: PropTypes.instanceOf(Service).isRequired, - stores: PropTypes.shape({ - services: PropTypes.instanceOf(ServicesStore).isRequired, - }).isRequired, - actions: PropTypes.shape({ - app: PropTypes.instanceOf(AppStore).isRequired, - service: PropTypes.instanceOf(ServicesStore).isRequired, - }).isRequired, -}; diff --git a/src/features/webControls/containers/WebControlsScreen.jsx b/src/features/webControls/containers/WebControlsScreen.jsx new file mode 100644 index 000000000..25e14060d --- /dev/null +++ b/src/features/webControls/containers/WebControlsScreen.jsx @@ -0,0 +1,151 @@ +import { Component } from 'react'; +import { observer, inject } from 'mobx-react'; +import PropTypes from 'prop-types'; + +import { autorun, action, makeObservable, observable } from 'mobx'; +import WebControls from '../components/WebControls'; +import ServicesStore from '../../../stores/ServicesStore'; +import Service from '../../../models/Service'; +import { SEARCH_ENGINE_URLS } from '../../../config'; +import AppStore from '../../../stores/AppStore'; + +const URL_EVENTS = [ + 'load-commit', + 'will-navigate', + 'did-navigate', + 'did-navigate-in-page', +]; + +class WebControlsScreen extends Component { + @observable url = ''; + + @observable canGoBack = false; + + @observable canGoForward = false; + + webview = null; + + autorunDisposer = null; + + @action _setUrl(value) { + this.url = value; + } + + @action _setUrlAndHistory(value) { + this._setUrl(value); + this.canGoBack = this.webview.canGoBack(); + this.canGoForward = this.webview.canGoForward(); + } + + constructor(props) { + super(props); + + makeObservable(this); + } + + componentDidMount() { + const { service } = this.props; + + this.autorunDisposer = autorun(() => { + if (service.isAttached) { + this.webview = service.webview; + this._setUrl(this.webview.getURL()); + + for (const event of URL_EVENTS) { + this.webview.addEventListener(event, e => { + if (!e.isMainFrame) return; + + this._setUrlAndHistory(e.url); + }); + } + } + }); + } + + componentWillUnmount() { + this.autorunDisposer(); + } + + goHome() { + if (!this.webview) return; + this.webview.goToIndex(0); + } + + reload() { + if (!this.webview) return; + + this.webview.reload(); + } + + goBack() { + if (!this.webview) return; + + this.webview.goBack(); + } + + goForward() { + if (!this.webview) return; + + this.webview.goForward(); + } + + navigate(newUrl) { + if (!this.webview) return; + + let url = newUrl; + + try { + url = new URL(url).toString(); + } catch { + url = + // eslint-disable-next-line no-useless-escape + /^((?!-))(xn--)?[\da-z][\d_a-z-]{0,61}[\da-z]{0,1}\.(xn--)?([\da-z\-]{1,61}|[\da-z-]{1,30}\.[a-z]{2,})$/.test( + url, + ) + ? `http://${url}` + : SEARCH_ENGINE_URLS[this.settings.app.searchEngine]({ + searchTerm: url, + }); + } + + this.webview.loadURL(url); + this._setUrl(url); + } + + openInBrowser() { + const { openExternalUrl } = this.props.actions.app; + + if (!this.webview) return; + + openExternalUrl({ url: this.url }); + } + + render() { + return ( + this.goHome()} + reload={() => this.reload()} + openInBrowser={() => this.openInBrowser()} + canGoBack={this.canGoBack} + goBack={() => this.goBack()} + canGoForward={this.canGoForward} + goForward={() => this.goForward()} + navigate={url => this.navigate(url)} + url={this.url} + /> + ); + } +} + +export default inject('stores', 'actions')(observer(WebControlsScreen)); + +WebControlsScreen.propTypes = { + service: PropTypes.instanceOf(Service).isRequired, + stores: PropTypes.shape({ + services: PropTypes.instanceOf(ServicesStore).isRequired, + }).isRequired, + actions: PropTypes.shape({ + app: PropTypes.instanceOf(AppStore).isRequired, + service: PropTypes.instanceOf(ServicesStore).isRequired, + }).isRequired, +}; -- cgit v1.2.3-54-g00ecf