moved components to TypeScript

src/components/Cursor.tsx

@@ -1,16 +1,16 @@
-import React from 'react';
+import * as React from 'react';
 import { Icon } from '$components/panels/Icon';
-import { MODES } from '$constants/modes';
-import { STICKERS } from '$constants/stickers';
+import { IModes, MODES } from '$constants/modes';
+import { IStickerPack, STICKERS } from '$constants/stickers';
 import { StickerIcon } from '$components/StickerIcon';
 
-type Props = {
-  mode: String,
-  sticker: String,
-  set: String,
+interface Props {
+  mode: keyof IModes,
+  sticker: string,
+  set: keyof IStickerPack,
 }
 
-export class Cursor extends React.PureComponent<Props, void> {
+export class Cursor extends React.PureComponent<Props, {}> {
   componentDidMount() {
     window.addEventListener('mousemove', this.moveCursor);
   }
@@ -23,6 +23,8 @@ export class Cursor extends React.PureComponent<Props, void> {
     this.cursor.style.transform = `translate3d(${clientX}px, ${clientY}px, 0)`;
   };
 
+  cursor: HTMLElement = null;
+
   render() {
     const { mode, set, sticker } = this.props;
     const activeSticker = (sticker && set && STICKERS[set] && STICKERS[set].layers[sticker]);

src/components/Fills.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 export const Fills = () => (
   <svg>
@@ -24,7 +24,7 @@ export const Fills = () => (
         orient="auto"
       >
         <path d="M0,5a5,5 0 1,0 10,0a5,5 0 1,0 -10,0" fill="#ff3344" />
-        <path d="M2.5 2L7.5 5L2.5 8z" fill="#ffffff" fillRule="even-odd" />
+        <path d="M2.5 2L7.5 5L2.5 8z" fill="#ffffff" fillRule="evenodd" />
       </marker>
 
       <marker
@@ -36,7 +36,7 @@ export const Fills = () => (
         markerHeight="5"
         orient="auto"
       >
-        <path d="m 2.625,3.375 h 7.5 L 10.28125,1.609375 13.5,4.25 10.484375,6.921875 10.171875,5.15625 2.625,5.125 Z" fill="#ff3344" fillRule="even-odd" />
+        <path d="m 2.625,3.375 h 7.5 L 10.28125,1.609375 13.5,4.25 10.484375,6.921875 10.171875,5.15625 2.625,5.125 Z" fill="#ff3344" fillRule="evenodd" />
       </marker>
     </defs>
     <image xlinkHref={require('$sprites/stickers/stickers-base.svg')} width={0} height={0} />

src/components/Scroll.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
+import * as React from 'react';
 import { Scrollbars } from 'tt-react-custom-scrollbars';
 
 export const Scroll = props => (
-  // renderTrackVertical={props => <div {...props} className="track-vertical"/>}
   <Scrollbars
     renderTrackHorizontal={prop => <div {...prop} className="track-horizontal" />}
     renderTrackVertical={prop => <div {...prop} className="track-vertical" />}

src/components/StickerDesc.tsx

@@ -1,11 +1,16 @@
-import React from 'react';
+import * as React from 'react';
 import classnames from 'classnames';
 
-type State = {
-  text: String,
+interface Props {
+  value: string;
+  onChange: EventHandlerNonNull;
 }
 
-export class StickerDesc extends React.PureComponent<void, State> {
+type State = {
+  text: String;
+}
+
+export class StickerDesc extends React.PureComponent<Props, State> {
   state = {
     text: this.props.value,
   };

src/components/StickerIcon.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
-import { STICKERS } from '$constants/stickers';
+import * as React from 'react';
+import { ISticker, STICKERS } from '$constants/stickers';
 
 type Props = {
-  set: String,
-  sticker: String,
+  set: string,
+  sticker: string,
 };
 
 export const StickerIcon = ({ set, sticker }: Props) => (

src/components/Switch.tsx

@@ -1,10 +1,10 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import classnames from 'classnames';
 
 type Props = {
-  active: Boolean,
-  onPress: Function,
+  active: boolean,
+  onPress?: () => void,
 }
 export const Switch = ({ active, onPress = () => {} }: Props) => (
   <div

src/components/UserLocation.tsx

@@ -1,22 +1,29 @@
-import React from 'react';
+import * as React from 'react';
 import { marker } from 'leaflet';
 import { DomMarker } from '$utils/DomMarker';
 import { Icon } from '$components/panels/Icon';
 import { editor } from '$modules/Editor';
 
-export class UserLocation extends React.Component {
+interface Props {
+
+}
+
+export class UserLocation extends React.Component<Props, {}> {
   constructor(props) {
     super(props);
 
     const element = document.createElement('div');
-
     this.icon = new DomMarker({ element, className: 'location-marker' });
 
-    this.mark = null;
     this.map = editor.map.map;
     this.location = [];
   }
 
+  icon;
+  mark = null;
+  map;
+  location;
+
   componentDidMount() {
     this.getUserLocation(this.updateLocationMark);
   }

src/components/dialogs/AppInfoDialog.tsx

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { Scroll } from '$components/Scroll';
 import { APP_INFO } from '$constants/app_info';
 

src/components/dialogs/CancelDialog.tsx

@@ -1,12 +1,13 @@
-import React from 'react';
+import * as React from 'react';
 
 import { MODES } from '$constants/modes';
 import { Icon } from '$components/panels/Icon';
+import { setMode, stopEditing } from "$redux/user/actions";
 
 type Props = {
-  stopEditing: Function,
-  setMode: Function,
-  width: Number,
+  stopEditing: typeof stopEditing,
+  setMode: typeof setMode,
+  width: number,
 };
 
 export class CancelDialog extends React.Component<Props, void> {

src/components/dialogs/LogoDialog.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
+import * as React from 'react';
 import { LOGOS } from '$constants/logos';
 import { Icon } from '$components/panels/Icon';
 import classnames from 'classnames';
+import { setLogo as setLogoAction } from "$redux/user/actions";
+import { IRootState } from "$redux/user/reducer";
 
-type Props = {
-  logo: String,
-  setLogo: Function,
+interface Props extends IRootState {
+  setLogo: typeof setLogoAction,
 }
 
 export const LogoDialog = ({ logo, setLogo }: Props) => (

src/components/dialogs/MapListDialog.tsx

@@ -1,5 +1,4 @@
-// @flow
-import React from 'react';
+import * as React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { RouteRow } from '$components/maps/RouteRow';
@@ -16,34 +15,20 @@ import { Range } from 'rc-slider';
 import { TABS } from '$constants/dialogs';
 import { Icon } from '$components/panels/Icon';
 import { pushPath } from '$utils/history';
+import { IRootState } from '$redux/user/reducer';
 
-type Props = {
-  ready: Boolean,
-  routes: {
-    limit: Number,
-    loading: Boolean, // <-- maybe delete this
-    list: Array<Object>,
-    filter: {
-      title: String,
-      author: String,
-      distance: Array<Number>,
-      tab: Array<string>,
-      min: number,
-      max: number,
-    },
-  },
+interface Props extends IRootState {
   marks: { [x: number]: string },
-  editing: Boolean,
   routes_sorted: Array<string>,
 
-  searchSetDistance: Function,
-  searchSetTitle: Function,
-  searchSetTab: Function,
-  setDialogActive: Function,
-};
+  searchSetDistance: typeof searchSetDistance,
+  searchSetTitle: typeof searchSetTitle,
+  searchSetTab: typeof searchSetTab,
+  setDialogActive: typeof setDialogActive,
+}
 
-type State = {
-  editing_item: ?string,
+interface State {
+  editing_item: string,
 }
 
 class Component extends React.Component<Props, State> {
@@ -54,13 +39,12 @@ class Component extends React.Component<Props, State> {
   startEditing = editing_item => this.setState({ editing_item });
   stopEditing = () => this.setState({ editing_item: null });
 
-  setTitle = ({ target: { value } }) => {
+  setTitle = ({ target: { value } }: { target: { value: string }}): void => {
     this.props.searchSetTitle(value);
   };
 
-  openRoute = _id => {
+  openRoute = (_id: string): void => {
     pushPath(`/${_id}/${this.props.editing ? 'edit' : ''}`);
-    // this.props.setDialogActive(false);
   };
 
   render() {
@@ -150,9 +134,9 @@ class Component extends React.Component<Props, State> {
                 <RouteRow
                   editing={editing}
                   {...route}
-                  openRoute={this.openRoute}
                   tab={tab}
                   is_editing={(editing_item === route._id)}
+                  openRoute={this.openRoute}
                   startEditing={this.startEditing}
                   stopEditing={this.stopEditing}
                   key={route._id}

src/components/dialogs/ProviderDialog.tsx

@@ -1,12 +1,13 @@
-import React from 'react';
+import * as React from 'react';
 import { PROVIDERS, replaceProviderUrl } from '$constants/providers';
 import { Icon } from '$components/panels/Icon';
 import classnames from 'classnames';
+import { changeProvider as changeProviderAction } from "$redux/user/actions";
+import { IRootState } from "$redux/user/reducer";
 
-type Props = {
-  changeProvider: Function,
-  provider: String,
-};
+interface Props extends IRootState {
+  changeProvider: typeof changeProviderAction,
+}
 
 export const ProviderDialog = ({ provider, changeProvider }: Props) => (
   <div className="control-dialog top right control-dialog-provider">

src/components/dialogs/RouterDialog.tsx

@@ -1,14 +1,19 @@
-import React from 'react';
+import * as React from 'react';
 import { Icon } from '$components/panels/Icon';
+import {
+  routerCancel as routerCancelAction,
+  routerSubmit as routerSubmitAction,
+} from "$redux/user/actions";
 
 type Props = {
-  routerCancel: Function,
-  routerSubmit: Function,
-  routerPoints: Number,
-  width: Number,
+  routerPoints: number,
+  width: number,
+
+  routerCancel: typeof routerCancelAction,
+  routerSubmit: typeof routerSubmitAction,
 }
 
-const noPoints = ({ routerCancel }: Props) => (
+const noPoints = ({ routerCancel }: { routerCancel: typeof routerCancelAction }) => (
   <React.Fragment>
     <div className="helper router-helper">
       <div className="helper__text">
@@ -29,7 +34,7 @@ const noPoints = ({ routerCancel }: Props) => (
   </React.Fragment>
 );
 
-const firstPoint = ({ routerCancel }: Props) => (
+const firstPoint = ({ routerCancel }: { routerCancel: typeof routerCancelAction }) => (
   <React.Fragment>
     <div className="helper router-helper">
       <div className="helper__text">
@@ -48,7 +53,12 @@ const firstPoint = ({ routerCancel }: Props) => (
   </React.Fragment>
 );
 
-const draggablePoints = ({ routerCancel, routerSubmit }: Props) => (
+const draggablePoints = ({
+  routerCancel, routerSubmit
+}: {
+  routerCancel: typeof routerCancelAction,
+  routerSubmit: typeof routerSubmitAction,
+}) => (
   <React.Fragment>
     <div className="helper">
       <div className="helper__text success">

src/components/dialogs/SaveDialog.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { copyToClipboard, getUrlData } from '$utils/history';
 import { toTranslit } from '$utils/format';
 import { TIPS } from '$constants/tips';
@@ -7,27 +7,20 @@ import { Icon } from '$components/panels/Icon';
 import { Switch } from '$components/Switch';
 
 import classnames from 'classnames';
+import { IRootState } from "$redux/user/reducer";
+import { sendSaveRequest, setMode } from "$redux/user/actions";
 
-type Props = {
-  address: String, // initial?
-  title: String, // initial?
-  is_public: Boolean,
+interface Props extends IRootState {
+  width: number,
+  setMode: typeof setMode,
+  sendSaveRequest: typeof sendSaveRequest,
+}
 
-  save_error: String,
-  save_finished: Boolean,
-  save_overwriting: Boolean,
-
-  width: Number,
-
-  setMode: Function,
-  sendSaveRequest: Function,
-};
-
-type State = {
-  address: String,
-  title: String,
-  is_public: Boolean,
-};
+interface State {
+  address: string,
+  title: string,
+  is_public: boolean,
+}
 
 export class SaveDialog extends React.Component<Props, State> {
   constructor(props) {

src/components/dialogs/ShotPrefetchDialog.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
-type Props = {
+interface Props {
   renderer: {
-    info: String,
-    progress: Number,
+    info: string,
+    progress: number,
   }
 }
 

src/components/dialogs/StickersDialog.tsx

@@ -1,12 +1,13 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 
 import { STICKERS } from '$constants/stickers';
+import { setActiveSticker as setActiveStickerAction } from "$redux/user/actions";
 
-type Props = {
-  setActiveSticker: Function,
-  width: Number,
-};
+interface Props {
+  setActiveSticker: typeof setActiveStickerAction,
+  width: number,
+}
 
 export const StickersDialog = ({ setActiveSticker, width }: Props) => (
   <div className="control-dialog control-dialog-big" style={{ width }}>

src/components/dialogs/TrashDialog.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
+import * as React from 'react';
 import { Icon } from '$components/panels/Icon';
 
 type Props = {
-  clearPoly: Function,
-  clearStickers: Function,
-  clearAll: Function,
-  clearCancel: Function,
+  clearPoly: () => void,
+  clearStickers: () => void,
+  clearAll: () => void,
+  clearCancel: () => void,
 
-  width: Number,
+  width: number,
 }
 
 export const TrashDialog = ({

src/components/logo/LogoPreview.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 import { LOGOS } from '$constants/logos';
 import { connect } from 'react-redux';
+import { IRootState } from "$redux/user/reducer";
 
-type Props = {
-  logo: string
-};
+interface Props extends IRootState {}
 
 const Component = ({ logo }: Props) => (
   <div
@@ -17,9 +16,6 @@ const Component = ({ logo }: Props) => (
   />
 );
 
-function mapStateToProps(state) {
-  const { user: { logo } } = state;
-  return { logo };
-}
+const mapStateToProps = ({ user: { logo } }) => ({ logo });
 
 export const LogoPreview = connect(mapStateToProps)(Component);

src/components/maps/RouteRow.jsx

@@ -1,67 +0,0 @@
-// @flow
-import React from 'react';
-import { Icon } from '$components/panels/Icon';
-import classnames from 'classnames';
-import { RouteRowEditor } from '$components/maps/RouteRowEditor';
-
-type Props = {
-  _id: string,
-  title: string,
-  distance: number,
-  tab: string,
-  is_editing: boolean,
-  is_public: boolean,
-
-
-  openRoute: (_id: string) => {},
-  startEditing: (_id: string) => {},
-  stopEditing: () => {},
-};
-
-export const RouteRow = ({
-  title, distance, _id, openRoute, tab, is_editing, startEditing, stopEditing, is_public
-}: Props) => (
-  <div className={classnames('route-row-wrapper', { is_editing })}>
-    {
-      tab === 'mine' &&
-      <div className="route-row-edit" onClick={() => startEditing(_id)}>
-        <Icon icon="icon-edit-1" />
-      </div>
-    }
-    {
-      !is_editing
-      ?
-        <div
-          className="route-row"
-        >
-          <div onClick={() => openRoute(_id)}>
-            <div className="route-title">
-              <span>{(title || _id)}</span>
-            </div>
-            <div className="route-description">
-              <span>
-                <Icon icon="icon-link-1" />
-                {_id}
-              </span>
-              <span>
-                <Icon icon="icon-cycle-1" />
-                {(distance && `${distance} km`) || '0 km'}
-              </span>
-            </div>
-          </div>
-          <div className="route-row-panel">
-            <div className="">
-              <Icon icon="icon-trash-4" size={24} />
-              Удалить
-            </div>
-            <div className="flex_1 justify-end" onClick={() => startEditing(_id)}>
-              <Icon icon="icon-edit-1" size={24} />
-              Правка
-            </div>
-          </div>
-        </div>
-      : <RouteRowEditor title={title} is_public={is_public} distance={distance} _id={_id} />
-    }
-
-  </div>
-);

src/components/maps/RouteRow.tsx

@@ -0,0 +1,59 @@
+// @flow
+import * as React from 'react';
+import { Icon } from '$components/panels/Icon';
+import classnames from 'classnames';
+
+interface Props {
+  _id: string,
+  tab: string,
+  is_editing: boolean,
+  title: string,
+  distance: number,
+  is_public: boolean,
+
+  openRoute: (_id: string) => void,
+  startEditing: (_id: string) => void,
+  stopEditing: () => void,
+  key: string,
+}
+
+export const RouteRow = ({ title, distance, _id, openRoute, tab, is_editing, startEditing }: any) => (
+  <div className={classnames('route-row-wrapper', { is_editing })}>
+    {
+      tab === 'mine' &&
+      <div className="route-row-edit" onClick={() => startEditing(_id)}>
+        <Icon icon="icon-edit-1" />
+      </div>
+    }
+      <div
+        className="route-row"
+      >
+        <div onClick={() => openRoute(_id)}>
+          <div className="route-title">
+            <span>{(title || _id)}</span>
+          </div>
+          <div className="route-description">
+            <span>
+              <Icon icon="icon-link-1" />
+              {_id}
+            </span>
+            <span>
+              <Icon icon="icon-cycle-1" />
+              {(distance && `${distance} km`) || '0 km'}
+            </span>
+          </div>
+        </div>
+        <div className="route-row-panel">
+          <div className="">
+            <Icon icon="icon-trash-4" size={24} />
+            Удалить
+          </div>
+          <div className="flex_1 justify-end" onClick={() => startEditing(_id)}>
+            <Icon icon="icon-edit-1" size={24} />
+            Правка
+          </div>
+        </div>
+      </div>
+
+  </div>
+);

src/components/maps/RouteRowEditor.tsx

@@ -1,21 +1,21 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { Icon } from '$components/panels/Icon';
 import { Switch } from '$components/Switch';
 
-type Props = {
+interface Props {
+  title: string;
+  is_editing: boolean;
+  distance: number;
+  _id: string;
+}
+
+interface State {
   title: string,
   is_public: boolean,
-  distance: number,
-  _id: string,
-};
+}
 
-type State = {
-  title: string,
-  is_public: boolean,
-};
-
-export class RouteRowEditor extends React.PureComponent<Props, State> {
+export class RouteRowEditor extends React.Component<Props, State> {
   constructor(props) {
     super(props);
 

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;
 

src/components/renderer/Renderer.tsx

@@ -1,23 +1,23 @@
-import React from 'react';
+import * as React from 'react';
 
 import { hideRenderer, cropAShot } from '$redux/user/actions';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import Croppr from 'croppr';
 import 'croppr/dist/croppr.css';
-import { Icon } from '$components/panels/Icon';
 import { LOGOS } from '$constants/logos';
 import { RendererPanel } from '$components/panels/RendererPanel';
+import { IRootState } from "$redux/user/reducer";
 
 type Props = {
-  data: String,
-  logo: String,
-  hideRenderer: Function,
-  cropAShot: Function,
+  data: IRootState['renderer']['data'],
+  logo: IRootState['logo'],
+  hideRenderer: typeof hideRenderer,
+  cropAShot: typeof cropAShot,
 };
 
 type State = {
-  opacity: Number,
+  opacity: number,
 };
 
 class Component extends React.Component<Props, State> {
@@ -52,7 +52,10 @@ class Component extends React.Component<Props, State> {
     regionEl.append(this.logo);
   };
 
-  croppr;
+  croppr: Croppr;
+  logo: HTMLDivElement;
+  image: HTMLImageElement;
+  logoImg: HTMLImageElement;
 
   getImage = () => this.props.cropAShot(this.croppr.getValue());
 

src/components/user/GuestButton.jsx

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { Icon } from '$components/panels/Icon';
 
 type Props = {

src/components/user/UserButton.jsx

@@ -1,10 +1,10 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { UserPicture } from '$components/user/UserPicture';
-import type { UserType } from '$constants/types';
+import { IUser } from '$constants/auth';
 
 type Props = {
-  user: UserType,
+  user: IUser,
   setMenuOpened: Function,
 };
 

src/components/user/UserMenu.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { APP_INFO } from '$constants/app_info';
 
 type Props = {

src/components/user/UserPicture.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 export const UserPicture = ({ photo }) => (
   <div