Convert web controls & screen to typescript (#722)

2 files changed, 112 insertions, 99 deletions

diff --git a/src/features/webControls/components/WebControls.js b/src/features/webControls/components/WebControls.tsx
index 570f2f2dc..ebcd93c9e 100644
--- a/src/features/webControls/components/WebControls.js
+++ b/src/features/webControls/components/WebControls.tsx
@@ -1,9 +1,7 @@
-import { createRef, Component } from 'react';
-import PropTypes from 'prop-types';
+import { createRef, Component, ReactElement, RefObject } from 'react';
 import { observer } from 'mobx-react';
-import injectSheet from 'react-jss';
-import { defineMessages, injectIntl } from 'react-intl';
-
+import withStyles, { WithStylesProps } from 'react-jss';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import {
   mdiReload,
   mdiArrowRight,
@@ -11,7 +9,6 @@ import {
   mdiHomeOutline,
   mdiEarth,
 } from '@mdi/js';
-
 import Icon from '../../../components/ui/icon';
 
 const messages = defineMessages({
@@ -37,11 +34,10 @@ const messages = defineMessages({
   },
 });
 
-let buttonTransition = 'none';
-
-if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
-  buttonTransition = 'opacity 0.25s';
-}
+const buttonTransition =
+  window && window.matchMedia('(prefers-reduced-motion: no-preference)')
+    ? 'opacity 0.25s'
+    : 'none';
 
 const styles = theme => ({
   root: {
@@ -94,40 +90,44 @@ const styles = theme => ({
   },
 });
 
-class WebControls extends Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    goHome: PropTypes.func.isRequired,
-    canGoBack: PropTypes.bool.isRequired,
-    goBack: PropTypes.func.isRequired,
-    canGoForward: PropTypes.bool.isRequired,
-    goForward: PropTypes.func.isRequired,
-    reload: PropTypes.func.isRequired,
-    openInBrowser: PropTypes.func.isRequired,
-    url: PropTypes.string.isRequired,
-    navigate: PropTypes.func.isRequired,
-  };
-
-  static getDerivedStateFromProps(props, state) {
-    const { url } = props;
+interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps {
+  goHome: () => void;
+  canGoBack: boolean;
+  goBack: () => void;
+  canGoForward: boolean;
+  goForward: () => void;
+  reload: () => void;
+  openInBrowser: () => void;
+  url: string;
+  navigate: (url: string) => void;
+}
+
+interface IState {
+  inputUrl: string;
+  editUrl: boolean;
+}
+
+@observer
+class WebControls extends Component<IProps, IState> {
+  inputRef: RefObject<HTMLInputElement> = createRef();
+
+  static getDerivedStateFromProps(props, state): IState | null {
+    const { url: inputUrl } = props;
     const { editUrl } = state;
 
-    if (!editUrl) {
-      return {
-        inputUrl: url,
-        editUrl: state.editUrl,
-      };
-    }
+    return !editUrl ? { inputUrl, editUrl } : null;
   }
 
-  inputRef = createRef();
+  constructor(props: IProps) {
+    super(props);
 
-  state = {
-    inputUrl: '',
-    editUrl: false,
-  };
+    this.state = {
+      inputUrl: '',
+      editUrl: false,
+    };
+  }
 
-  render() {
+  render(): ReactElement {
     const {
       classes,
       goHome,
@@ -139,12 +139,11 @@ class WebControls extends Component {
       openInBrowser,
       url,
       navigate,
+      intl,
     } = this.props;
 
     const { inputUrl, editUrl } = this.state;
 
-    const { intl } = this.props;
-
     return (
       <div className={classes.root}>
         <button
@@ -211,12 +210,14 @@ class WebControls extends Component {
                 editUrl: false,
               });
               navigate(inputUrl);
-              this.inputRef.current.blur();
             } else if (event.key === 'Escape') {
               this.setState({
                 editUrl: false,
                 inputUrl: url,
               });
+            }
+
+            if (this.inputRef && this.inputRef.current) {
               this.inputRef.current.blur();
             }
           }}
@@ -237,5 +238,5 @@ class WebControls extends Component {
 }
 
 export default injectIntl(
-  injectSheet(styles, { injectTheme: true })(observer(WebControls)),
+  withStyles(styles, { injectTheme: true })(WebControls),
 );
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;