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

9 files changed, 158 insertions, 171 deletions

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,
-  },
-});