Transform JSX components to TSX (#755)

* color picker types
* Import
* SetupAssistant
* Services & appear
* ServiceWebView
* SettingsLayout
* ImportantScreen
* WorkspaceDrawer
* SetupAssistant

* chore: update vscode settings
* chore: removed stale Import screen component & its tree

2 files changed, 67 insertions, 62 deletions

diff --git a/src/components/services/content/ServiceWebview.jsx b/src/components/services/content/ServiceWebview.tsx
index 835c5125e..ac8d1ea66 100644
--- a/src/components/services/content/ServiceWebview.jsx
+++ b/src/components/services/content/ServiceWebview.tsx
@@ -1,27 +1,32 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
+import { Component, ReactElement } from 'react';
 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,
-  };
+interface IProps {
+  service: ServiceModel;
+  setWebviewReference: (options: {
+    serviceId: string;
+    webview: ElectronWebView | null;
+  }) => void;
+  detachService: (options: { service: ServiceModel }) => void;
+  isSpellcheckerEnabled: boolean;
+}
 
-  @observable webview = null;
+@observer
+class ServiceWebview extends Component<IProps> {
+  @observable webview: ElectronWebView | null = null;
 
-  constructor(props) {
+  constructor(props: IProps) {
     super(props);
 
+    this.refocusWebview = this.refocusWebview.bind(this);
+    this._setWebview = this._setWebview.bind(this);
+
     makeObservable(this);
 
     reaction(
@@ -45,15 +50,18 @@ class ServiceWebview extends Component {
     );
   }
 
-  componentWillUnmount() {
+  componentWillUnmount(): void {
     const { service, detachService } = this.props;
     detachService({ service });
   }
 
-  refocusWebview = () => {
+  refocusWebview(): void {
     const { webview } = this;
     debug('Refocus Webview is called', this.props.service);
-    if (!webview) return;
+    if (!webview) {
+      return;
+    }
+
     if (this.props.service.isActive) {
       webview.view.blur();
       webview.view.focus();
@@ -67,13 +75,13 @@ class ServiceWebview extends Component {
     } else {
       debug('Refocus not required - Not active service');
     }
-  };
+  }
 
-  @action _setWebview(webview) {
+  @action _setWebview(webview): void {
     this.webview = webview;
   }
 
-  render() {
+  render(): ReactElement {
     const { service, setWebviewReference, isSpellcheckerEnabled } = this.props;
 
     const preloadScript = join(
@@ -114,7 +122,7 @@ class ServiceWebview extends Component {
             });
           }, 0);
         }}
-        onUpdateTargetUrl={this.updateTargetUrl}
+        // onUpdateTargetUrl={this.updateTargetUrl} // TODO - [TS DEBT] need to check where its from
         useragent={service.userAgent}
         disablewebsecurity={
           service.recipe.disablewebsecurity ? true : undefined
@@ -129,4 +137,4 @@ class ServiceWebview extends Component {
   }
 }
 
-export default observer(ServiceWebview);
+export default ServiceWebview;
diff --git a/src/components/services/content/Services.jsx b/src/components/services/content/Services.tsx
index da700b5b1..53cddd907 100644
--- a/src/components/services/content/Services.jsx
+++ b/src/components/services/content/Services.tsx
@@ -1,14 +1,13 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react';
+import { Component, ReactElement } from 'react';
+import { observer } from 'mobx-react';
 import { Link } from 'react-router-dom';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import Confetti from 'react-confetti';
 import ms from 'ms';
-import injectSheet from 'react-jss';
-
+import withStyles, { WithStylesProps } from 'react-jss';
 import ServiceView from './ServiceView';
 import Appear from '../../ui/effects/Appear';
+import Service from '../../../models/Service';
 
 const messages = defineMessages({
   getStarted: {
@@ -39,37 +38,40 @@ const styles = {
   },
 };
 
-class Services extends Component {
-  static propTypes = {
-    services: MobxPropTypes.arrayOrObservableArray,
-    setWebviewReference: PropTypes.func.isRequired,
-    detachService: PropTypes.func.isRequired,
-    handleIPCMessage: PropTypes.func.isRequired,
-    openWindow: PropTypes.func.isRequired,
-    reload: PropTypes.func.isRequired,
-    openSettings: PropTypes.func.isRequired,
-    update: PropTypes.func.isRequired,
-    userHasCompletedSignup: PropTypes.bool.isRequired,
-    // eslint-disable-next-line react/forbid-prop-types
-    classes: PropTypes.object.isRequired,
-    isSpellcheckerEnabled: PropTypes.bool.isRequired,
-  };
+interface IProps extends WrappedComponentProps, WithStylesProps<typeof styles> {
+  services?: Service[];
+  setWebviewReference: () => void;
+  detachService: () => void;
+  handleIPCMessage: () => void;
+  openWindow: () => void;
+  reload: (options: { serviceId: string }) => void;
+  openSettings: (options: { path: string }) => void;
+  update: (options: {
+    serviceId: string;
+    serviceData: { isEnabled: boolean };
+    redirect: boolean;
+  }) => void;
+  userHasCompletedSignup: boolean;
+  isSpellcheckerEnabled: boolean;
+}
 
-  static defaultProps = {
-    services: [],
-  };
+interface IState {
+  showConfetti: boolean;
+}
 
-  _confettiTimeout = null;
+@observer
+class Services extends Component<IProps, IState> {
+  _confettiTimeout: number | null = null;
 
-  constructor() {
-    super();
+  constructor(props: IProps) {
+    super(props);
 
     this.state = {
       showConfetti: true,
     };
   }
 
-  componentDidMount() {
+  componentDidMount(): void {
     this._confettiTimeout = window.setTimeout(() => {
       this.setState({
         showConfetti: false,
@@ -77,15 +79,15 @@ class Services extends Component {
     }, ms('8s'));
   }
 
-  componentWillUnmount() {
+  componentWillUnmount(): void {
     if (this._confettiTimeout) {
       clearTimeout(this._confettiTimeout);
     }
   }
 
-  render() {
+  render(): ReactElement {
     const {
-      services,
+      services = [],
       handleIPCMessage,
       setWebviewReference,
       detachService,
@@ -96,32 +98,31 @@ class Services extends Component {
       userHasCompletedSignup,
       classes,
       isSpellcheckerEnabled,
+      intl,
     } = this.props;
 
     const { showConfetti } = this.state;
 
-    const { intl } = this.props;
-
     return (
       <div className="services">
         {userHasCompletedSignup && (
           <div className={classes.confettiContainer}>
             <Confetti
-              width={window.width}
-              height={window.height}
+              width={window.innerWidth}
+              height={window.innerHeight}
               numberOfPieces={showConfetti ? 200 : 0}
             />
           </div>
         )}
         {services.length === 0 && (
-          <Appear timeout={1500} transitionName="slideUp">
+          <Appear transitionName="slideUp">
             <div className="services__no-service">
               <img
                 src="./assets/images/logo-beard-only.svg"
                 alt="Logo"
                 style={{ maxHeight: '50vh' }}
               />
-              <Appear timeout={300} transitionName="slideUp">
+              <Appear transitionName="slideUp">
                 <Link to="/settings/recipes" className="button">
                   {intl.formatMessage(messages.getStarted)}
                 </Link>
@@ -158,8 +159,4 @@ class Services extends Component {
   }
 }
 
-export default injectIntl(
-  injectSheet(styles, { injectTheme: true })(
-    inject('actions')(observer(Services)),
-  ),
-);
+export default injectIntl(withStyles(styles, { injectTheme: true })(Services));