moved components to TypeScript

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 = ({