Transform service components to ts (#778)

7 files changed, 156 insertions, 159 deletions

diff --git a/src/components/services/content/ConnectionLostBanner.js b/src/components/services/content/ConnectionLostBanner.tsx
index f2f70ca2e..88731f3b9 100644
--- a/src/components/services/content/ConnectionLostBanner.js
+++ b/src/components/services/content/ConnectionLostBanner.tsx
@@ -1,9 +1,7 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
+import { Component, ReactElement } 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 { mdiAlert } from '@mdi/js';
 import { LIVE_API_FERDIUM_WEBSITE } from '../../../config';
 import Icon from '../../ui/icon';
@@ -23,11 +21,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: {
@@ -68,17 +65,15 @@ const styles = theme => ({
   },
 });
 
-class ConnectionLostBanner extends Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    name: PropTypes.string.isRequired,
-    reload: PropTypes.func.isRequired,
-  };
-
-  render() {
-    const { classes, name, reload } = this.props;
+interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps {
+  name: string;
+  reload: () => void;
+}
 
-    const { intl } = this.props;
+@observer
+class ConnectionLostBanner extends Component<IProps> {
+  render(): ReactElement {
+    const { classes, name, reload, intl } = this.props;
 
     return (
       <div className={classes.root}>
@@ -101,4 +96,4 @@ class ConnectionLostBanner extends Component {
   }
 }
 
-export default injectIntl(injectSheet(styles)(observer(ConnectionLostBanner)));
+export default injectIntl(withStyles(styles)(ConnectionLostBanner));
diff --git a/src/components/services/content/ErrorHandlers/styles.ts b/src/components/services/content/ErrorHandlers/styles.ts
deleted file mode 100644
index 9e2509ee5..000000000
--- a/src/components/services/content/ErrorHandlers/styles.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export default theme => ({
-  component: {
-    left: 0,
-    position: 'absolute',
-    top: 0,
-    width: '100%',
-    zIndex: 0,
-    alignItems: 'center',
-    background: theme.colorWebviewErrorHandlerBackground,
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    textAlign: 'center',
-  },
-  buttonContainer: {
-    display: 'flex',
-    flexDirection: 'row',
-    height: 'auto',
-    margin: [40, 0, 20],
-
-    '& button': {
-      margin: [0, 10, 0, 10],
-    },
-  },
-});
diff --git a/src/components/services/content/ServiceDisabled.js b/src/components/services/content/ServiceDisabled.tsx
index d874a354e..2f0d439ec 100644
--- a/src/components/services/content/ServiceDisabled.js
+++ b/src/components/services/content/ServiceDisabled.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 Button from '../../ui/button';
 import { H1 } from '../../ui/headline';
 
@@ -17,15 +15,15 @@ const messages = defineMessages({
   },
 });
 
-class ServiceDisabled extends Component {
-  static propTypes = {
-    name: PropTypes.string.isRequired,
-    enable: PropTypes.func.isRequired,
-  };
+interface IProps extends WrappedComponentProps {
+  name: string;
+  enable: () => void;
+}
 
-  render() {
-    const { name, enable } = this.props;
-    const { intl } = this.props;
+@observer
+class ServiceDisabled extends Component<IProps> {
+  render(): ReactElement {
+    const { name, enable, intl } = this.props;
 
     return (
       <div className="services__info-layer">
@@ -40,4 +38,4 @@ class ServiceDisabled extends Component {
   }
 }
 
-export default injectIntl(observer(ServiceDisabled));
+export default injectIntl(ServiceDisabled);
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.tsx
index cae16ef49..e41184431 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.tsx
@@ -1,52 +1,55 @@
-/* eslint-disable react/jsx-no-useless-fragment */
 import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { autorun } from 'mobx';
+import { autorun, IReactionDisposer } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import classnames from 'classnames';
 import TopBarProgress from 'react-topbar-progress-indicator';
-
 import ServiceModel from '../../../models/Service';
 import StatusBarTargetUrl from '../../ui/StatusBarTargetUrl';
 import WebviewLoader from '../../ui/WebviewLoader';
 import WebviewCrashHandler from './WebviewCrashHandler';
-import WebviewErrorHandler from './ErrorHandlers/WebviewErrorHandler';
+import WebviewErrorHandler from './WebviewErrorHandler';
 import ServiceDisabled from './ServiceDisabled';
 import ServiceWebview from './ServiceWebview';
-import SettingsStore from '../../../stores/SettingsStore';
 import WebControlsScreen from '../../../features/webControls/containers/WebControlsScreen';
 import { CUSTOM_WEBSITE_RECIPE_ID } from '../../../config';
+import { RealStores } from '../../../stores';
+
+interface IProps {
+  service: ServiceModel;
+  setWebviewRef: () => void;
+  detachService: () => void;
+  reload: () => void;
+  edit: () => void;
+  enable: () => void;
+  // isActive?: boolean; // TODO - [TECH DEBT][PROP NOT USED IN COMPONENT] check it
+  stores?: RealStores;
+  isSpellcheckerEnabled: boolean;
+}
+
+interface IState {
+  forceRepaint: boolean;
+  targetUrl: string;
+  statusBarVisible: boolean;
+}
+
+@inject('stores', 'actions')
+@observer
+class ServiceView extends Component<IProps, IState> {
+  // hibernationTimer = null; //  TODO - [TS DEBT] class property not reassigned, need to find its purpose
 
-class ServiceView extends Component {
-  static propTypes = {
-    service: PropTypes.instanceOf(ServiceModel).isRequired,
-    setWebviewReference: PropTypes.func.isRequired,
-    detachService: PropTypes.func.isRequired,
-    reload: PropTypes.func.isRequired,
-    edit: PropTypes.func.isRequired,
-    enable: PropTypes.func.isRequired,
-    isActive: PropTypes.bool,
-    stores: PropTypes.shape({
-      settings: PropTypes.instanceOf(SettingsStore).isRequired,
-    }).isRequired,
-    isSpellcheckerEnabled: PropTypes.bool.isRequired,
-  };
-
-  static defaultProps = {
-    isActive: false,
-  };
-
-  state = {
-    forceRepaint: false,
-    targetUrl: '',
-    statusBarVisible: false,
-  };
-
-  hibernationTimer = null;
-
-  autorunDisposer = null;
-
-  forceRepaintTimeout = null;
+  autorunDisposer: IReactionDisposer | undefined;
+
+  forceRepaintTimeout: NodeJS.Timeout | undefined;
+
+  constructor(props: IProps) {
+    super(props);
+
+    this.state = {
+      forceRepaint: false,
+      targetUrl: '',
+      statusBarVisible: false,
+    };
+  }
 
   componentDidMount() {
     this.autorunDisposer = autorun(() => {
@@ -60,16 +63,16 @@ class ServiceView extends Component {
   }
 
   componentWillUnmount() {
-    this.autorunDisposer();
-    clearTimeout(this.forceRepaintTimeout);
-    clearTimeout(this.hibernationTimer);
+    this.autorunDisposer!();
+    clearTimeout(this.forceRepaintTimeout!);
+    // clearTimeout(this.hibernationTimer); //  TODO - [TS DEBT] class property not reassigned, need to find its purpose
   }
 
   render() {
     const {
       detachService,
       service,
-      setWebviewReference,
+      setWebviewRef,
       reload,
       edit,
       enable,
@@ -78,7 +81,7 @@ class ServiceView extends Component {
     } = this.props;
 
     const { navigationBarBehaviour, navigationBarManualActive } =
-      stores.settings.app;
+      stores!.settings.app;
 
     const showNavBar =
       navigationBarBehaviour === 'always' ||
@@ -93,10 +96,9 @@ class ServiceView extends Component {
       'services__webview--force-repaint': this.state.forceRepaint,
     });
 
-    let statusBar = null;
-    if (this.state.statusBarVisible) {
-      statusBar = <StatusBarTargetUrl text={this.state.targetUrl} />;
-    }
+    const statusBar = this.state.statusBarVisible ? (
+      <StatusBarTargetUrl text={this.state.targetUrl} />
+    ) : null;
 
     return (
       <div
@@ -109,7 +111,7 @@ class ServiceView extends Component {
             {service.hasCrashed && (
               <WebviewCrashHandler
                 name={service.recipe.name}
-                webview={service.webview}
+                // webview={service.webview} //  TODO - [TECH DEBT][PROPS NOT EXIST IN COMPONENT] check it
                 reload={reload}
               />
             )}
@@ -138,7 +140,7 @@ class ServiceView extends Component {
             {service.isActive && (
               <ServiceDisabled
                 name={service.name !== '' ? service.name : service.recipe.name}
-                webview={service.webview}
+                // webview={service.webview} //  TODO - [TECH DEBT][PROPS NOT EXIST IN COMPONENT] check it
                 enable={enable}
               />
             )}
@@ -150,7 +152,7 @@ class ServiceView extends Component {
                 {showNavBar && <WebControlsScreen service={service} />}
                 <ServiceWebview
                   service={service}
-                  setWebviewReference={setWebviewReference}
+                  setWebviewReference={setWebviewRef}
                   detachService={detachService}
                   isSpellcheckerEnabled={isSpellcheckerEnabled}
                 />
@@ -187,4 +189,4 @@ class ServiceView extends Component {
   }
 }
 
-export default inject('stores', 'actions')(observer(ServiceView));
+export default ServiceView;
diff --git a/src/components/services/content/Services.tsx b/src/components/services/content/Services.tsx
index 53cddd907..fa26edaa6 100644
--- a/src/components/services/content/Services.tsx
+++ b/src/components/services/content/Services.tsx
@@ -42,8 +42,8 @@ interface IProps extends WrappedComponentProps, WithStylesProps<typeof styles> {
   services?: Service[];
   setWebviewReference: () => void;
   detachService: () => void;
-  handleIPCMessage: () => void;
-  openWindow: () => void;
+  // handleIPCMessage: () => void; // TODO - [TECH DEBT] later check it
+  // openWindow: () => void; // TODO - [TECH DEBT] later check it
   reload: (options: { serviceId: string }) => void;
   openSettings: (options: { path: string }) => void;
   update: (options: {
@@ -61,7 +61,7 @@ interface IState {
 
 @observer
 class Services extends Component<IProps, IState> {
-  _confettiTimeout: number | null = null;
+  confettiTimeout: number | null = null;
 
   constructor(props: IProps) {
     super(props);
@@ -72,7 +72,7 @@ class Services extends Component<IProps, IState> {
   }
 
   componentDidMount(): void {
-    this._confettiTimeout = window.setTimeout(() => {
+    this.confettiTimeout = window.setTimeout(() => {
       this.setState({
         showConfetti: false,
       });
@@ -80,18 +80,18 @@ class Services extends Component<IProps, IState> {
   }
 
   componentWillUnmount(): void {
-    if (this._confettiTimeout) {
-      clearTimeout(this._confettiTimeout);
+    if (this.confettiTimeout) {
+      clearTimeout(this.confettiTimeout);
     }
   }
 
   render(): ReactElement {
     const {
       services = [],
-      handleIPCMessage,
+      // handleIPCMessage, // TODO - [TECH DEBT] later check it
       setWebviewReference,
       detachService,
-      openWindow,
+      // openWindow, // TODO - [TECH DEBT] later check it
       reload,
       openSettings,
       update,
@@ -136,10 +136,10 @@ class Services extends Component<IProps, IState> {
             <ServiceView
               key={service.id}
               service={service}
-              handleIPCMessage={handleIPCMessage}
-              setWebviewReference={setWebviewReference}
+              // handleIPCMessage={handleIPCMessage} //  TODO - [TECH DEBT][PROPS NOT EXIST IN COMPONENT] later check it
+              setWebviewRef={setWebviewReference}
               detachService={detachService}
-              openWindow={openWindow}
+              // openWindow={openWindow} //  TODO - [TECH DEBT][PROPS NOT EXIST IN COMPONENT] later check it
               reload={() => reload({ serviceId: service.id })}
               edit={() => openSettings({ path: `services/edit/${service.id}` })}
               enable={() =>
diff --git a/src/components/services/content/WebviewCrashHandler.js b/src/components/services/content/WebviewCrashHandler.tsx
index 0e6e61be8..e9b17e8aa 100644
--- a/src/components/services/content/WebviewCrashHandler.js
+++ b/src/components/services/content/WebviewCrashHandler.tsx
@@ -1,9 +1,7 @@
-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 ms from 'ms';
-
 import Button from '../../ui/button';
 import { H1 } from '../../ui/headline';
 
@@ -27,21 +25,30 @@ const messages = defineMessages({
   },
 });
 
-class WebviewCrashHandler extends Component {
-  static propTypes = {
-    name: PropTypes.string.isRequired,
-    reload: PropTypes.func.isRequired,
-  };
+interface IProps extends WrappedComponentProps {
+  name: string;
+  reload: () => void;
+}
 
-  state = {
-    countdown: ms('10s'),
-  };
+interface IState {
+  countdown: number;
+}
 
-  countdownInterval = null;
+@observer
+class WebviewCrashHandler extends Component<IProps, IState> {
+  countdownInterval: NodeJS.Timer | undefined;
 
   countdownIntervalTimeout = ms('1s');
 
-  componentDidMount() {
+  constructor(props: IProps) {
+    super(props);
+
+    this.state = {
+      countdown: ms('10s'),
+    };
+  }
+
+  componentDidMount(): void {
     const { reload } = this.props;
 
     this.countdownInterval = setInterval(() => {
@@ -51,14 +58,13 @@ class WebviewCrashHandler extends Component {
 
       if (this.state.countdown <= 0) {
         reload();
-        clearInterval(this.countdownInterval);
+        clearInterval(this.countdownInterval!);
       }
     }, this.countdownIntervalTimeout);
   }
 
-  render() {
-    const { name, reload } = this.props;
-    const { intl } = this.props;
+  render(): ReactElement {
+    const { name, reload, intl } = this.props;
 
     return (
       <div className="services__info-layer">
@@ -81,4 +87,4 @@ class WebviewCrashHandler extends Component {
   }
 }
 
-export default injectIntl(observer(WebviewCrashHandler));
+export default injectIntl(WebviewCrashHandler);
diff --git a/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js b/src/components/services/content/WebviewErrorHandler.tsx
index a658bec8b..b99c15006 100644
--- a/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
+++ b/src/components/services/content/WebviewErrorHandler.tsx
@@ -1,13 +1,9 @@
-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 injectSheet from 'react-jss';
-
-import Button from '../../../ui/button';
-
-import styles from './styles';
-import { H1 } from '../../../ui/headline';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import withStyles, { WithStylesProps } from 'react-jss';
+import Button from '../../ui/button';
+import { H1 } from '../../ui/headline';
 
 const messages = defineMessages({
   headline: {
@@ -32,18 +28,43 @@ const messages = defineMessages({
   },
 });
 
-class WebviewErrorHandler extends Component {
-  static propTypes = {
-    name: PropTypes.string.isRequired,
-    reload: PropTypes.func.isRequired,
-    edit: PropTypes.func.isRequired,
-    errorMessage: PropTypes.string.isRequired,
-    classes: PropTypes.object.isRequired,
-  };
+const styles = theme => ({
+  component: {
+    left: 0,
+    position: 'absolute',
+    top: 0,
+    width: '100%',
+    zIndex: 0,
+    alignItems: 'center',
+    background: theme.colorWebviewErrorHandlerBackground,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    textAlign: 'center',
+  },
+  buttonContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    height: 'auto',
+    margin: [40, 0, 20],
+
+    '& button': {
+      margin: [0, 10, 0, 10],
+    },
+  },
+});
+
+interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps {
+  name: string;
+  reload: () => void;
+  edit: () => void;
+  errorMessage: string;
+}
 
-  render() {
-    const { name, reload, edit, errorMessage, classes } = this.props;
-    const { intl } = this.props;
+@observer
+class WebviewErrorHandler extends Component<IProps> {
+  render(): ReactElement {
+    const { name, reload, edit, errorMessage, classes, intl } = this.props;
 
     return (
       <div className={classes.component}>
@@ -71,5 +92,5 @@ class WebviewErrorHandler extends Component {
 }
 
 export default injectIntl(
-  injectSheet(styles, { injectTheme: true })(observer(WebviewErrorHandler)),
+  withStyles(styles, { injectTheme: true })(WebviewErrorHandler),
 );