moved components to TypeScript

src/components/panels/DistanceBar.tsx

@@ -1,39 +1,38 @@
 // flow
-import React from 'react';
+import * as React from 'react';
 import { toHours } from '$utils/format';
 import { Icon } from '$components/panels/Icon';
 import { connect } from 'react-redux';
 import Slider from 'rc-slider';
 import { bindActionCreators } from 'redux';
 import { setSpeed } from '$redux/user/actions';
+import { IRootState } from "$redux/user/reducer";
 
-type Props = {
-  distance: number,
-  estimated: number,
-  speed: number,
-  setSpeed: Function,
-};
+interface Props extends IRootState {
+  setSpeed: typeof setSpeed,
+}
 
-type State = {
+interface State {
   dialogOpened: boolean,
 }
+
 class Component extends React.PureComponent<Props, State> {
   constructor(props) {
     super(props);
-    this.step = 5;
-    this.min = 5;
-    this.max = 30;
-
-    this.marks = [...Array((Math.floor(this.max - this.min) / this.step) + 1)].reduce((obj, el, index) => ({
-      ...obj,
-      [this.min + (index * this.step)]: String(this.min + (index * this.step)),
-    }), { });
-
     this.state = {
       dialogOpened: false,
     };
   }
 
+  step: number = 5;
+  min: number = 5;
+  max: number = 30;
+
+  marks: { [x: number]: string } = [...Array((Math.floor(this.max - this.min) / this.step) + 1)].reduce((obj, el, index) => ({
+    ...obj,
+    [this.min + (index * this.step)]: String(this.min + (index * this.step)),
+  }), { });
+
   toggleDialog = () => this.setState({ dialogOpened: !this.state.dialogOpened });
 
   render() {

src/components/panels/EditorDialog.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { MODES } from '$constants/modes';
+import * as React from 'react';
+import { IModes, MODES } from '$constants/modes';
 
 import { RouterDialog } from '$components/dialogs/RouterDialog';
 import { StickersDialog } from '$components/dialogs/StickersDialog';
@@ -28,14 +28,13 @@ import {
 } from '$redux/user/actions';
 import { ProviderDialog } from '$components/dialogs/ProviderDialog';
 import { ShotPrefetchDialog } from '$components/dialogs/ShotPrefetchDialog';
+import { IRootState } from "$redux/user/reducer";
 
-type Props = {
-  mode: String,
-  activeSticker: String,
-  width: Number,
+interface Props extends IRootState {
+  width: number,
 }
 
-const DIALOG_CONTENTS = {
+const DIALOG_CONTENTS: { [x: string]: any } = {
   [MODES.ROUTER]: RouterDialog,
   [MODES.STICKERS_SELECT]: StickersDialog,
   [MODES.TRASH]: TrashDialog,
@@ -46,14 +45,11 @@ const DIALOG_CONTENTS = {
   [MODES.SHOT_PREFETCH]: ShotPrefetchDialog,
 };
 
-export const Component = (props: Props) => {
-  const { mode } = props;
-
-  return (
-    (mode && DIALOG_CONTENTS[mode] && React.createElement(DIALOG_CONTENTS[mode], { ...props }))
-      || <div>null</div>
-  );
-};
+export const Component = (props: Props) => (
+  props.mode && DIALOG_CONTENTS[props.mode]
+    ? React.createElement(DIALOG_CONTENTS[props.mode], { ...props })
+    : null
+);
 
 const mapStateToProps = ({ user }) => ({ ...user });
 

src/components/panels/EditorPanel.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { MODES } from '$constants/modes';
 import classnames from 'classnames';
 
@@ -7,15 +7,13 @@ import { EditorDialog } from '$components/panels/EditorDialog';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { setMode, startEditing, stopEditing, setLogo, takeAShot, keyPressed } from '$redux/user/actions';
+import { IRootState } from "$redux/user/reducer";
 
-type Props = {
-  editing: false,
-  mode: String,
-  changed: Boolean,
-  setMode: Function,
-  startEditing: Function,
-  stopEditing: Function,
-  keyPressed: Function,
+interface Props extends IRootState {
+  setMode: typeof setMode,
+  startEditing: typeof startEditing,
+  stopEditing: typeof stopEditing,
+  keyPressed: EventListenerOrEventListenerObject,
 }
 
 class Component extends React.PureComponent<Props, void> {
@@ -27,9 +25,11 @@ class Component extends React.PureComponent<Props, void> {
 
     if (!this.panel || !obj) return;
 
-    obj.style.width = width;
+    obj.style.width = String(width);
   }
 
+  panel: HTMLElement = null;
+
   componentWillUnmount() {
     window.removeEventListener('keydown', this.props.keyPressed);
   }

src/components/panels/Icon.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
-import sprite from '$sprites/icon.svg';
+import * as React from 'react';
 
-export const Icon = ({ icon, size = 32 }) => (
+export const Icon = ({ icon, size = 32 }: { icon: string, size?: number }) => (
   <svg width={size} height={size} viewBox="0 0 32 32">
     <defs>
       <mask id={`icon-mask-${icon}`}>
-        <use xlinkHref={`${sprite}#${icon}`} x={0} y={0} />
+        <use xlinkHref={`${require('$sprites/icon.svg')}#${icon}`} x={0} y={0} />
       </mask>
     </defs>
     <rect x="0" y="0" width="32" height="32" stroke="none" mask={`url(#icon-mask-${icon})`} />

src/components/panels/RendererPanel.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 import { Icon } from '$components/panels/Icon';
 
 type Props = {
-  onCancel: Function,
-  onSubmit: Function,
+  onCancel: () => void,
+  onSubmit: () => void,
 };
 
 export const RendererPanel = ({ onCancel, onSubmit }: Props) => (
@@ -32,11 +32,3 @@ export const RendererPanel = ({ onCancel, onSubmit }: Props) => (
     </div>
   </div>
 );
-
-/*
-  <div className="control-bar control-bar-padded">
-    <button>
-      <Icon icon="icon-logo-3" />
-    </button>
-  </div>
- */

src/components/panels/TopLeftPanel.tsx

@@ -1,5 +1,5 @@
 // flow
-import React from 'react';
+import * as React from 'react';
 import { UserLocation } from '$components/UserLocation';
 import { DistanceBar } from '$components/panels/DistanceBar';
 

src/components/panels/TopRightPanel.tsx

@@ -1,21 +1,18 @@
 // flow
-import React from 'react';
+import * as React from 'react';
 import { Icon } from '$components/panels/Icon';
 import { PROVIDERS } from '$constants/providers';
 import { LOGOS } from '$constants/logos';
 import { setMode } from '$redux/user/actions';
 import { connect } from 'react-redux';
 import { MODES } from '$constants/modes';
+import { IRootState } from "$redux/user/reducer";
 
-type Props = {
-  provider: string,
-  logo: string,
-  markers_shown: boolean,
-  editing: boolean,
-  startProviderMode: Function,
-  startLogoMode: Function,
-  clearMode: Function,
-};
+interface Props extends IRootState {
+  startProviderMode: () => void,
+  startLogoMode: () => void,
+  clearMode: () => void,
+}
 
 const Component = ({
   provider, logo, startProviderMode, startLogoMode, clearMode, editing, markers_shown,

src/components/panels/UserPanel.tsx

@@ -1,33 +1,33 @@
-import React from 'react';
+import * as React from 'react';
 
 import { GuestButton } from '$components/user/GuestButton';
-import { DEFAULT_USER, ROLES } from '$constants/auth';
+import { DEFAULT_USER, IUser, ROLES } from '$constants/auth';
 import { UserButton } from '$components/user/UserButton';
 import { UserMenu } from '$components/user/UserMenu';
 import { setUser, userLogout, takeAShot, setDialog, gotVkUser, setDialogActive, openMapDialog } from '$redux/user/actions';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import type { UserType } from '$constants/types';
 import { Icon } from '$components/panels/Icon';
 
 import classnames from 'classnames';
 import { CLIENT } from '$config/frontend';
 import { DIALOGS } from '$constants/dialogs';
+import { IRootState } from "$redux/user/reducer";
 
-type Props = {
-  user: UserType,
-  dialog_active: Boolean,
-  dialog: String,
-
-  userLogout: Function,
-  setDialog: Function,
-  setDialogActive: Function,
-  gotVkUser: Function,
-  takeAShot: Function,
-  openMapDialog: Function,
+interface Props extends IRootState {
+  userLogout: typeof userLogout,
+  setDialog: typeof setDialog,
+  setDialogActive: typeof setDialogActive,
+  gotVkUser: typeof gotVkUser,
+  takeAShot: typeof takeAShot,
+  openMapDialog: typeof openMapDialog,
 };
 
-export class Component extends React.PureComponent<Props, void> {
+interface State {
+  menuOpened: boolean
+}
+
+export class Component extends React.PureComponent<Props, State> {
   state = {
     menuOpened: false,
   };
@@ -74,8 +74,8 @@ export class Component extends React.PureComponent<Props, void> {
   };
 
   openOauthFrame = () => {
-    const width = parseInt(window.innerWidth, 10);
-    const height = parseInt(window.innerHeight, 10);
+    const width = parseInt(String(window.innerWidth), 10);
+    const height = parseInt(String(window.innerHeight), 10);
     const top = (height - 370) / 2;
     const left = (width - 700) / 2;