chore: convert components to tsx (#2071)

7 files changed, 56 insertions, 57 deletions

diff --git a/src/features/basicAuth/index.js b/src/features/basicAuth/index.ts
index e43d51d15..149ab6c19 100644
--- a/src/features/basicAuth/index.js
+++ b/src/features/basicAuth/index.ts
@@ -1,4 +1,4 @@
-import { ipcRenderer } from 'electron';
+import { AuthInfo, BrowserWindow, ipcRenderer } from 'electron';
 
 import BasicAuthComponent from './Component';
 
@@ -11,7 +11,7 @@ const state = ModalState;
 export default function initialize() {
   debug('Initialize basicAuth feature');
 
-  window.ferdi.features.basicAuth = {
+  window['ferdi'].features.basicAuth = {
     state,
   };
 
@@ -23,7 +23,7 @@ export default function initialize() {
   });
 }
 
-export function mainIpcHandler(mainWindow, authInfo) {
+export function mainIpcHandler(mainWindow: BrowserWindow, authInfo: AuthInfo) {
   debug('Sending basic auth call', authInfo);
 
   mainWindow.webContents.send('feature:basic-auth-request', {
diff --git a/src/features/nightlyBuilds/index.js b/src/features/nightlyBuilds/index.ts
index 89bcb5cb3..14afbaf1b 100644
--- a/src/features/nightlyBuilds/index.js
+++ b/src/features/nightlyBuilds/index.ts
@@ -14,26 +14,26 @@ export default function initialize() {
   }
 
   function toggleFeature() {
-    if (window.ferdi.stores.settings.app.nightly) {
-      window.ferdi.actions.settings.update({
+    if (window['ferdi'].stores.settings.app.nightly) {
+      window['ferdi'].actions.settings.update({
         type: 'app',
         data: {
           nightly: false,
         },
       });
-      window.ferdi.actions.user.update({
+      window['ferdi'].actions.user.update({
         userData: {
           nightly: false,
         },
       });
     } else {
       // We need to close the settings, otherwise the modal will be drawn under the settings window
-      window.ferdi.actions.ui.closeSettings();
+      window['ferdi'].actions.ui.closeSettings();
       showModal();
     }
   }
 
-  window.ferdi.features.nightlyBuilds = {
+  window['ferdi'].features.nightlyBuilds = {
     state,
     showModal,
     toggleFeature,
diff --git a/src/features/todos/preload.js b/src/features/todos/preload.ts
index 3b86ddbc5..31d473051 100644
--- a/src/features/todos/preload.js
+++ b/src/features/todos/preload.ts
@@ -14,7 +14,7 @@ let hostMessageListener = ({ action }) => {
   }
 };
 
-window.ferdi = {
+window['ferdi'] = {
   onInitialize(ipcHostMessageListener) {
     hostMessageListener = ipcHostMessageListener;
     ipcRenderer.sendToHost(IPC.TODOS_CLIENT_CHANNEL, {
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,
diff --git a/src/features/workspaces/containers/EditWorkspaceScreen.js b/src/features/workspaces/containers/EditWorkspaceScreen.tsx
index bd9e235e3..8e8f8179d 100644
--- a/src/features/workspaces/containers/EditWorkspaceScreen.js
+++ b/src/features/workspaces/containers/EditWorkspaceScreen.tsx
@@ -1,26 +1,26 @@
 import { Component } from 'react';
 import { inject, observer } from 'mobx-react';
-import PropTypes from 'prop-types';
 
 import ErrorBoundary from '../../../components/util/ErrorBoundary';
 import EditWorkspaceForm from '../components/EditWorkspaceForm';
-import ServicesStore from '../../../stores/ServicesStore';
 import Workspace from '../models/Workspace';
 import { workspaceStore } from '../index';
 import { deleteWorkspaceRequest, updateWorkspaceRequest } from '../api';
-import WorkspacesStore from '../store';
+import { ServicesStore, WorkspacesStore } from '../../../stores.types';
 
-@inject('stores', 'actions') @observer
-class EditWorkspaceScreen extends Component {
-  static propTypes = {
-    actions: PropTypes.shape({
-      workspaces: PropTypes.instanceOf(WorkspacesStore),
-    }).isRequired,
-    stores: PropTypes.shape({
-      services: PropTypes.instanceOf(ServicesStore).isRequired,
-    }).isRequired,
+type Props = {
+  actions: {
+    workspaces: WorkspacesStore;
   };
+  stores: {
+    services: ServicesStore;
+  };
+};
 
+@inject('stores', 'actions')
+@observer
+class EditWorkspaceScreen extends Component<Props> {
+  // @ts-expect-error Not all code paths return a value.
   onDelete = () => {
     const { workspaceBeingEdited } = workspaceStore;
     const { actions } = this.props;
@@ -28,12 +28,14 @@ class EditWorkspaceScreen extends Component {
     actions.workspaces.delete({ workspace: workspaceBeingEdited });
   };
 
-  onSave = (values) => {
+  onSave = values => {
     const { workspaceBeingEdited } = workspaceStore;
     const { actions } = this.props;
-    const workspace = new Workspace(
-      ({ saving: true, ...workspaceBeingEdited, ...values }),
-    );
+    const workspace = new Workspace({
+      saving: true,
+      ...workspaceBeingEdited,
+      ...values,
+    });
     actions.workspaces.update({ workspace });
   };
 
diff --git a/src/features/workspaces/containers/WorkspacesScreen.js b/src/features/workspaces/containers/WorkspacesScreen.tsx
index 2ba3784cb..a07e92439 100644
--- a/src/features/workspaces/containers/WorkspacesScreen.js
+++ b/src/features/workspaces/containers/WorkspacesScreen.tsx
@@ -1,6 +1,5 @@
 import { Component } from 'react';
 import { inject, observer } from 'mobx-react';
-import PropTypes from 'prop-types';
 import WorkspacesDashboard from '../components/WorkspacesDashboard';
 import ErrorBoundary from '../../../components/util/ErrorBoundary';
 import { workspaceStore } from '../index';
@@ -10,16 +9,17 @@ import {
   getUserWorkspacesRequest,
   updateWorkspaceRequest,
 } from '../api';
-import WorkspacesStore from '../store';
+import { WorkspacesStore } from '../../../stores.types';
 
-@inject('stores', 'actions') @observer
-class WorkspacesScreen extends Component {
-  static propTypes = {
-    actions: PropTypes.shape({
-      workspaces: PropTypes.instanceOf(WorkspacesStore),
-    }).isRequired,
+type Props = {
+  actions: {
+    workspaces: WorkspacesStore;
   };
+};
 
+@inject('stores', 'actions')
+@observer
+class WorkspacesScreen extends Component<Props> {
   render() {
     const { actions } = this.props;
     return (
@@ -30,8 +30,8 @@ class WorkspacesScreen extends Component {
           createWorkspaceRequest={createWorkspaceRequest}
           deleteWorkspaceRequest={deleteWorkspaceRequest}
           updateWorkspaceRequest={updateWorkspaceRequest}
-          onCreateWorkspaceSubmit={(data) => actions.workspaces.create(data)}
-          onWorkspaceClick={(w) => actions.workspaces.edit({ workspace: w })}
+          onCreateWorkspaceSubmit={data => actions.workspaces.create(data)}
+          onWorkspaceClick={w => actions.workspaces.edit({ workspace: w })}
         />
       </ErrorBoundary>
     );