fixed imports

src/_modules/Sticker.tsx

@@ -1,9 +1,9 @@
 import { Map, Marker, marker } from 'leaflet';
-import * as React from 'react';
+import React from 'react';
 import { DomMarker } from '$utils/DomMarker';
 
 import { STICKERS } from '$constants/stickers';
-import * as ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom';
 import { StickerDesc } from '$components/StickerDesc';
 import classnames from 'classnames';
 import { getLabelDirection } from '$utils/geom';

src/components/Cursor.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { Icon } from '$components/panels/Icon';
 import { MODES } from '$constants/modes';
 import { IStickerPack, STICKERS } from '$constants/stickers';

src/components/Fills.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 export const Fills = () => (
   <svg>

src/components/Scroll.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { Scrollbars } from 'tt-react-custom-scrollbars';
 
 export const Scroll = props => (

src/components/StickerDesc.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import classnames from 'classnames';
 
 interface Props {

src/components/StickerIcon.tsx

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

src/components/Switch.tsx

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import React from 'react';
 import classnames from 'classnames';
 
 type Props = {

src/components/UserLocation.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 // import { marker } from 'leaflet';
 // import { DomMarker } from '$utils/DomMarker';
 // import { Icon } from '$components/panels/Icon';

src/components/dialogs/AppInfoDialog.tsx

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

src/components/dialogs/CancelDialog.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 import { MODES } from '$constants/modes';
 import { Icon } from '$components/panels/Icon';

src/components/dialogs/LogoDialog.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { LOGOS } from '$constants/logos';
 import { Icon } from '$components/panels/Icon';
 import classnames from 'classnames';

src/components/dialogs/MapListDialog.tsx

@@ -1,5 +1,4 @@
-import * as React from 'react';
+import React from 'react';
-import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { RouteRowWrapper } from '$components/maps/RouteRowWrapper';
 import { Scroll } from '$components/Scroll';
@@ -10,44 +9,46 @@ import {
   setDialogActive,
   mapsLoadMore,
   dropRoute,
-  modifyRoute, toggleRouteStarred,
+  modifyRoute,
+  toggleRouteStarred,
 } from '$redux/user/actions';
 import { isMobile } from '$utils/window';
 import classnames from 'classnames';
 
-import * as Range from 'rc-slider/lib/Range';
+import Range from 'rc-slider/lib/Range';
 import { TABS, TABS_TITLES } from '$constants/dialogs';
 import { Icon } from '$components/panels/Icon';
 import { pushPath } from '$utils/history';
 import { IRootState, IRouteListItem } from '$redux/user';
-import { ROLES } from "$constants/auth";
+import { ROLES } from '$constants/auth';
+import { IState } from '$redux/store';
 
 export interface IMapListDialogProps extends IRootState {
-  marks: { [x: number]: string },
+  marks: { [x: number]: string };
-  routes_sorted: Array<IRouteListItem>,
+  routes_sorted: Array<IRouteListItem>;
-  routes: IRootState['routes'],
+  routes: IRootState['routes'];
-  ready: IRootState['ready'],
+  ready: IRootState['ready'];
-  role: IRootState['user']['role'],
+  role: IRootState['user']['role'];
 
-  mapsLoadMore: typeof mapsLoadMore,
+  mapsLoadMore: typeof mapsLoadMore;
-  searchSetDistance: typeof searchSetDistance,
+  searchSetDistance: typeof searchSetDistance;
-  searchSetTitle: typeof searchSetTitle,
+  searchSetTitle: typeof searchSetTitle;
-  searchSetTab: typeof searchSetTab,
+  searchSetTab: typeof searchSetTab;
-  setDialogActive: typeof setDialogActive,
+  setDialogActive: typeof setDialogActive;
-  dropRoute: typeof dropRoute,
+  dropRoute: typeof dropRoute;
-  modifyRoute: typeof modifyRoute,
+  modifyRoute: typeof modifyRoute;
-  toggleRouteStarred: typeof toggleRouteStarred,
+  toggleRouteStarred: typeof toggleRouteStarred;
 }
 
 export interface IMapListDialogState {
-  menu_target: IRouteListItem['address'],
+  menu_target: IRouteListItem['address'];
-  editor_target: IRouteListItem['address'],
+  editor_target: IRouteListItem['address'];
 
-  is_editing: boolean,
+  is_editing: boolean;
-  is_dropping: boolean,
+  is_dropping: boolean;
 }
 
-class Component extends React.Component<IMapListDialogProps, IMapListDialogState> {
+class MapListDialogUnconnected extends React.Component<IMapListDialogProps, IMapListDialogState> {
   state = {
     menu_target: null,
     editor_target: null,
@@ -56,33 +57,37 @@ class Component extends React.Component<IMapListDialogProps, IMapListDialogState
     is_dropping: false,
   };
 
-  startEditing = (editor_target: IRouteListItem['address']): void => this.setState({
+  startEditing = (editor_target: IRouteListItem['address']): void =>
-    editor_target,
+    this.setState({
-    menu_target: null,
+      editor_target,
-    is_editing: true,
+      menu_target: null,
-    is_dropping: false,
+      is_editing: true,
-  });
+      is_dropping: false,
+    });
 
-  showMenu = (menu_target: IRouteListItem['address']): void => this.setState({
+  showMenu = (menu_target: IRouteListItem['address']): void =>
-    menu_target,
+    this.setState({
-  });
+      menu_target,
+    });
 
-  hideMenu = (): void => this.setState({
+  hideMenu = (): void =>
-    menu_target: null,
+    this.setState({
-  });
+      menu_target: null,
+    });
 
-  showDropCard = (editor_target: IRouteListItem['address']): void => this.setState({
+  showDropCard = (editor_target: IRouteListItem['address']): void =>
-    editor_target,
+    this.setState({
-    menu_target: null,
+      editor_target,
-    is_editing: false,
+      menu_target: null,
-    is_dropping: true,
+      is_editing: false,
-  });
+      is_dropping: true,
+    });
 
   stopEditing = (): void => {
     this.setState({ editor_target: null });
   };
 
-  setTitle = ({ target: { value } }: { target: { value: string }}): void => {
+  setTitle = ({ target: { value } }: { target: { value: string } }): void => {
     this.props.searchSetTitle(value);
   };
 
@@ -97,8 +102,12 @@ class Component extends React.Component<IMapListDialogProps, IMapListDialogState
     // pushPath(`/${_id}/${this.props.editing ? 'edit' : ''}`);
   };
 
-  onScroll = (e: { target: { scrollHeight: number, scrollTop: number, clientHeight: number }}): void => {
+  onScroll = (e: {
-    const { target: { scrollHeight, scrollTop, clientHeight }} = e;
+    target: { scrollHeight: number; scrollTop: number; clientHeight: number };
+  }): void => {
+    const {
+      target: { scrollHeight, scrollTop, clientHeight },
+    } = e;
     const delta = scrollHeight - scrollTop - clientHeight;
 
     if (
@@ -114,7 +123,15 @@ class Component extends React.Component<IMapListDialogProps, IMapListDialogState
     this.props.dropRoute(address);
   };
 
-  modifyRoute = ({ address, title, is_public }: { address: string, title: string, is_public: boolean }): void => {
+  modifyRoute = ({
+    address,
+    title,
+    is_public,
+  }: {
+    address: string;
+    title: string;
+    is_public: boolean;
+  }): void => {
     this.props.modifyRoute(address, { title, is_public });
     this.stopEditing();
   };
@@ -128,13 +145,7 @@ class Component extends React.Component<IMapListDialogProps, IMapListDialogState
       routes: {
         list,
         loading,
-        filter: {
+        filter: { min, max, title, distance, tab },
-          min,
-          max,
-          title,
-          distance,
-          tab,
-        }
       },
       marks,
     }: IMapListDialogProps = this.props;
@@ -143,34 +154,34 @@ class Component extends React.Component<IMapListDialogProps, IMapListDialogState
 
     return (
       <div className="dialog-content">
-        { list.length === 0 && loading &&
+        {list.length === 0 && loading && (
           <div className="dialog-maplist-loader">
             <div className="dialog-maplist-icon spin">
               <Icon icon="icon-sync-1" />
             </div>
           </div>
-        }
+        )}
-        { ready && !loading && list.length === 0 &&
+        {ready && !loading && list.length === 0 && (
           <div className="dialog-maplist-loader">
             <div className="dialog-maplist-icon">
               <Icon icon="icon-sad-1" />
             </div>
-                ТУТ ПУСТО <br />
+            ТУТ ПУСТО <br />И ОДИНОКО
-                И ОДИНОКО
           </div>
-        }
+        )}
         <div className="dialog-tabs">
-          {
+          {Object.values(TABS).map(
-            Object.values(TABS).map(item => (role === ROLES.admin || item !== TABS.PENDING) && (
+            item =>
-              <div
+              (role === ROLES.admin || item !== TABS.PENDING) && (
-                className={classnames('dialog-tab', { active: tab === item })}
+                <div
-                onClick={() => this.props.searchSetTab(item)}
+                  className={classnames('dialog-tab', { active: tab === item })}
-                key={item}
+                  onClick={() => this.props.searchSetTab(item)}
-              >
+                  key={item}
-                {TABS_TITLES[item]}
+                >
-              </div>
+                  {TABS_TITLES[item]}
-            ))
+                </div>
-          }
+              )
+          )}
         </div>
         <div className="dialog-head">
           <div>
@@ -181,57 +192,50 @@ class Component extends React.Component<IMapListDialogProps, IMapListDialogState
               onChange={this.setTitle}
             />
             <br />
-            {
+            {ready && Object.keys(marks).length > 2 ? (
-              ready && Object.keys(marks).length > 2
+              <Range
-                ?
+                min={min}
-                  <Range
+                max={max}
-                    min={min}
+                marks={marks}
-                    max={max}
+                step={25}
-                    marks={marks}
+                onChange={this.props.searchSetDistance}
-                    step={25}
+                defaultValue={[0, 10000]}
-                    onChange={this.props.searchSetDistance}
+                value={distance}
-                    defaultValue={[0, 10000]}
+                pushable={25}
-                    value={distance}
+                disabled={min >= max}
-                    pushable={25}
+              />
-                    disabled={min >= max}
+            ) : (
-                  />
+              <div className="range-placeholder" />
-                : <div className="range-placeholder" />
+            )}
-            }
-
           </div>
         </div>
 
-        <Scroll
+        <Scroll className="dialog-shader" onScroll={this.onScroll}>
-          className="dialog-shader"
-          onScroll={this.onScroll}
-        >
           <div className="dialog-maplist">
-            {
+            {list.map(route => (
-              list.map(route => (
+              <RouteRowWrapper
-                <RouteRowWrapper
+                title={route.title}
-                  title={route.title}
+                distance={route.distance}
-                  distance={route.distance}
+                address={route.address}
-                  address={route.address}
+                is_public={route.is_public}
-                  is_public={route.is_public}
+                is_published={route.is_published}
-                  is_published={route.is_published}
+                tab={tab}
-                  tab={tab}
+                is_editing_mode={is_dropping ? 'drop' : 'edit'}
-                  is_editing_mode={is_dropping ? 'drop' : 'edit'}
+                is_editing_target={editor_target === route.address}
-                  is_editing_target={editor_target === route.address}
+                is_menu_target={menu_target === route.address}
-                  is_menu_target={menu_target === route.address}
+                openRoute={this.openRoute}
-                  openRoute={this.openRoute}
+                startEditing={this.startEditing}
-                  startEditing={this.startEditing}
+                stopEditing={this.stopEditing}
-                  stopEditing={this.stopEditing}
+                showMenu={this.showMenu}
-                  showMenu={this.showMenu}
+                hideMenu={this.hideMenu}
-                  hideMenu={this.hideMenu}
+                showDropCard={this.showDropCard}
-                  showDropCard={this.showDropCard}
+                dropRoute={this.dropRoute}
-                  dropRoute={this.dropRoute}
+                modifyRoute={this.modifyRoute}
-                  modifyRoute={this.modifyRoute}
+                toggleStarred={this.toggleStarred}
-                  toggleStarred={this.toggleStarred}
+                key={route.address}
-                  key={route.address}
+                is_admin={role === ROLES.admin}
-                  is_admin={role === ROLES.admin}
+              />
-                />
+            ))}
-              ))
-            }
           </div>
         </Scroll>
 
@@ -241,28 +245,42 @@ class Component extends React.Component<IMapListDialogProps, IMapListDialogState
   }
 }
 
-const mapStateToProps = ({ user: { editing, routes, user: { role } } }: { user: IRootState }) => {
+const mapStateToProps = ({
+  user: {
+    editing,
+    routes,
+    user: { role },
+  },
+}: IState) => {
   if (routes.filter.max >= 9999) {
     return {
-      routes, editing, marks: {}, ready: false, role,
+      routes,
+      editing,
+      marks: {},
+      ready: false,
+      role,
     };
   }
 
-  return ({
+  return {
     role,
     routes,
     editing,
     ready: true,
-    marks: [...new Array(Math.floor((routes.filter.max - routes.filter.min) / 25) + 1)].reduce((obj, el, i) => ({
+    marks: [...new Array(Math.floor((routes.filter.max - routes.filter.min) / 25) + 1)].reduce(
-      ...obj,
+      (obj, el, i) => ({
-      [routes.filter.min + (i * 25)]:
+        ...obj,
-        ` ${routes.filter.min + (i * 25)}${(routes.filter.min + (i * 25) >= 200) ? '+' : ''}
+        [routes.filter.min + i * 25]: ` ${routes.filter.min + i * 25}${
+          routes.filter.min + i * 25 >= 200 ? '+' : ''
+        }
       `,
-    }), {}),
+      }),
-  });
+      {}
+    ),
+  };
 };
 
-const mapDispatchToProps = dispatch => bindActionCreators({
+const mapDispatchToProps = {
   searchSetDistance,
   searchSetTitle,
   searchSetTab,
@@ -271,6 +289,8 @@ const mapDispatchToProps = dispatch => bindActionCreators({
   dropRoute,
   modifyRoute,
   toggleRouteStarred,
-}, dispatch);
+};
 
-export const MapListDialog = connect(mapStateToProps, mapDispatchToProps)(Component);
+const MapListDialog = connect(mapStateToProps, mapDispatchToProps)(MapListDialogUnconnected);
+
+export { MapListDialog };

src/components/dialogs/ProviderDialog.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { PROVIDERS, replaceProviderUrl } from '$constants/providers';
 import { Icon } from '$components/panels/Icon';
 import classnames from 'classnames';

src/components/dialogs/RouterDialog.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { Icon } from '$components/panels/Icon';
 import {
   routerCancel as routerCancelAction,

src/components/dialogs/SaveDialog.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { copyToClipboard, getUrlData } from '$utils/history';
 import { toTranslit, parseDesc } from '$utils/format';
 import { TIPS } from '$constants/tips';

src/components/dialogs/ShotPrefetchDialog.tsx

@@ -1,13 +1,14 @@
-import * as React from 'react';
+import React from 'react';
+import { connect } from 'react-redux';
+import { selectUserRenderer } from '$redux/user/selectors';
 
-interface Props {
+const mapStateToProps = state => ({
-  renderer: {
+  renderer: selectUserRenderer(state),
-    info: string,
+});
-    progress: number,
-  }
-}
 
-export const ShotPrefetchDialog = ({ renderer: { info, progress }}: Props) => (
+type Props = ReturnType<typeof mapStateToProps> & {};
+
+const ShotPrefetchDialogUnconnected = ({ renderer: { info, progress }}: Props) => (
   <div className="control-dialog control-dialog-small left">
     <div className="helper helper-prefetch">
       <div className="dialog-prefetch-stage">{info}</div>
@@ -19,3 +20,7 @@ export const ShotPrefetchDialog = ({ renderer: { info, progress }}: Props) => (
     </div>
   </div>
 );
+
+const ShotPrefetchDialog = connect(mapStateToProps)(ShotPrefetchDialogUnconnected);
+
+export { ShotPrefetchDialog }

src/components/dialogs/StickersDialog.tsx

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import React from 'react';
 
 import { STICKERS } from '$constants/stickers';
 import { setActiveSticker as setActiveStickerAction } from "$redux/user/actions";

src/components/dialogs/TitleDialog.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { bindActionCreators } from "redux";
 import { connect } from 'react-redux';
 

src/components/dialogs/TrashDialog.tsx

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

src/components/logo/LogoPreview.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { LOGOS } from '$constants/logos';
 import { connect } from 'react-redux';
 import { IRootState } from '$redux/user';

src/components/maps/RouteRowDrop.tsx

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import React from 'react';
 import { Icon } from '$components/panels/Icon';
 import { MapListDialog } from "$components/dialogs/MapListDialog";
 import { Tooltip } from "$components/panels/Tooltip";

src/components/maps/RouteRowEditor.tsx

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import React from 'react';
 import { Icon } from '$components/panels/Icon';
 import { Switch } from '$components/Switch';
 import { MapListDialog } from "$components/dialogs/MapListDialog";

src/components/maps/RouteRowView.tsx

@@ -1,5 +1,5 @@
 // @flow
-import * as React from "react";
+import React from "react";
 import { Icon } from "$components/panels/Icon";
 import { MapListDialog } from "$components/dialogs/MapListDialog";
 import { Tooltip } from "$components/panels/Tooltip";

src/components/maps/RouteRowWrapper.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import classnames from "classnames";
 import { MapListDialog } from "$components/dialogs/MapListDialog";
 import { RouteRowView } from "$components/maps/RouteRowView";

src/components/panels/DistanceBar.tsx

@@ -1,10 +1,10 @@
 // flow
-import * as React from 'react';
+import 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 * as Slider from 'rc-slider/lib/Slider';
+import Slider from 'rc-slider/lib/Slider';
 import { bindActionCreators } from 'redux';
 import { setSpeed } from '$redux/user/actions';
 import { IRootState } from "$redux/user";

src/components/panels/EditorDialog.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { createElement } from 'react';
 import { MODES } from '$constants/modes';
 
 import { RouterDialog } from '$components/dialogs/RouterDialog';
@@ -52,7 +52,7 @@ const DIALOG_CONTENTS: { [x: string]: any } = {
 
 export const Component = (props: Props) =>
   props.mode && DIALOG_CONTENTS[props.mode]
-    ? React.createElement(DIALOG_CONTENTS[props.mode])
+    ? createElement(DIALOG_CONTENTS[props.mode])
     : null;
 
 export const EditorDialog = connect(

src/components/panels/EditorPanel.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { MODES } from '$constants/modes';
 import classnames from 'classnames';
 

src/components/panels/Icon.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 export const Icon = ({ icon, size = 32 }: { icon: string, size?: number }) => (
   <svg width={size} height={size} viewBox="0 0 32 32">

src/components/panels/RendererPanel.tsx

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

src/components/panels/Tooltip.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import classnames from 'classnames';
 
 export const Tooltip = ({ children, position = 'bottom' }: { children: string, position?: string }) => (

src/components/panels/TopLeftPanel.tsx

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

src/components/panels/TopRightPanel.tsx

@@ -1,5 +1,5 @@
 // flow
-import * as React from 'react';
+import React from 'react';
 import { Icon } from '$components/panels/Icon';
 import { PROVIDERS } from '$constants/providers';
 import { LOGOS } from '$constants/logos';

src/components/panels/UserPanel.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 
 import { GuestButton } from "$components/user/GuestButton";
 import { DEFAULT_USER, IUser, ROLES } from "$constants/auth";

src/components/renderer/Renderer.tsx

@@ -1,9 +1,9 @@
-import * as React from 'react';
+import React from 'react';
 
 import { hideRenderer, cropAShot } from '$redux/user/actions';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import * as Croppr from 'croppr';
+import Croppr from 'croppr';
 import 'croppr/dist/croppr.css';
 import { LOGOS } from '$constants/logos';
 import { RendererPanel } from '$components/panels/RendererPanel';

src/components/user/GuestButton.tsx

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

src/components/user/UserButton.tsx

@@ -1,5 +1,5 @@
 // @flow
-import * as React from "react";
+import React from "react";
 import { UserPicture } from "$components/user/UserPicture";
 import { IUser } from "$constants/auth";
 

src/components/user/UserMenu.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { APP_INFO } from '$constants/app_info';
 import { userLogout } from "$redux/user/actions";
 

src/components/user/UserPicture.tsx

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

src/containers/App.tsx

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import React from 'react';
 
 import { EditorPanel } from '$components/panels/EditorPanel';
 import { Fills } from '$components/Fills';
@@ -15,23 +15,23 @@ import { LeftDialog } from '$containers/LeftDialog';
 import { TopLeftPanel } from '$components/panels/TopLeftPanel';
 import { TopRightPanel } from '$components/panels/TopRightPanel';
 import { LogoPreview } from '$components/logo/LogoPreview';
-import { IStickerPack } from "$constants/stickers";
+import { IStickerPack } from '$constants/stickers';
-import { IDialogs } from "$constants/dialogs";
+import { IDialogs } from '$constants/dialogs';
 
-import { Map } from "$containers/map/Map"
+import { Map } from '$containers/map/Map';
 import { IRootReducer } from '$redux/user';
 
 type Props = {
-  sticker: string,
+  sticker: string;
-  renderer_active: boolean,
+  renderer_active: boolean;
 
-  mode: IRootReducer['mode'],
+  mode: IRootReducer['mode'];
-  dialog: keyof IDialogs,
+  dialog: keyof IDialogs;
-  dialog_active: boolean,
+  dialog_active: boolean;
-  set: keyof IStickerPack,
+  set: keyof IStickerPack;
-  hideRenderer: typeof hideRenderer,
+  hideRenderer: typeof hideRenderer;
-  setDialogActive: typeof setDialogActive,
+  setDialogActive: typeof setDialogActive;
-}
+};
 
 const Component = (props: Props) => (
   <div>
@@ -41,9 +41,6 @@ const Component = (props: Props) => (
 
     <TopLeftPanel />
     <TopRightPanel />
-    <LogoPreview />
-
-    <Cursor mode={props.mode} sticker={props.sticker} set={props.set} />
 
     <LeftDialog
       dialog={props.dialog}
@@ -51,18 +48,22 @@ const Component = (props: Props) => (
       setDialogActive={props.setDialogActive}
     />
 
+    <LogoPreview />
+
     <Map />
 
-    { props.renderer_active &&
+    {props.renderer_active && <Renderer onClick={props.hideRenderer} />}
-      <Renderer onClick={props.hideRenderer} />
-    }
   </div>
 );
 
 const mapStateToProps = ({
   user: {
-    mode, dialog, dialog_active, renderer, activeSticker: { sticker = null, set = null }
+    mode,
-  }
+    dialog,
+    dialog_active,
+    renderer,
+    activeSticker: { sticker = null, set = null },
+  },
 }) => ({
   renderer_active: renderer.renderer_active,
   mode,
@@ -72,5 +73,6 @@ const mapStateToProps = ({
   set,
 });
 
-const mapDispatchToProps = dispatch => bindActionCreators({ hideRenderer, setDialogActive }, dispatch);
+const mapDispatchToProps = dispatch =>
+  bindActionCreators({ hideRenderer, setDialogActive }, dispatch);
 export const App = connect(mapStateToProps, mapDispatchToProps)(hot(module)(Component));

src/containers/LeftDialog.tsx

@@ -1,17 +1,15 @@
-// @flow
+import React, { createElement } from 'react';
-import * as React from 'react';
 import { DIALOGS, IDialogs } from '$constants/dialogs';
-import * as classnames from 'classnames';
+import classnames from 'classnames';
 import { AppInfoDialog } from '$components/dialogs/AppInfoDialog';
 import { Icon } from '$components/panels/Icon';
 import { MapListDialog } from '$components/dialogs/MapListDialog';
-import * as ActionCreators from "$redux/user/actions";
+import * as USER_ACTIONS from '$redux/user/actions';
-import { StatelessComponent } from "react";
 
 interface Props {
-  dialog: keyof IDialogs,
+  dialog: keyof IDialogs;
-  dialog_active: Boolean,
+  dialog_active: Boolean;
-  setDialogActive: typeof ActionCreators.setDialogActive,
+  setDialogActive: typeof USER_ACTIONS.setDialogActive;
 }
 
 const LEFT_DIALOGS = {
@@ -19,22 +17,25 @@ const LEFT_DIALOGS = {
   [DIALOGS.APP_INFO]: AppInfoDialog,
 };
 
-export const LeftDialog = ({ dialog, dialog_active, setDialogActive }: Props) => (
+const LeftDialog = ({ dialog, dialog_active, setDialogActive }: Props) => (
   <React.Fragment>
-    {
+    {Object.keys(LEFT_DIALOGS).map(item => (
-      Object.keys(LEFT_DIALOGS).map(item => (
+      <div
-        <div className={classnames('dialog', { active: dialog_active && (dialog === item) })} key={item}>
+        className={classnames('dialog', { active: dialog_active && dialog === item })}
-          { dialog && LEFT_DIALOGS[item] && React.createElement(LEFT_DIALOGS[item]) }
+        key={item}
-          <div className="dialog-close-button desktop-only" onClick={() => setDialogActive(false)}>
+      >
-            <Icon icon="icon-cancel-1" />
+        {dialog && LEFT_DIALOGS[item] && createElement(LEFT_DIALOGS[item], {})}
-          </div>
 
-          <div className="dialog-close-button mobile-only" onClick={() => setDialogActive(false)}>
+        <div className="dialog-close-button desktop-only" onClick={() => setDialogActive(false)}>
-            <Icon icon="icon-chevron-down" />
+          <Icon icon="icon-cancel-1" />
-          </div>
         </div>
-      ))
+
-    }
+        <div className="dialog-close-button mobile-only" onClick={() => setDialogActive(false)}>
+          <Icon icon="icon-chevron-down" />
+        </div>
+      </div>
+    ))}
   </React.Fragment>
 );
 
+export { LeftDialog };

src/containers/map/Map/index.tsx

@@ -1,5 +1,5 @@
 import { Map as MapInterface, map } from "leaflet";
-import * as React from "react";
+import React from "react";
 import { createPortal } from "react-dom";
 import {
   selectMapProvider,

src/containers/map/Sticker/index.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { Map, marker, Marker } from "leaflet";
 import { IStickerDump } from "$redux/map/types";
 import { STICKERS } from "$constants/stickers";

src/containers/map/Stickers/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { IStickerDump } from '$redux/map/types';
 import { FeatureGroup, Map } from 'leaflet';
 import { Sticker } from '$containers/map/Sticker';

src/containers/map/TileLayer/index.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { TileContext } from "../../../utils/context";
 import { TileLayer as TileLayerInterface, tileLayer, Map } from "leaflet";
 import { DEFAULT_PROVIDER, PROVIDERS } from "$constants/providers";

src/index.tsx

@@ -73,8 +73,8 @@
   done stickers drag on rotate bug
  */
 
-import * as React from 'react';
+import React from 'react';
-import * as ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom';
 
 import { App } from '$containers/App';
 import '$styles/main.less';

src/redux/user/selectors.ts

@@ -4,4 +4,5 @@ export const selectUser = (state: IState) => state.user;
 export const selectUserUser = (state: IState) => state.user.user;
 export const selectUserEditing = (state: IState) => state.user.editing;
 export const selectUserMode = (state: IState) => state.user.mode;
-export const selectUserActiveSticker = (state: IState) => state.user.activeSticker;
+export const selectUserActiveSticker = (state: IState) => state.user.activeSticker;
+export const selectUserRenderer = (state: IState) => state.user.renderer;

src/utils/context.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { Map, TileLayer } from 'leaflet';
 
 export const MapContext = React.createContext<Map>(null);

src/utils/gpx.ts

@@ -1,4 +1,4 @@
-import * as saveAs from 'file-saver';
+import saveAs from 'file-saver';
 
 export interface IRoutePoint {
   lat: number,

src/utils/renderer.ts

@@ -1,6 +1,6 @@
 // import { editor } from '$modules/Editor';
 import { COLORS, CLIENT } from '$config/frontend';
-import * as saveAs from 'file-saver';
+import saveAs from 'file-saver';
 import { replaceProviderUrl } from '$constants/providers';
 import { STICKERS } from '$constants/stickers';
 import { ILatLng } from '$redux/map/types';

tsconfig.json

@@ -9,6 +9,8 @@
     "target": "es6",
     "jsx": "react",
     "lib": [ "es2015", "DOM", "es6" ],
+    "esModuleInterop": true,
+    "isolatedModules": true,
     "baseUrl": ".",
     "paths": {
       "$components/*": [ "src/components/*" ],