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, 36 insertions, 36 deletions

diff --git a/src/components/settings/SettingsLayout.jsx b/src/components/settings/SettingsLayout.tsx
index 989c428f2..3b706571e 100644
--- a/src/components/settings/SettingsLayout.jsx
+++ b/src/components/settings/SettingsLayout.tsx
@@ -1,8 +1,6 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
+import { Component, ReactElement } from 'react';
 import { observer } from 'mobx-react';
-import { defineMessages, injectIntl } from 'react-intl';
-
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { mdiClose } from '@mdi/js';
 import { Outlet } from 'react-router-dom';
 import ErrorBoundary from '../util/ErrorBoundary';
@@ -17,35 +15,35 @@ const messages = defineMessages({
   },
 });
 
-class SettingsLayout extends Component {
-  static propTypes = {
-    navigation: PropTypes.element.isRequired,
-    closeSettings: PropTypes.func.isRequired,
-  };
+interface IProps extends WrappedComponentProps {
+  navigation: ReactElement;
+  closeSettings: () => void;
+}
+
+@observer
+class SettingsLayout extends Component<IProps> {
+  constructor(props: IProps) {
+    super(props);
 
-  componentDidMount() {
-    document.addEventListener('keydown', this.handleKeyDown.bind(this), false);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
   }
 
-  componentWillUnmount() {
-    document.removeEventListener(
-      'keydown',
-      // eslint-disable-next-line unicorn/no-invalid-remove-event-listener
-      this.handleKeyDown.bind(this),
-      false,
-    );
+  componentDidMount(): void {
+    document.addEventListener('keydown', this.handleKeyDown, false);
   }
 
-  handleKeyDown(e) {
+  componentWillUnmount(): void {
+    document.removeEventListener('keydown', this.handleKeyDown, false);
+  }
+
+  handleKeyDown(e: KeyboardEvent): void {
     if (isEscKeyPress(e.keyCode)) {
       this.props.closeSettings();
     }
   }
 
-  render() {
-    const { navigation, closeSettings } = this.props;
-
-    const { intl } = this.props;
+  render(): ReactElement {
+    const { navigation, closeSettings, intl } = this.props;
 
     return (
       <Appear transitionName="fadeIn-fast">
@@ -59,7 +57,6 @@ class SettingsLayout extends Component {
             />
             <div className="settings franz-form">
               {navigation}
-
               <Outlet />
               <button
                 type="button"
@@ -77,4 +74,4 @@ class SettingsLayout extends Component {
   }
 }
 
-export default injectIntl(observer(SettingsLayout));
+export default injectIntl(SettingsLayout);
diff --git a/src/components/settings/settings/EditSettingsForm.tsx b/src/components/settings/settings/EditSettingsForm.tsx
index e796a48ec..8ccad9e49 100644
--- a/src/components/settings/settings/EditSettingsForm.tsx
+++ b/src/components/settings/settings/EditSettingsForm.tsx
@@ -1,5 +1,5 @@
 import { systemPreferences } from '@electron/remote';
-import { Component } from 'react';
+import { Component, ReactElement } from 'react';
 import { observer } from 'mobx-react';
 import prettyBytes from 'pretty-bytes';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
@@ -9,7 +9,7 @@ import Button from '../../ui/button';
 import Toggle from '../../ui/toggle';
 import Select from '../../ui/Select';
 import Input from '../../ui/input/index';
-import ColorPickerInput from '../../ui/ColorPickerInput';
+import ColorPickerInput from '../../ui/colorPickerInput';
 import Infobox from '../../ui/Infobox';
 import { H1, H2, H3, H5 } from '../../ui/headline';
 import {
@@ -258,14 +258,14 @@ const messages = defineMessages({
   },
 });
 
-const Hr = () => (
+const Hr = (): ReactElement => (
   <hr
     className="settings__hr"
     style={{ marginBottom: 20, borderStyle: 'dashed' }}
   />
 );
 
-const HrSections = () => (
+const HrSections = (): ReactElement => (
   <hr
     className="settings__hr-sections"
     style={{ marginTop: 20, marginBottom: 40, borderStyle: 'solid' }}
@@ -325,8 +325,11 @@ class EditSettingsForm extends Component<IProps, IState> {
     this.setState({ clearCacheButtonClicked: true });
   };
 
-  submit(e) {
-    e.preventDefault();
+  submit(e): void {
+    if (e) {
+      e.preventDefault();
+    }
+
     this.props.form.submit({
       onSuccess: form => {
         const values = form.values();
@@ -344,7 +347,7 @@ class EditSettingsForm extends Component<IProps, IState> {
     });
   }
 
-  render() {
+  render(): ReactElement {
     const {
       checkForUpdates,
       installUpdate,
@@ -742,8 +745,8 @@ class EditSettingsForm extends Component<IProps, IState> {
                   {intl.formatMessage(messages.overallTheme)}
                   <div className="settings__settings-group__apply-color">
                     <ColorPickerInput
-                      onChange={e => this.submit(e)}
-                      field={form.$('accentColor')}
+                      {...form.$('accentColor').bind()}
+                      onColorChange={this.submit.bind(this)}
                       className="color-picker-input"
                     />
                   </div>
@@ -752,8 +755,8 @@ class EditSettingsForm extends Component<IProps, IState> {
                   {intl.formatMessage(messages.progressbarTheme)}
                   <div className="settings__settings-group__apply-color">
                     <ColorPickerInput
-                      onChange={e => this.submit(e)}
-                      field={form.$('progressbarAccentColor')}
+                      {...form.$('progressbarAccentColor').bind()}
+                      onColorChange={this.submit.bind(this)}
                       className="color-picker-input"
                     />
                   </div>