chore: convert components to tsx (#2071)

2 files changed, 19 insertions, 22 deletions

diff --git a/src/features/workspaces/components/WorkspaceItem.js b/src/features/workspaces/components/WorkspaceItem.tsx
index ff3f69dd9..6fb02d2f5 100644
--- a/src/features/workspaces/components/WorkspaceItem.js
+++ b/src/features/workspaces/components/WorkspaceItem.tsx
@@ -16,9 +16,15 @@ const styles = theme => ({
   columnName: {},
 });
 
+type Props = {
+  classes: any;
+  workspace: any;
+  onItemClick: (workspace) => void;
+};
+
 @injectSheet(styles)
 @observer
-class WorkspaceItem extends Component {
+class WorkspaceItem extends Component<Props> {
   static propTypes = {
     classes: PropTypes.object.isRequired,
     workspace: PropTypes.instanceOf(Workspace).isRequired,
diff --git a/src/features/workspaces/components/WorkspaceServiceListItem.js b/src/features/workspaces/components/WorkspaceServiceListItem.tsx
index c06f3c61c..b6faaf4ce 100644
--- a/src/features/workspaces/components/WorkspaceServiceListItem.js
+++ b/src/features/workspaces/components/WorkspaceServiceListItem.tsx
@@ -1,14 +1,12 @@
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
 import classnames from 'classnames';
 import { Toggle } from '@meetfranz/forms';
 
-import Service from '../../../models/Service';
 import ServiceIcon from '../../../components/ui/ServiceIcon';
 
-const styles = (theme) => ({
+const styles = theme => ({
   listItem: {
     height: theme.workspaces.settings.listItems.height,
     borderBottom: `1px solid ${theme.workspaces.settings.listItems.borderColor}`,
@@ -31,29 +29,22 @@ const styles = (theme) => ({
   },
 });
 
-@injectSheet(styles) @observer
-class WorkspaceServiceListItem extends Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    isInWorkspace: PropTypes.bool.isRequired,
-    onToggle: PropTypes.func.isRequired,
-    service: PropTypes.instanceOf(Service).isRequired,
-  };
+type Props = {
+  classes: any;
+  isInWorkspace: boolean;
+  onToggle: () => void;
+  service: any;
+};
 
+@injectSheet(styles)
+@observer
+class WorkspaceServiceListItem extends Component<Props> {
   render() {
-    const {
-      classes,
-      isInWorkspace,
-      onToggle,
-      service,
-    } = this.props;
+    const { classes, isInWorkspace, onToggle, service } = this.props;
 
     return (
       <div className={classes.listItem}>
-        <ServiceIcon
-          className={classes.serviceIcon}
-          service={service}
-        />
+        <ServiceIcon className={classes.serviceIcon} service={service} />
         <span
           className={classnames([
             classes.label,