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

3 files changed, 91 insertions, 76 deletions

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;