Convert web controls & screen to typescript (#722)

1 files changed, 68 insertions, 56 deletions

diff --git a/src/features/webControls/containers/WebControlsScreen.jsx b/src/features/webControls/containers/WebControlsScreen.tsx
index 25e14060d..f6f1cddb8 100644
--- a/src/features/webControls/containers/WebControlsScreen.jsx
+++ b/src/features/webControls/containers/WebControlsScreen.tsx
@@ -1,13 +1,17 @@
-import { Component } from 'react';
+import { Component, ReactElement } from 'react';
 import { observer, inject } from 'mobx-react';
-import PropTypes from 'prop-types';
-
-import { autorun, action, makeObservable, observable } from 'mobx';
+import {
+  autorun,
+  action,
+  makeObservable,
+  observable,
+  IReactionDisposer,
+} from 'mobx';
+import ElectronWebView from 'react-electron-web-view';
 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';
+import { StoresProps } from '../../../@types/ferdium-components.types';
 
 const URL_EVENTS = [
   'load-commit',
@@ -16,26 +20,22 @@ const URL_EVENTS = [
   'did-navigate-in-page',
 ];
 
-class WebControlsScreen extends Component {
+interface IProps extends Partial<StoresProps> {
+  service: Service;
+}
+
+@inject('stores', 'actions')
+@observer
+class WebControlsScreen extends Component<IProps> {
   @observable url = '';
 
   @observable canGoBack = false;
 
   @observable canGoForward = false;
 
-  webview = null;
-
-  autorunDisposer = null;
+  webview: ElectronWebView | null = null;
 
-  @action _setUrl(value) {
-    this.url = value;
-  }
-
-  @action _setUrlAndHistory(value) {
-    this._setUrl(value);
-    this.canGoBack = this.webview.canGoBack();
-    this.canGoForward = this.webview.canGoForward();
-  }
+  autorunDisposer: IReactionDisposer | null = null;
 
   constructor(props) {
     super(props);
@@ -43,7 +43,7 @@ class WebControlsScreen extends Component {
     makeObservable(this);
   }
 
-  componentDidMount() {
+  componentDidMount(): void {
     const { service } = this.props;
 
     this.autorunDisposer = autorun(() => {
@@ -53,8 +53,9 @@ class WebControlsScreen extends Component {
 
         for (const event of URL_EVENTS) {
           this.webview.addEventListener(event, e => {
-            if (!e.isMainFrame) return;
-
+            if (!e.isMainFrame) {
+              return;
+            }
             this._setUrlAndHistory(e.url);
           });
         }
@@ -62,48 +63,69 @@ class WebControlsScreen extends Component {
     });
   }
 
-  componentWillUnmount() {
-    this.autorunDisposer();
+  componentWillUnmount(): void {
+    if (this.autorunDisposer) {
+      this.autorunDisposer();
+    }
   }
 
-  goHome() {
-    if (!this.webview) return;
+  @action
+  _setUrl(value): void {
+    this.url = value;
+  }
+
+  @action
+  _setUrlAndHistory(value): void {
+    this._setUrl(value);
+    this.canGoBack = this.webview.canGoBack();
+    this.canGoForward = this.webview.canGoForward();
+  }
+
+  goHome(): void {
+    if (!this.webview) {
+      return;
+    }
     this.webview.goToIndex(0);
   }
 
-  reload() {
-    if (!this.webview) return;
+  reload(): void {
+    if (!this.webview) {
+      return;
+    }
 
     this.webview.reload();
   }
 
-  goBack() {
-    if (!this.webview) return;
+  goBack(): void {
+    if (!this.webview) {
+      return;
+    }
 
     this.webview.goBack();
   }
 
-  goForward() {
-    if (!this.webview) return;
+  goForward(): void {
+    if (!this.webview) {
+      return;
+    }
 
     this.webview.goForward();
   }
 
-  navigate(newUrl) {
-    if (!this.webview) return;
-
-    let url = newUrl;
+  navigate(url: string): void {
+    if (!this.webview) {
+      return;
+    }
 
     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(
+        /^((?!-))(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]({
+          : SEARCH_ENGINE_URLS[this.props.stores!.settings.app.searchEngine]({
               searchTerm: url,
             });
     }
@@ -112,15 +134,16 @@ class WebControlsScreen extends Component {
     this._setUrl(url);
   }
 
-  openInBrowser() {
-    const { openExternalUrl } = this.props.actions.app;
-
-    if (!this.webview) return;
+  openInBrowser(): void {
+    const { openExternalUrl } = this.props.actions!.app;
+    if (!this.webview) {
+      return;
+    }
 
     openExternalUrl({ url: this.url });
   }
 
-  render() {
+  render(): ReactElement {
     return (
       <WebControls
         goHome={() => this.goHome()}
@@ -137,15 +160,4 @@ class WebControlsScreen extends Component {
   }
 }
 
-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,
-};
+export default WebControlsScreen;