fixed typescript errors

src/map/Arrows/index.tsx

@@ -14,17 +14,17 @@ const mapDispatchToProps = {};
 type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
 
 const ArrowsUnconnected: FC<Props> = memo(({ route }) => {
-  const [layer, setLayer] = useState(null);
+  const [layer, setLayer] = useState<ArrowsLayer | null>(null);
 
   useEffect(() => {
     const item = new ArrowsLayer({}).addTo(MainMap);
-    setLayer(item);    
+    setLayer(item);
     return () => MainMap.removeLayer(item);
   }, [MainMap]);
 
   useEffect(() => {
     if (!layer) return
-    
+
     layer.setLatLngs(route);
   }, [layer, route])
   return null;

src/map/CurrentLocation/index.tsx

@@ -1,9 +1,9 @@
-import React, { FC, useState, useEffect, useCallback } from 'react';
-import { LatLngLiteral, marker, Marker, DivIcon } from 'leaflet';
+import React, { FC, useCallback, useEffect } from 'react';
+import { DivIcon, LatLngLiteral, Marker } from 'leaflet';
 import { MainMap } from '~/constants/map';
 
 interface IProps {
-  location: LatLngLiteral;
+  location?: LatLngLiteral;
 }
 
 const CurrentLocation: FC<IProps> = ({ location }) => {

src/map/GpxPolyline/index.tsx

@@ -8,14 +8,14 @@ interface IProps {
 }
 
 const GpxPolyline: FC<IProps> = ({ latlngs, color }) => {
-  const [layer, setLayer] = useState<Polyline>(null);
+  const [layer, setLayer] = useState<Polyline | null>(null);
 
   useEffect(() => {
     const item = new Polyline([], {
       color,
       stroke: true,
       opacity: 1,
-      weight: 7, 
+      weight: 7,
       // dashArray: [12,12],
     }).addTo(MainMap);
     setLayer(item);

src/map/KmMarks/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState, memo } from 'react';
+import React, { FC, memo, useEffect, useState } from 'react';
 import { KmMarksLayer } from '~/utils/marks';
 import { MainMap } from '~/constants/map';
 import { selectMap } from '~/redux/map/selectors';
@@ -14,14 +14,14 @@ const mapDispatchToProps = {};
 type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
 
 const KmMarksUnconnected: FC<Props> = memo(({ map: { route } }) => {
-  const [layer, setLayer] = useState(null);
+  const [layer, setLayer] = useState<KmMarksLayer | null>(null);
 
   useEffect(() => {
     const layer = new KmMarksLayer([]);
     layer.addTo(MainMap);
     setLayer(layer);
     return () => MainMap.removeLayer(layer);
-  }, [MainMap]);
+  }, []);
 
   useEffect(() => {
     if (!layer) return;

src/map/Map/index.tsx

@@ -93,7 +93,7 @@ const MapUnconnected: React.FC<IProps> = memo(
               enabled && <GpxPolyline latlngs={latlngs} color={color} key={index} />
           )}
       </div>,
-      document.getElementById('canvas')
+      document.getElementById('canvas')!
     );
   }
 );

src/map/Route/index.tsx

@@ -1,8 +1,8 @@
-import React, { FC, useEffect, memo, useState, useCallback } from 'react';
+import React, { FC, memo, useCallback, useEffect, useState } from 'react';
 import { InteractivePoly } from '~/utils/map/InteractivePoly';
 import { isMobile } from '~/utils/window';
 import { LatLng } from 'leaflet';
-import { selectEditorMode, selectEditorEditing, selectEditorDirection } from '~/redux/editor/selectors';
+import { selectEditorDirection, selectEditorEditing, selectEditorMode } from '~/redux/editor/selectors';
 import * as MAP_ACTIONS from '~/redux/map/actions';
 import { connect } from 'react-redux';
 import { selectMapRoute } from '~/redux/map/selectors';
@@ -28,7 +28,7 @@ type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {}
 
 const RouteUnconnected: FC<Props> = memo(
   ({ route, editing, mode, drawing_direction, mapSetRoute, editorSetDistance, editorSetMarkersShown }) => {
-    const [layer, setLayer] = useState<InteractivePoly>(null);
+    const [layer, setLayer] = useState<InteractivePoly | null>(null);
 
     const onDistanceChange = useCallback(({ distance }) => editorSetDistance(distance), [
       editorSetDistance,

src/map/Router/index.tsx

@@ -1,16 +1,12 @@
-import { FC, useEffect, useCallback, memo, useState } from 'react';
+import { FC, memo, useCallback, useEffect, useState } from 'react';
 import { OsrmRouter } from '~/utils/map/OsrmRouter';
 import { connect } from 'react-redux';
 import { selectMapRoute } from '~/redux/map/selectors';
-import {
-  selectEditorRouter,
-  selectEditorMode,
-  selectEditorDistance,
-} from '~/redux/editor/selectors';
+import { selectEditorDistance, selectEditorMode, selectEditorRouter } from '~/redux/editor/selectors';
 import { MainMap } from '~/constants/map';
 import * as EDITOR_ACTIONS from '~/redux/editor/actions';
 import { MODES } from '~/constants/modes';
-import { LatLngLiteral, marker, divIcon } from 'leaflet';
+import { divIcon, LatLngLiteral, marker } from 'leaflet';
 import classNames from 'classnames';
 import { angleBetweenPoints } from '~/utils/geom';
 
@@ -30,7 +26,7 @@ type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {}
 const RouterUnconnected: FC<Props> = memo(
   ({ route, mode, router: { waypoints }, editorSetRouter, distance }) => {
     const [dist, setDist] = useState(0);
-    const [end, setEnd] = useState<LatLngLiteral>(null);
+    const [end, setEnd] = useState<LatLngLiteral | null>(null);
     const [direction, setDirection] = useState<boolean>(false);
 
     const updateWaypoints = useCallback(

src/map/Sticker/index.tsx

@@ -20,8 +20,8 @@ interface IProps {
   mapDropSticker: (index: number) => void;
 }
 
-export const getLabelDirection = (angle: number): 'left' | 'right' =>
-  angle % Math.PI >= -(Math.PI / 2) && angle % Math.PI <= Math.PI / 2 ? 'left' : 'right';
+export const getLabelDirection = (angle?: number): 'left' | 'right' =>
+  !!angle && angle % Math.PI >= -(Math.PI / 2) && angle % Math.PI <= Math.PI / 2 ? 'left' : 'right';
 
 const getX = e =>
   e.touches && e.touches.length > 0
@@ -36,50 +36,58 @@ const Sticker: React.FC<IProps> = ({
   mapSetSticker,
   mapDropSticker,
 }) => {
-  const [text, setText] = useState(sticker.text);
-  const [layer, setLayer] = React.useState<Marker>(null);
+  const [text, setText] = useState(sticker.text || '');
+  const [layer, setLayer] = React.useState<Marker | null>(null);
   const [dragging, setDragging] = React.useState(false);
-  const wrapper = useRef(null);
+  const wrapper = useRef<HTMLDivElement>(null);
 
   let angle = useRef(sticker.angle);
 
   const element = React.useMemo(() => document.createElement('div'), []);
 
-  const stickerArrow = React.useRef(null);
-  const stickerImage = React.useRef(null);
+  const stickerArrow = React.useRef<HTMLDivElement>(null);
+  const stickerImage = React.useRef<HTMLDivElement>(null);
 
   const onChange = React.useCallback(state => mapSetSticker(index, state), [mapSetSticker, index]);
   const onDelete = React.useCallback(state => mapDropSticker(index), [mapSetSticker, index]);
 
   const updateAngle = useCallback(
     ang => {
-      if (!stickerImage.current || !stickerArrow.current) return;
-
       const x = Math.cos(ang + Math.PI) * 56 - 30;
       const y = Math.sin(ang + Math.PI) * 56 - 30;
 
+      if (!stickerImage.current || !stickerArrow.current) {
+        return;
+      }
+
       stickerImage.current.style.left = String(6 + x);
       stickerImage.current.style.top = String(6 + y);
 
       stickerArrow.current.style.transform = `rotate(${ang + Math.PI}rad)`;
     },
-    [stickerArrow, stickerImage, angle]
+    [stickerArrow, stickerImage]
   );
 
   const onDragStart = React.useCallback(() => {
+    if (!layer?.dragging) {
+      return
+    }
+
     layer.dragging.disable();
     MainMap.dragging.disable();
     MainMap.disableClicks();
 
     setDragging(true);
-  }, [setDragging, layer, MainMap]);
+  }, [setDragging, layer]);
 
   const onDragStop = React.useCallback(
     event => {
       event.stopPropagation();
       event.preventDefault();
 
-      if (!layer) return;
+      if (!layer?.dragging) {
+        return;
+      }
 
       setDragging(false);
       onChange({
@@ -134,7 +142,9 @@ const Sticker: React.FC<IProps> = ({
     });
   }, [text, onChange, sticker]);
 
-  const direction = React.useMemo(() => getLabelDirection(sticker.angle), [sticker.angle]);
+  const direction = React.useMemo(() => {
+    getLabelDirection(sticker?.angle)
+  }, [sticker.angle]);
 
   useEffect(() => {
     updateAngle(sticker.angle);
@@ -148,7 +158,8 @@ const Sticker: React.FC<IProps> = ({
 
   useEffect(() => {
     if (!layer) return;
-    setText(sticker.text);
+
+    setText(sticker.text || '');
   }, [layer, sticker.text]);
 
   useEffect(() => {

src/map/Stickers/index.tsx

@@ -14,7 +14,7 @@ interface IProps {
 }
 
 const Stickers: FC<IProps> = memo(({ stickers, is_editing, mapSetSticker, mapDropSticker }) => {
-  const [layer, setLayer] = useState<FeatureGroup>(null);
+  const [layer, setLayer] = useState<FeatureGroup | null>(null);
   const [zoom, setZoom] = useState(MainMap.getZoom());
 
   const onZoomChange = useCallback(

src/map/TileLayer/index.tsx

@@ -10,7 +10,7 @@ type IProps = React.HTMLAttributes<HTMLDivElement> & {
 };
 
 const TileLayer: React.FC<IProps> = React.memo(({ children, provider, map }) => {
-  const [layer, setLayer] = React.useState<TileLayerInterface>(null);
+  const [layer, setLayer] = React.useState<TileLayerInterface | undefined>(undefined);
 
   React.useEffect(() => {
     if (!map) return;
@@ -34,7 +34,11 @@ const TileLayer: React.FC<IProps> = React.memo(({ children, provider, map }) =>
     layer.setUrl(url);
   }, [layer, provider]);
 
-  return <TileContext.Provider value={layer}>{children}</TileContext.Provider>;
+  return (
+    <TileContext.Provider value={layer}>
+      {children}
+    </TileContext.Provider>
+  );
 });
 
 export { TileLayer };