Transform Todo feature, ServiceBarTargetUrl, ServiceIcon, TeamDashboard, Slider, Loader & WorkspaceSwitchningIndicator into ts (#782)

18 files changed, 369 insertions, 368 deletions

diff --git a/src/components/settings/settings/EditSettingsForm.tsx b/src/components/settings/settings/EditSettingsForm.tsx
index 8ccad9e49..0a05cb0e1 100644
--- a/src/components/settings/settings/EditSettingsForm.tsx
+++ b/src/components/settings/settings/EditSettingsForm.tsx
@@ -650,7 +650,7 @@ class EditSettingsForm extends Component<IProps, IState> {
                   <>
                     <Slider
                       type="number"
-                      onChange={e => this.submit(e)}
+                      onSliderChange={e => this.submit(e)}
                       field={form.$('grayscaleServicesDim')}
                     />
                     <Hr />
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.tsx
index 538a9a10c..3ef55fac6 100644
--- a/src/components/settings/team/TeamDashboard.js
+++ b/src/components/settings/team/TeamDashboard.tsx
@@ -1,11 +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 { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
-import injectSheet from 'react-jss';
+import withStyles, { WithStylesProps } from 'react-jss';
 import classnames from 'classnames';
-
 import Loader from '../../ui/Loader';
 import Button from '../../ui/button';
 import Infobox from '../../ui/Infobox';
@@ -99,17 +97,17 @@ const styles = {
   },
 };
 
-class TeamDashboard extends Component {
-  static propTypes = {
-    isLoading: PropTypes.bool.isRequired,
-    userInfoRequestFailed: PropTypes.bool.isRequired,
-    retryUserInfoRequest: PropTypes.func.isRequired,
-    openTeamManagement: PropTypes.func.isRequired,
-    classes: PropTypes.object.isRequired,
-    server: PropTypes.string.isRequired,
-  };
+interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps {
+  isLoading: boolean;
+  userInfoRequestFailed: boolean;
+  retryUserInfoRequest: () => void;
+  openTeamManagement: () => void;
+  server: string;
+}
 
-  render() {
+@observer
+class TeamDashboard extends Component<IProps> {
+  render(): ReactElement {
     const {
       isLoading,
       userInfoRequestFailed,
@@ -117,68 +115,65 @@ class TeamDashboard extends Component {
       openTeamManagement,
       classes,
       server,
+      intl,
     } = this.props;
-    const { intl } = this.props;
 
-    if (server === LIVE_FRANZ_API) {
-      return (
-        <div className="settings__main">
-          <div className="settings__header">
-            <span className="settings__header-item">
-              {intl.formatMessage(messages.headline)}
-            </span>
-          </div>
-          <div className="settings__body">
-            {isLoading && <Loader />}
+    return server === LIVE_FRANZ_API ? (
+      <div className="settings__main">
+        <div className="settings__header">
+          <span className="settings__header-item">
+            {intl.formatMessage(messages.headline)}
+          </span>
+        </div>
+        <div className="settings__body">
+          {isLoading && <Loader />}
 
-            {!isLoading && userInfoRequestFailed && (
-              <Infobox
-                icon="alert"
-                type="danger"
-                ctaLabel={intl.formatMessage(messages.tryReloadUserInfoRequest)}
-                ctaLoading={isLoading}
-                ctaOnClick={retryUserInfoRequest}
-              >
-                {intl.formatMessage(messages.userInfoRequestFailed)}
-              </Infobox>
-            )}
+          {!isLoading && userInfoRequestFailed && (
+            <Infobox
+              icon="alert"
+              type="danger"
+              ctaLabel={intl.formatMessage(messages.tryReloadUserInfoRequest)}
+              ctaLoading={isLoading}
+              ctaOnClick={retryUserInfoRequest}
+            >
+              {intl.formatMessage(messages.userInfoRequestFailed)}
+            </Infobox>
+          )}
 
-            {!userInfoRequestFailed && !isLoading && (
-              <>
-                <H1
-                  className={classnames({
-                    [classes.headline]: true,
-                    [classes.headlineWithSpacing]: true,
-                  })}
-                >
-                  {intl.formatMessage(messages.contentHeadline)}
-                </H1>
-                <div className={classes.container}>
-                  <div className={classes.content}>
-                    <p>{intl.formatMessage(messages.intro)}</p>
-                    <p>{intl.formatMessage(messages.copy)}</p>
-                  </div>
-                  <img
-                    className={classes.image}
-                    src="https://cdn.franzinfra.com/announcements/assets/teams.png"
-                    alt="Ferdium for Teams"
-                  />
-                </div>
-                <div className={classes.buttonContainer}>
-                  <Button
-                    label={intl.formatMessage(messages.manageButton)}
-                    onClick={openTeamManagement}
-                    className={classes.cta}
-                  />
+          {!userInfoRequestFailed && !isLoading && (
+            <>
+              <H1
+                className={classnames({
+                  [classes.headline]: true,
+                  [classes.headlineWithSpacing]: true,
+                })}
+              >
+                {intl.formatMessage(messages.contentHeadline)}
+              </H1>
+              <div className={classes.container}>
+                <div className={classes.content}>
+                  <p>{intl.formatMessage(messages.intro)}</p>
+                  <p>{intl.formatMessage(messages.copy)}</p>
                 </div>
-              </>
-            )}
-          </div>
-          <ReactTooltip place="right" type="dark" effect="solid" />
+                <img
+                  className={classes.image}
+                  src="https://cdn.franzinfra.com/announcements/assets/teams.png"
+                  alt="Ferdium for Teams"
+                />
+              </div>
+              <div className={classes.buttonContainer}>
+                <Button
+                  label={intl.formatMessage(messages.manageButton)}
+                  onClick={openTeamManagement}
+                  className={classes.cta}
+                />
+              </div>
+            </>
+          )}
         </div>
-      );
-    }
-    return (
+        <ReactTooltip place="right" type="dark" effect="solid" />
+      </div>
+    ) : (
       <div className="settings__main">
         <div className="settings__header">
           <span className="settings__header-item">
@@ -205,5 +200,5 @@ class TeamDashboard extends Component {
 }
 
 export default injectIntl(
-  injectSheet(styles, { injectTheme: true })(observer(TeamDashboard)),
+  withStyles(styles, { injectTheme: true })(TeamDashboard),
 );
diff --git a/src/components/ui/FullscreenLoader/index.js b/src/components/ui/FullscreenLoader/index.js
deleted file mode 100644
index f8c6b92ee..000000000
--- a/src/components/ui/FullscreenLoader/index.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { observer } from 'mobx-react';
-import injectStyle from 'react-jss';
-import classnames from 'classnames';
-
-import Loader from '../Loader';
-
-import styles from './styles';
-import { H1 } from '../headline';
-
-class FullscreenLoader extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    title: PropTypes.string,
-    classes: PropTypes.object.isRequired,
-    theme: PropTypes.object.isRequired,
-    spinnerColor: PropTypes.string,
-    children: PropTypes.node,
-  };
-
-  static defaultProps = {
-    className: null,
-    spinnerColor: null,
-    children: null,
-    title: null,
-  };
-
-  render() {
-    const { classes, title, children, spinnerColor, className, theme } =
-      this.props;
-
-    return (
-      <div className={classes.wrapper}>
-        <div
-          className={classnames({
-            [`${classes.component}`]: true,
-            [`${className}`]: className,
-          })}
-        >
-          <H1 className={classes.title}>{title}</H1>
-          <Loader color={spinnerColor || theme.colorFullscreenLoaderSpinner} />
-          {children && <div className={classes.content}>{children}</div>}
-        </div>
-      </div>
-    );
-  }
-}
-
-export default injectStyle(styles, { injectTheme: true })(
-  observer(FullscreenLoader),
-);
diff --git a/src/components/ui/FullscreenLoader/index.tsx b/src/components/ui/FullscreenLoader/index.tsx
new file mode 100644
index 000000000..002ee7932
--- /dev/null
+++ b/src/components/ui/FullscreenLoader/index.tsx
@@ -0,0 +1,54 @@
+import { Component, ReactElement, ReactNode } from 'react';
+import { observer } from 'mobx-react';
+import withStyles, { WithStylesProps } from 'react-jss';
+import classnames from 'classnames';
+import Loader from '../Loader';
+import styles from './styles';
+import { H1 } from '../headline';
+import { Theme } from '../../../themes';
+
+interface IProps extends WithStylesProps<typeof styles> {
+  className?: string;
+  title?: string;
+  theme?: Theme;
+  spinnerColor?: string;
+  loaded?: boolean;
+  children?: ReactNode;
+}
+
+@observer
+class FullscreenLoader extends Component<IProps> {
+  render(): ReactElement {
+    const {
+      classes,
+      theme = '',
+      className = '',
+      spinnerColor = '',
+      children = null,
+      title = '',
+      loaded = false,
+    } = this.props;
+
+    return (
+      <div className={classes.wrapper}>
+        <div
+          className={classnames({
+            [`${classes.component}`]: true,
+            [`${className}`]: className,
+          })}
+        >
+          <H1 className={classes.title}>{title}</H1>
+          <Loader
+            color={
+              spinnerColor || (theme && theme.colorFullscreenLoaderSpinner)
+            }
+            loaded={loaded}
+          />
+          {children && <div className={classes.content}>{children}</div>}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default withStyles(styles, { injectTheme: true })(FullscreenLoader);
diff --git a/src/components/ui/Loader.tsx b/src/components/ui/Loader.tsx
index 5e78ed47a..ebb437d9d 100644
--- a/src/components/ui/Loader.tsx
+++ b/src/components/ui/Loader.tsx
@@ -1,4 +1,4 @@
-import { Component, PropsWithChildren } from 'react';
+import { Component, ReactElement, ReactNode } from 'react';
 import { observer, inject } from 'mobx-react';
 import Loader from 'react-loader';
 
@@ -9,31 +9,30 @@ interface IProps {
   color?: string;
   loaded?: boolean;
   stores?: FerdiumStores;
+  children?: ReactNode;
 }
 
 // Can this file be merged into the './loader/index.tsx' file?
 @inject('stores')
 @observer
-class LoaderComponent extends Component<PropsWithChildren<IProps>> {
-  static defaultProps = {
-    loaded: false,
-    color: 'ACCENT',
-  };
+class LoaderComponent extends Component<IProps> {
+  render(): ReactElement {
+    const {
+      loaded = false,
+      color = 'ACCENT',
+      className,
+      children,
+    } = this.props;
 
-  render() {
-    const { children, loaded, className } = this.props;
-
-    const color =
-      this.props.color !== 'ACCENT'
-        ? this.props.color
-        : this.props.stores!.settings.app.accentColor;
+    const loaderColor =
+      color !== 'ACCENT' ? color : this.props.stores!.settings.app.accentColor;
 
     return (
       <Loader
         loaded={loaded}
         width={4}
         scale={0.6}
-        color={color}
+        color={loaderColor}
         component="span"
         className={className}
       >
diff --git a/src/components/ui/ServiceIcon.js b/src/components/ui/ServiceIcon.tsx
index b05d791be..39a32e44d 100644
--- a/src/components/ui/ServiceIcon.js
+++ b/src/components/ui/ServiceIcon.tsx
@@ -1,9 +1,7 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
+import { Component, ReactNode } from 'react';
 import { observer } from 'mobx-react';
-import injectSheet from 'react-jss';
+import withStyles, { WithStylesProps } from 'react-jss';
 import classnames from 'classnames';
-
 import ServiceModel from '../../models/Service';
 
 const styles = theme => ({
@@ -24,20 +22,16 @@ const styles = theme => ({
   },
 });
 
-// Should this file be converted into the coding style similar to './toggle/index.tsx'?
-class ServiceIcon extends Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    service: PropTypes.instanceOf(ServiceModel).isRequired,
-    className: PropTypes.string,
-  };
-
-  static defaultProps = {
-    className: '',
-  };
+interface IProps extends WithStylesProps<typeof styles> {
+  service: ServiceModel;
+  className?: string;
+}
 
-  render() {
-    const { classes, className, service } = this.props;
+// TODO - [TS DEBT] Should this file be converted into the coding style similar to './toggle/index.tsx'?
+@observer
+class ServiceIcon extends Component<IProps> {
+  render(): ReactNode {
+    const { classes, className = '', service } = this.props;
 
     return (
       <div className={classnames([classes.root, className])}>
@@ -55,6 +49,4 @@ class ServiceIcon extends Component {
   }
 }
 
-export default injectSheet(styles, { injectTheme: true })(
-  observer(ServiceIcon),
-);
+export default withStyles(styles, { injectTheme: true })(ServiceIcon);
diff --git a/src/components/ui/Slider.js b/src/components/ui/Slider.tsx
index 90f4df1c4..ed9fe9073 100644
--- a/src/components/ui/Slider.js
+++ b/src/components/ui/Slider.tsx
@@ -1,32 +1,34 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
+import { ChangeEvent, Component, ReactElement } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
-import { Field } from 'mobx-react-form';
+import { noop } from 'lodash';
 
-// Should this file be converted into the coding style similar to './toggle/index.tsx'?
-class Slider extends Component {
-  static propTypes = {
-    field: PropTypes.instanceOf(Field).isRequired,
-    className: PropTypes.string,
-    showLabel: PropTypes.bool,
-    disabled: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    className: '',
-    showLabel: true,
-    disabled: false,
-  };
-
-  onChange(e) {
-    const { field } = this.props;
+interface IProps {
+  field: any;
+  className?: string;
+  showLabel?: boolean;
+  disabled?: boolean;
+  type?: 'range' | 'number';
+  onSliderChange?: (e: ChangeEvent) => void;
+}
 
+// TODO - [TS DEBT] Should this file be converted into the coding style similar to './toggle/index.tsx'?
+@observer
+class Slider extends Component<IProps> {
+  onChange(e: ChangeEvent<HTMLInputElement>): void {
+    const { field, onSliderChange = noop } = this.props;
     field.onChange(e);
+    onSliderChange(e);
   }
 
-  render() {
-    const { field, className, showLabel, disabled } = this.props;
+  render(): ReactElement {
+    const {
+      field,
+      className = '',
+      showLabel = true,
+      disabled = false,
+      type = 'range',
+    } = this.props;
 
     if (field.value === '' && field.default !== '') {
       field.value = field.default;
@@ -43,7 +45,7 @@ class Slider extends Component {
         <div className="slider-container">
           <input
             className="slider"
-            type="range"
+            type={type}
             id={field.id}
             name={field.name}
             value={field.value}
@@ -64,4 +66,4 @@ class Slider extends Component {
   }
 }
 
-export default observer(Slider);
+export default Slider;
diff --git a/src/components/ui/StatusBarTargetUrl.js b/src/components/ui/StatusBarTargetUrl.tsx
index 3e0c98c5d..7b053f410 100644
--- a/src/components/ui/StatusBarTargetUrl.js
+++ b/src/components/ui/StatusBarTargetUrl.tsx
@@ -1,24 +1,18 @@
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
-
 import Appear from './effects/Appear';
 
-// Should this file be converted into the coding style similar to './toggle/index.tsx'?
-class StatusBarTargetUrl extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    text: PropTypes.string,
-  };
-
-  static defaultProps = {
-    className: '',
-    text: '',
-  };
+interface IProps {
+  className?: string;
+  text?: string;
+}
 
+// TODO - [TS DEBT] Should this file be converted into the coding style similar to './toggle/index.tsx'?
+@observer
+class StatusBarTargetUrl extends Component<IProps> {
   render() {
-    const { className, text } = this.props;
+    const { className = '', text = '' } = this.props;
 
     return (
       <Appear
@@ -33,4 +27,4 @@ class StatusBarTargetUrl extends Component {
   }
 }
 
-export default observer(StatusBarTargetUrl);
+export default StatusBarTargetUrl;
diff --git a/src/components/ui/WebviewLoader/index.js b/src/components/ui/WebviewLoader/index.js
deleted file mode 100644
index 20945d191..000000000
--- a/src/components/ui/WebviewLoader/index.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { observer } from 'mobx-react';
-import injectSheet from 'react-jss';
-import { defineMessages, injectIntl } from 'react-intl';
-
-import FullscreenLoader from '../FullscreenLoader';
-import styles from './styles';
-
-const messages = defineMessages({
-  loading: {
-    id: 'service.webviewLoader.loading',
-    defaultMessage: 'Loading {service}',
-  },
-});
-
-class WebviewLoader extends Component {
-  static propTypes = {
-    name: PropTypes.string.isRequired,
-    classes: PropTypes.object.isRequired,
-  };
-
-  render() {
-    const { classes, name } = this.props;
-    const { intl } = this.props;
-    return (
-      <FullscreenLoader
-        className={classes.component}
-        title={`${intl.formatMessage(messages.loading, { service: name })}`}
-      />
-    );
-  }
-}
-
-export default injectIntl(
-  injectSheet(styles, { injectTheme: true })(observer(WebviewLoader)),
-);
diff --git a/src/components/ui/WebviewLoader/index.tsx b/src/components/ui/WebviewLoader/index.tsx
new file mode 100644
index 000000000..81923b6ca
--- /dev/null
+++ b/src/components/ui/WebviewLoader/index.tsx
@@ -0,0 +1,44 @@
+import { Component, ReactElement } from 'react';
+import { observer } from 'mobx-react';
+import injectSheet, { WithStylesProps } from 'react-jss';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import FullscreenLoader from '../FullscreenLoader';
+
+const messages = defineMessages({
+  loading: {
+    id: 'service.webviewLoader.loading',
+    defaultMessage: 'Loading {service}',
+  },
+});
+
+const styles = theme => ({
+  component: {
+    background: theme.colorWebviewLoaderBackground,
+    padding: 20,
+    width: 'auto',
+    margin: [0, 'auto'],
+    borderRadius: 6,
+  },
+});
+
+interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps {
+  name: string;
+  loaded?: boolean;
+}
+
+class WebviewLoader extends Component<IProps> {
+  render(): ReactElement {
+    const { classes, name, loaded = false, intl } = this.props;
+    return (
+      <FullscreenLoader
+        className={classes.component}
+        title={`${intl.formatMessage(messages.loading, { service: name })}`}
+        loaded={loaded}
+      />
+    );
+  }
+}
+
+export default injectIntl(
+  injectSheet(styles, { injectTheme: true })(observer(WebviewLoader)),
+);
diff --git a/src/components/ui/WebviewLoader/styles.ts b/src/components/ui/WebviewLoader/styles.ts
deleted file mode 100644
index dbd75db8a..000000000
--- a/src/components/ui/WebviewLoader/styles.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export default theme => ({
-  component: {
-    background: theme.colorWebviewLoaderBackground,
-    padding: 20,
-    width: 'auto',
-    margin: [0, 'auto'],
-    borderRadius: 6,
-  },
-});
diff --git a/src/features/todos/actions.ts b/src/features/todos/actions.ts
index b47a076b9..31b14d40b 100644
--- a/src/features/todos/actions.ts
+++ b/src/features/todos/actions.ts
@@ -1,17 +1,19 @@
+import { Webview } from 'react-electron-web-view';
 import PropTypes from 'prop-types';
-import { ReactElement } from 'react';
 import { createActionsFromDefinitions } from '../../actions/lib/actions';
 
+export interface TodoClientMessage {
+  action: string;
+  data: object;
+}
+
 interface TodoActionsType {
   resize: (width: number) => void;
   toggleTodosPanel: () => void;
   toggleTodosFeatureVisibility: () => void;
-  setTodosWebview: (webview: ReactElement) => void;
+  setTodosWebview: (webview: Webview) => void;
   handleHostMessage: (action: string, data: object) => void;
-  handleClientMessage: (
-    channel: string,
-    message: { action: string; data: object },
-  ) => void;
+  handleClientMessage: (channel: string, message: TodoClientMessage) => void;
   openDevTools: () => void;
   reload: () => void;
 }
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.tsx
index 780864b91..3385ff74c 100644
--- a/src/features/todos/components/TodosWebview.js
+++ b/src/features/todos/components/TodosWebview.tsx
@@ -1,11 +1,10 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
+import { Component, createRef, ReactElement, MouseEvent } from 'react';
 import { observer } from 'mobx-react';
-import injectSheet from 'react-jss';
+import withStyles, { WithStylesProps } from 'react-jss';
 import Webview from 'react-electron-web-view';
 import classnames from 'classnames';
-
 import { TODOS_PARTITION_ID } from '../../../config';
+import { TodoClientMessage } from '../actions';
 
 const styles = theme => ({
   root: {
@@ -48,51 +47,71 @@ const styles = theme => ({
   },
 });
 
-class TodosWebview extends Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    isTodosServiceActive: PropTypes.bool.isRequired,
-    isVisible: PropTypes.bool.isRequired,
-    handleClientMessage: PropTypes.func.isRequired,
-    setTodosWebview: PropTypes.func.isRequired,
-    resize: PropTypes.func.isRequired,
-    width: PropTypes.number.isRequired,
-    minWidth: PropTypes.number.isRequired,
-    userAgent: PropTypes.string.isRequired,
-    todoUrl: PropTypes.string.isRequired,
-    isTodoUrlValid: PropTypes.bool.isRequired,
-  };
-
-  state = {
-    isDragging: false,
-    width: 300,
-  };
+interface IProps extends WithStylesProps<typeof styles> {
+  isTodosServiceActive: boolean;
+  isVisible: boolean;
+  handleClientMessage: (channel: string, message: TodoClientMessage) => void;
+  setTodosWebview: (webView: Webview) => void;
+  resize: (newWidth: number) => void;
+  width: number;
+  minWidth: number;
+  userAgent: string;
+  todoUrl: string;
+  isTodoUrlValid: boolean;
+}
+
+interface IState {
+  isDragging: boolean;
+  width: number;
+  initialPos: number;
+  delta: number;
+}
+
+@observer
+class TodosWebview extends Component<IProps, IState> {
+  private node = createRef<HTMLDivElement>();
+
+  private webview: Webview;
+
+  constructor(props: IProps) {
+    super(props);
+
+    this.state = {
+      isDragging: false,
+      width: 300,
+      initialPos: 0,
+      delta: 0,
+    };
+    this.resizePanel = this.resizePanel.bind(this);
+    this.stopResize = this.stopResize.bind(this);
+  }
 
   componentDidMount() {
     this.setState({
       width: this.props.width,
     });
 
-    this.node.addEventListener('mousemove', this.resizePanel.bind(this));
-    this.node.addEventListener('mouseup', this.stopResize.bind(this));
-    this.node.addEventListener('mouseleave', this.stopResize.bind(this));
+    if (this.node.current) {
+      this.node.current.addEventListener('mousemove', this.resizePanel);
+      this.node.current.addEventListener('mouseup', this.stopResize);
+      this.node.current.addEventListener('mouseleave', this.stopResize);
+    }
   }
 
-  startResize = event => {
+  startResize(e: MouseEvent<HTMLDivElement>): void {
     this.setState({
       isDragging: true,
-      initialPos: event.clientX,
+      initialPos: e.clientX,
       delta: 0,
     });
-  };
+  }
 
-  resizePanel(e) {
+  resizePanel(e: MouseEventInit): void {
     const { minWidth } = this.props;
-
     const { isDragging, initialPos } = this.state;
 
-    if (isDragging && Math.abs(e.clientX - window.innerWidth) > minWidth) {
-      const delta = e.clientX - initialPos;
+    if (isDragging && Math.abs(e.clientX! - window.innerWidth) > minWidth) {
+      const delta = e.clientX! - initialPos;
 
       this.setState({
         delta,
@@ -100,9 +119,8 @@ class TodosWebview extends Component {
     }
   }
 
-  stopResize() {
+  stopResize(): void {
     const { resize, minWidth } = this.props;
-
     const { isDragging, delta, width } = this.state;
 
     if (isDragging) {
@@ -123,14 +141,17 @@ class TodosWebview extends Component {
   }
 
   startListeningToIpcMessages() {
+    if (!this.webview) {
+      return;
+    }
+
     const { handleClientMessage } = this.props;
-    if (!this.webview) return;
     this.webview.addEventListener('ipc-message', e => {
-      handleClientMessage({ channel: e.channel, message: e.args[0] });
+      handleClientMessage(e.channel, e.args[0]);
     });
   }
 
-  render() {
+  render(): ReactElement {
     const {
       classes,
       isTodosServiceActive,
@@ -141,10 +162,9 @@ class TodosWebview extends Component {
     } = this.props;
 
     const { width, delta, isDragging } = this.state;
-
     let displayedWidth = isVisible ? width : 0;
     if (isTodosServiceActive) {
-      displayedWidth = null;
+      displayedWidth = 0;
     }
 
     return (
@@ -157,9 +177,7 @@ class TodosWebview extends Component {
         })}
         style={{ width: displayedWidth }}
         onMouseUp={() => this.stopResize()}
-        ref={node => {
-          this.node = node;
-        }}
+        ref={this.node}
         id="todos-panel"
       >
         <div
@@ -168,7 +186,7 @@ class TodosWebview extends Component {
             left: delta,
             ...(isDragging ? { width: 600, marginLeft: -200 } : {}),
           }} // This hack is required as resizing with webviews beneath behaves quite bad
-          onMouseDown={e => this.startResize(e)}
+          onMouseDown={this.startResize}
         />
         {isDragging && (
           <div
@@ -178,7 +196,7 @@ class TodosWebview extends Component {
         )}
         {isTodoUrlValid && (
           <Webview
-            className={classes.webview}
+            // className={classes.webview} // TODO - [TS DEBT] style not found
             onDidAttach={() => {
               const { setTodosWebview } = this.props;
               setTodosWebview(this.webview);
@@ -198,6 +216,4 @@ class TodosWebview extends Component {
   }
 }
 
-export default injectSheet(styles, { injectTheme: true })(
-  observer(TodosWebview),
-);
+export default withStyles(styles, { injectTheme: true })(TodosWebview);
diff --git a/src/features/todos/containers/TodosScreen.js b/src/features/todos/containers/TodosScreen.tsx
index b97506767..17f61bd95 100644
--- a/src/features/todos/containers/TodosScreen.js
+++ b/src/features/todos/containers/TodosScreen.tsx
@@ -1,22 +1,26 @@
-import { Component } from 'react';
+import { Component, ReactElement } from 'react';
 import { observer, inject } from 'mobx-react';
-import PropTypes from 'prop-types';
-
-import FeaturesStore from '../../../stores/FeaturesStore';
 import TodosWebview from '../components/TodosWebview';
 import ErrorBoundary from '../../../components/util/ErrorBoundary';
 import { todosStore } from '..';
 import { TODOS_MIN_WIDTH } from '../../../config';
 import { todoActions } from '../actions';
-import ServicesStore from '../../../stores/ServicesStore';
+import { RealStores } from '../../../stores';
+
+interface IProps {
+  stores?: RealStores;
+}
 
-class TodosScreen extends Component {
-  render() {
-    if (
+@inject('stores', 'actions')
+@observer
+class TodosScreen extends Component<IProps> {
+  render(): ReactElement | null {
+    const showTodoScreen =
       !todosStore ||
       !todosStore.isFeatureActive ||
-      todosStore.isTodosPanelForceHidden
-    ) {
+      todosStore.isTodosPanelForceHidden;
+
+    if (showTodoScreen) {
       return null;
     }
 
@@ -24,15 +28,15 @@ class TodosScreen extends Component {
       <ErrorBoundary>
         <TodosWebview
           isTodosServiceActive={
-            this.props.stores.services.isTodosServiceActive || false
+            this.props.stores!.services.isTodosServiceActive || false
           }
           isVisible={todosStore.isTodosPanelVisible}
-          togglePanel={todoActions.toggleTodosPanel}
+          // togglePanel={todoActions.toggleTodosPanel} // TODO - [TECH DEBT][PROP NOT USED IN COMPONENT] check it later
           handleClientMessage={todoActions.handleClientMessage}
-          setTodosWebview={webview => todoActions.setTodosWebview({ webview })}
+          setTodosWebview={webview => todoActions.setTodosWebview(webview)}
           width={todosStore.width}
           minWidth={TODOS_MIN_WIDTH}
-          resize={width => todoActions.resize({ width })}
+          resize={width => todoActions.resize(width)}
           userAgent={todosStore.userAgent}
           todoUrl={todosStore.todoUrl}
           isTodoUrlValid={todosStore.isTodoUrlValid}
@@ -42,11 +46,4 @@ class TodosScreen extends Component {
   }
 }
 
-export default inject('stores', 'actions')(observer(TodosScreen));
-
-TodosScreen.propTypes = {
-  stores: PropTypes.shape({
-    features: PropTypes.instanceOf(FeaturesStore).isRequired,
-    services: PropTypes.instanceOf(ServicesStore).isRequired,
-  }).isRequired,
-};
+export default TodosScreen;
diff --git a/src/features/utils/FeatureStore.js b/src/features/utils/FeatureStore.ts
index eada332d7..2bdd167f3 100644
--- a/src/features/utils/FeatureStore.js
+++ b/src/features/utils/FeatureStore.ts
@@ -1,7 +1,9 @@
+import Reaction from '../../stores/lib/Reaction';
+
 export default class FeatureStore {
-  _actions = [];
+  _actions: any = [];
 
-  _reactions = [];
+  _reactions: Reaction[] = [];
 
   stop() {
     this._stopActions();
@@ -9,32 +11,38 @@ export default class FeatureStore {
   }
 
   // ACTIONS
-
   _registerActions(actions) {
     this._actions = actions;
     this._startActions();
   }
 
   _startActions(actions = this._actions) {
-    for (const a of actions) a.start();
+    for (const action of actions) {
+      action.start();
+    }
   }
 
   _stopActions(actions = this._actions) {
-    for (const a of actions) a.stop();
+    for (const action of actions) {
+      action.stop();
+    }
   }
 
   // REACTIONS
-
   _registerReactions(reactions) {
     this._reactions = reactions;
     this._startReactions();
   }
 
   _startReactions(reactions = this._reactions) {
-    for (const r of reactions) r.start();
+    for (const reaction of reactions) {
+      reaction.start();
+    }
   }
 
   _stopReactions(reactions = this._reactions) {
-    for (const r of reactions) r.stop();
+    for (const reaction of reactions) {
+      reaction.stop();
+    }
   }
 }
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.tsx
index ff73758c1..c9af22c96 100644
--- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
+++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.tsx
@@ -1,12 +1,11 @@
-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 withStyles, { WithStylesProps } from 'react-jss';
 import classnames from 'classnames';
-import { defineMessages, injectIntl } from 'react-intl';
-
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import Loader from '../../../components/ui/loader/index';
 import { workspaceStore } from '../index';
+import { Theme } from '../../../themes';
 
 const messages = defineMessages({
   switchingTo: {
@@ -15,11 +14,10 @@ const messages = defineMessages({
   },
 });
 
-let wrapperTransition = 'none';
-
-if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
-  wrapperTransition = 'width 0.5s ease';
-}
+const wrapperTransition =
+  window && window.matchMedia('(prefers-reduced-motion: no-preference)')
+    ? 'width 0.5s ease'
+    : 'none';
 
 const styles = theme => ({
   wrapper: {
@@ -53,26 +51,30 @@ const styles = theme => ({
   },
 });
 
-class WorkspaceSwitchingIndicator extends Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    theme: PropTypes.object.isRequired,
-  };
+interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps {
+  theme?: Theme;
+}
 
-  render() {
-    const { classes, theme } = this.props;
-    const { intl } = this.props;
+@observer
+class WorkspaceSwitchingIndicator extends Component<IProps> {
+  render(): ReactElement | null {
+    const { classes, intl, theme } = this.props;
     const { isSwitchingWorkspace, nextWorkspace } = workspaceStore;
-    if (!isSwitchingWorkspace) return null;
+
+    if (!isSwitchingWorkspace) {
+      return null;
+    }
+
     const nextWorkspaceName = nextWorkspace
       ? nextWorkspace.name
       : 'All services';
+
     return (
       <div className={classnames([classes.wrapper])}>
         <div className={classes.component}>
           <Loader
             className={classes.spinner}
-            color={theme.workspaces.switchingIndicator.spinnerColor}
+            color={theme?.workspaces.switchingIndicator.spinnerColor}
           />
           <p className={classes.message}>
             {`${intl.formatMessage(messages.switchingTo)} ${nextWorkspaceName}`}
@@ -84,7 +86,5 @@ class WorkspaceSwitchingIndicator extends Component {
 }
 
 export default injectIntl(
-  injectSheet(styles, { injectTheme: true })(
-    observer(WorkspaceSwitchingIndicator),
-  ),
+  withStyles(styles, { injectTheme: true })(WorkspaceSwitchingIndicator),
 );
diff --git a/src/helpers/url-helpers.ts b/src/helpers/url-helpers.ts
index 69a2cc4dc..9c5cf7752 100644
--- a/src/helpers/url-helpers.ts
+++ b/src/helpers/url-helpers.ts
@@ -1,14 +1,12 @@
 // This is taken from: https://benjamin-altpeter.de/shell-openexternal-dangers/
-
 import { URL } from 'url';
 import { ensureDirSync, existsSync } from 'fs-extra';
 import { shell } from 'electron';
-
 import { ALLOWED_PROTOCOLS } from '../config';
 
 const debug = require('../preload-safe-debug')('Ferdium:Helpers:url');
 
-export function isValidExternalURL(url: string | URL) {
+export function isValidExternalURL(url: string | URL): boolean {
   let parsedUrl: URL;
   try {
     parsedUrl = new URL(url.toString());
@@ -17,13 +15,12 @@ export function isValidExternalURL(url: string | URL) {
   }
 
   const isAllowed = ALLOWED_PROTOCOLS.includes(parsedUrl.protocol);
-
   debug('protocol check is', isAllowed, 'for:', url);
 
   return isAllowed;
 }
 
-export function fixUrl(url: string | URL) {
+export function fixUrl(url: string | URL): string {
   return url
     .toString()
     .replaceAll('//', '/')
@@ -32,11 +29,11 @@ export function fixUrl(url: string | URL) {
     .replaceAll('file:/', 'file://');
 }
 
-export function isValidFileUrl(path: string) {
+export function isValidFileUrl(path: string): boolean {
   return path.startsWith('file') && existsSync(new URL(path));
 }
 
-export async function openPath(folderName: string) {
+export async function openPath(folderName: string): Promise<void> {
   ensureDirSync(folderName);
   shell.openPath(folderName);
 }
@@ -45,7 +42,7 @@ export async function openPath(folderName: string) {
 export function openExternalUrl(
   url: string | URL,
   skipValidityCheck: boolean = false,
-) {
+): void {
   const fixedUrl = fixUrl(url.toString());
   debug('Open url:', fixedUrl, 'with skipValidityCheck:', skipValidityCheck);
   if (skipValidityCheck || isValidExternalURL(fixedUrl)) {
diff --git a/src/stores/FeaturesStore.ts b/src/stores/FeaturesStore.ts
index 5f43ccf84..8584b6060 100644
--- a/src/stores/FeaturesStore.ts
+++ b/src/stores/FeaturesStore.ts
@@ -5,7 +5,6 @@ import {
   observable,
   runInAction,
 } from 'mobx';
-
 import { Stores } from '../@types/stores.types';
 import { ApiInterface } from '../api';
 import { Actions } from '../actions/lib/actions';
@@ -21,6 +20,14 @@ import appearance from '../features/appearance';
 import TypedStore from './lib/TypedStore';
 
 export default class FeaturesStore extends TypedStore {
+  @observable features = {};
+
+  constructor(stores: Stores, api: ApiInterface, actions: Actions) {
+    super(stores, api, actions);
+
+    makeObservable(this);
+  }
+
   @observable defaultFeaturesRequest = new CachedRequest(
     this.api.features,
     'default',
@@ -31,14 +38,6 @@ export default class FeaturesStore extends TypedStore {
     'features',
   );
 
-  @observable features = {};
-
-  constructor(stores: Stores, api: ApiInterface, actions: Actions) {
-    super(stores, api, actions);
-
-    makeObservable(this);
-  }
-
   async setup(): Promise<void> {
     this.registerReactions([
       this._updateFeatures,