Transform service components to ts (#778)

3 files changed, 76 insertions, 57 deletions

diff --git a/src/components/settings/services/ServiceError.js b/src/components/settings/services/ServiceError.tsx
index fdcdb54c9..87efdeb96 100644
--- a/src/components/settings/services/ServiceError.js
+++ b/src/components/settings/services/ServiceError.tsx
@@ -1,8 +1,7 @@
-import { Component } from '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 Infobox from '../../ui/Infobox';
 import Button from '../../ui/button';
 
@@ -25,8 +24,11 @@ const messages = defineMessages({
   },
 });
 
-class ServiceError extends Component {
-  render() {
+interface IProps extends WrappedComponentProps {}
+
+@observer
+class ServiceError extends Component<IProps> {
+  render(): ReactElement {
     const { intl } = this.props;
 
     return (
@@ -59,4 +61,4 @@ class ServiceError extends Component {
   }
 }
 
-export default injectIntl(observer(ServiceError));
+export default injectIntl(ServiceError);
diff --git a/src/components/settings/services/ServiceItem.js b/src/components/settings/services/ServiceItem.tsx
index c666b7dd2..fd961a0a8 100644
--- a/src/components/settings/services/ServiceItem.js
+++ b/src/components/settings/services/ServiceItem.tsx
@@ -1,10 +1,8 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { defineMessages, injectIntl } from 'react-intl';
+import { Component, ReactElement } from 'react';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
-
 import { mdiBellOff, mdiMessageBulletedOff, mdiPower } from '@mdi/js';
 import ServiceModel from '../../../models/Service';
 import Icon from '../../ui/icon';
@@ -24,16 +22,17 @@ const messages = defineMessages({
   },
 });
 
-class ServiceItem extends Component {
-  static propTypes = {
-    service: PropTypes.instanceOf(ServiceModel).isRequired,
-    goToServiceForm: PropTypes.func.isRequired,
-  };
+interface IProps extends WrappedComponentProps {
+  service: ServiceModel;
+  goToServiceForm: () => void;
+}
 
-  render() {
+@observer
+class ServiceItem extends Component<IProps> {
+  render(): ReactElement {
     const {
       service,
-      // toggleAction,
+      // toggleAction, //  TODO - [TECH DEBT][PROP NOT USED IN COMPONENT] check it later
       goToServiceForm,
     } = this.props;
     const { intl } = this.props;
@@ -45,7 +44,11 @@ class ServiceItem extends Component {
           'service-table__row--disabled': !service.isEnabled,
         })}
       >
-        <td className="service-table__column-icon" onClick={goToServiceForm}>
+        <td
+          className="service-table__column-icon"
+          onClick={goToServiceForm}
+          role="gridcell"
+        >
           <img
             src={service.icon}
             className={classnames({
@@ -55,10 +58,18 @@ class ServiceItem extends Component {
             alt=""
           />
         </td>
-        <td className="service-table__column-name" onClick={goToServiceForm}>
+        <td
+          className="service-table__column-name"
+          onClick={goToServiceForm}
+          role="gridcell"
+        >
           {service.name !== '' ? service.name : service.recipe.name}
         </td>
-        <td className="service-table__column-info" onClick={goToServiceForm}>
+        <td
+          className="service-table__column-info"
+          onClick={goToServiceForm}
+          role="gridcell"
+        >
           {service.isMuted && (
             <Icon
               icon={mdiBellOff}
@@ -66,7 +77,11 @@ class ServiceItem extends Component {
             />
           )}
         </td>
-        <td className="service-table__column-info" onClick={goToServiceForm}>
+        <td
+          className="service-table__column-info"
+          onClick={goToServiceForm}
+          role="gridcell"
+        >
           {!service.isEnabled && (
             <Icon
               icon={mdiPower}
@@ -74,7 +89,11 @@ class ServiceItem extends Component {
             />
           )}
         </td>
-        <td className="service-table__column-info" onClick={goToServiceForm}>
+        <td
+          className="service-table__column-info"
+          onClick={goToServiceForm}
+          role="gridcell"
+        >
           {!service.isNotificationEnabled && (
             <Icon
               icon={mdiMessageBulletedOff}
@@ -90,4 +109,4 @@ class ServiceItem extends Component {
   }
 }
 
-export default injectIntl(observer(ServiceItem));
+export default injectIntl(ServiceItem);
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.tsx
index ac1c30ecb..36057902f 100644
--- a/src/components/settings/services/ServicesDashboard.js
+++ b/src/components/settings/services/ServicesDashboard.tsx
@@ -1,9 +1,8 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { observer, PropTypes as MobxPropTypes } 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 { To } from 'history';
 import SearchInput from '../../ui/SearchInput';
 import Infobox from '../../ui/Infobox';
 import Loader from '../../ui/Loader';
@@ -11,6 +10,7 @@ import FAB from '../../ui/FAB';
 import ServiceItem from './ServiceItem';
 import Appear from '../../ui/effects/Appear';
 import { H1 } from '../../ui/headline';
+import Service from '../../../models/Service';
 
 const messages = defineMessages({
   headline: {
@@ -51,38 +51,35 @@ const messages = defineMessages({
   },
 });
 
-class ServicesDashboard extends Component {
-  static propTypes = {
-    services: MobxPropTypes.arrayOrObservableArray.isRequired,
-    isLoading: PropTypes.bool.isRequired,
-    toggleService: PropTypes.func.isRequired,
-    filterServices: PropTypes.func.isRequired,
-    resetFilter: PropTypes.func.isRequired,
-    goTo: PropTypes.func.isRequired,
-    servicesRequestFailed: PropTypes.bool.isRequired,
-    retryServicesRequest: PropTypes.func.isRequired,
-    status: MobxPropTypes.arrayOrObservableArray.isRequired,
-    searchNeedle: PropTypes.string,
-  };
-
-  static defaultProps = {
-    searchNeedle: '',
-  };
+interface IProps extends WrappedComponentProps {
+  services: Service[];
+  isLoading: boolean;
+  // toggleService: any; // TODO - - [TECH DEBT] check it later
+  filterServices: any;
+  resetFilter: () => void;
+  goTo: (to: To, state?: any) => void;
+  servicesRequestFailed: boolean;
+  retryServicesRequest: () => void;
+  status: any;
+  searchNeedle: string | null;
+}
 
-  render() {
+@observer
+class ServicesDashboard extends Component<IProps> {
+  render(): ReactElement {
     const {
       services,
       isLoading,
-      toggleService,
+      // toggleService, // TODO - - [TECH DEBT] check it later
       filterServices,
       resetFilter,
       goTo,
       servicesRequestFailed,
       retryServicesRequest,
       status,
-      searchNeedle,
+      searchNeedle = '',
+      intl,
     } = this.props;
-    const { intl } = this.props;
 
     return (
       <div className="settings__main">
@@ -115,7 +112,7 @@ class ServicesDashboard extends Component {
               <Infobox
                 type="success"
                 icon="checkbox-marked-circle-outline"
-                dismissable
+                dismissible
               >
                 {intl.formatMessage(messages.updatedInfo)}
               </Infobox>
@@ -127,7 +124,7 @@ class ServicesDashboard extends Component {
               <Infobox
                 type="success"
                 icon="checkbox-marked-circle-outline"
-                dismissable
+                dismissible
               >
                 {intl.formatMessage(messages.deletedInfo)}
               </Infobox>
@@ -160,15 +157,16 @@ class ServicesDashboard extends Component {
           {isLoading ? (
             <Loader />
           ) : (
-            <table className="service-table">
+            <table className="service-table" role="grid">
               <tbody>
                 {services.map(service => (
                   <ServiceItem
                     key={service.id}
                     service={service}
-                    toggleAction={() =>
-                      toggleService({ serviceId: service.id })
-                    }
+                    // TODO -  - [TECH DEBT][PROPS NOT USED IN COMPONENT] check it later
+                    // toggleAction={() =>
+                    //   toggleService({ serviceId: service.id })
+                    // }
                     goToServiceForm={() =>
                       goTo(`/settings/services/edit/${service.id}`)
                     }
@@ -178,7 +176,7 @@ class ServicesDashboard extends Component {
             </table>
           )}
 
-          <FAB>
+          <FAB className="FAB-class">
             <Link to="/settings/recipes">+</Link>
           </FAB>
         </div>
@@ -187,4 +185,4 @@ class ServicesDashboard extends Component {
   }
 }
 
-export default injectIntl(observer(ServicesDashboard));
+export default injectIntl(ServicesDashboard);