moved components to TypeScript

src/modules/Editor.ts

@@ -1,6 +1,5 @@
 import { Map } from '$modules/Map';
 import { NewPoly } from '$modules/NewPoly';
-// import { Poly } from '$modules/Poly';
 import { MODES } from '$constants/modes';
 import { Stickers } from '$modules/Stickers';
 import { Router } from '$modules/Router';
@@ -21,8 +20,10 @@ import {
   setRouterPoints,
   setTitle,
 } from '$redux/user/actions';
-import { DEFAULT_PROVIDER, PROVIDERS } from '$constants/providers';
+import { DEFAULT_PROVIDER, IProvider, PROVIDERS } from '$constants/providers';
 import { STICKERS } from '$constants/stickers';
+import { IRootState } from "$redux/user/reducer";
+import { DEFAULT_USER } from "$constants/auth";
 
 export class Editor {
   constructor() {
@@ -30,7 +31,7 @@ export class Editor {
     this.owner = null;
     this.map = new Map({ container: 'map' });
     this.initialData = {};
-    this.activeSticker = null;
+    this.activeSticker = {};
     this.mode = MODES.NONE;
     this.provider = PROVIDERS[DEFAULT_PROVIDER];
 
@@ -70,7 +71,6 @@ export class Editor {
         toggle: this.clearSticker,
       },
       [MODES.TRASH]: {
-        // toggle: this.clearAll,
         toggle: this.clearMode,
       },
       [MODES.CONFIRM_CANCEL]: {
@@ -98,25 +98,42 @@ export class Editor {
     map.addEventListener('dragstop', () => lockMapClicks(false));
   }
 
-  getUser = () => store.getState().user.user;
-  getMode = () => store.getState().user.mode;
-  getProvider = () => store.getState().user.provider;
-  getTitle = () => store.getState().user.title;
-  getEditing = () => store.getState().user.editing;
-  getChanged = () => store.getState().user.changed;
-  getRouterPoints = () => store.getState().user.routerPoints;
-  getDistance = () => store.getState().user.distance;
+  map; // todo typecheck
+  poly; // todo typecheck
+  stickers;
+  router;
 
-  setLogo = logo => store.dispatch(setLogo(logo));
-  setMode = value => store.dispatch(setMode(value));
-  setRouterPoints = value => store.dispatch(setRouterPoints(value));
-  setActiveSticker = value => store.dispatch(setActiveSticker(value));
-  setTitle = value => store.dispatch(setTitle(value));
-  setAddress = value => store.dispatch(setAddress(value));
-  setPublic = value => store.dispatch(setPublic(value));
+  logo: string | number = DEFAULT_LOGO;
+  owner = null;
+  initialData;
+  activeSticker: IRootState['activeSticker'];
+  mode: IRootState['mode'];
+  provider: IProvider;
+  switches;
+  clickHandlers;
+  user = DEFAULT_USER;
+
+  getState = (): IRootState => <any>store.getState().user;
+
+  getUser = () => this.getState().user;
+  getMode = () => this.getState().mode;
+  getProvider = () => this.getState().provider;
+  getTitle = () => this.getState().title;
+  getEditing = () => this.getState().editing;
+  getChanged = () => this.getState().changed;
+  getRouterPoints = () => this.getState().routerPoints;
+  getDistance = () => this.getState().distance;
+
+  setLogo: typeof setLogo = logo => store.dispatch(setLogo(logo));
+  setMode: typeof setMode = value => store.dispatch(setMode(value));
+  setRouterPoints: typeof setRouterPoints = value => store.dispatch(setRouterPoints(value));
+  setActiveSticker: typeof setActiveSticker = value => store.dispatch(setActiveSticker(value));
+  setTitle: typeof setTitle = value => store.dispatch(setTitle(value));
+  setAddress: typeof setAddress = value => store.dispatch(setAddress(value));
+  setPublic: typeof setPublic = value => store.dispatch(setPublic(value));
 
   setMarkersShown = value => {
-    if (store.getState().user.markers_shown !== value) store.dispatch(setMarkersShown(value));
+    if (this.getState().markers_shown !== value) store.dispatch(setMarkersShown(value));
   };
 
   resetSaveDialog = () => store.dispatch(resetSaveDialog());
@@ -340,6 +357,4 @@ export class Editor {
   };
 }
 
-export const editor = new Editor({});
-
-window.editor = editor;
+export const editor = new Editor();

src/modules/Map.ts

@@ -1,11 +1,18 @@
-import { map, tileLayer } from 'leaflet';
+import {
+  Map as MapInterface,
+  map,
+  tileLayer,
+  TileLayer,
+} from 'leaflet';
+
 import 'leaflet/dist/leaflet.css';
 import { PROVIDER } from '$config/frontend';
 import { DEFAULT_PROVIDER, PROVIDERS } from '$constants/providers';
 
 export class Map {
   constructor({ container }) {
-    this.map = map(container, { editable: true }).setView([55.0153275, 82.9071235], 13);
+    this.map = map(container).setView([55.0153275, 82.9071235], 13);
+    // todo: change coords?
 
     this.tileLayer = tileLayer(PROVIDER.url, {
       attribution: 'Независимое Велосообщество',
@@ -16,7 +23,10 @@ export class Map {
     this.tileLayer.addTo(this.map);
   }
 
-  setProvider = provider => {
+  map: MapInterface;
+  tileLayer: TileLayer;
+
+  setProvider = (provider: string): void => {
     const { url } = (provider && PROVIDERS[provider] && PROVIDERS[provider]) || PROVIDERS[DEFAULT_PROVIDER];
 
     this.tileLayer.setUrl(url);

src/modules/Sticker.js

@@ -1,5 +1,5 @@
 import { marker } from 'leaflet';
-import React from 'react';
+import * as React from 'react';
 import { DomMarker } from '$utils/DomMarker';
 
 import { STICKERS } from '$constants/stickers';

src/modules/Stickers.js

@@ -12,13 +12,6 @@ export class Stickers {
 
     this.layer.addTo(this.map);
   }
-  //
-  // createOnClick = e => {
-  //   if (!e || !e.latlng) return;
-  //
-  //   const { latlng } = e;
-  //   this.createSticker({ latlng });
-  // };
 
   createSticker = ({ latlng, sticker, angle = 2.2, text = '', set }) => {
     const marker = new Sticker({