fixed map clicks on sticker drag

src/containers/map/Map/index.tsx

@@ -1,20 +1,18 @@
-import { Map as MapInterface, map } from "leaflet";
-import React from "react";
-import { createPortal } from "react-dom";
-import {
-  selectMapProvider,
-  selectMapRoute,
-  selectMapStickers
-} from "~/redux/map/selectors";
-import { connect } from "react-redux";
-import * as MAP_ACTIONS from "~/redux/map/actions";
+import React from 'react';
 
-import { Route } from "~/containers/map/Route";
-import { TileLayer } from "~/containers/map/TileLayer";
-import { Stickers } from "~/containers/map/Stickers";
+import { MainMap } from '~/constants/map';
+import { Map as MapInterface } from 'leaflet';
+import { createPortal } from 'react-dom';
+import { selectMapProvider, selectMapRoute, selectMapStickers } from '~/redux/map/selectors';
+import { connect } from 'react-redux';
+import * as MAP_ACTIONS from '~/redux/map/actions';
+
+import { Route } from '~/containers/map/Route';
+import { TileLayer } from '~/containers/map/TileLayer';
+import { Stickers } from '~/containers/map/Stickers';
 
 import 'leaflet/dist/leaflet.css';
-import { selectEditorEditing } from "~/redux/editor/selectors";
+import { selectEditorEditing } from '~/redux/editor/selectors';
 
 const mapStateToProps = state => ({
   provider: selectMapProvider(state),
@@ -27,15 +25,13 @@ const mapDispatchToProps = {
   mapSetRoute: MAP_ACTIONS.mapSetRoute,
   mapDropSticker: MAP_ACTIONS.mapDropSticker,
   mapSetSticker: MAP_ACTIONS.mapSetSticker,
-  mapClicked: MAP_ACTIONS.mapClicked
+  mapClicked: MAP_ACTIONS.mapClicked,
 };
 
 type IProps = React.HTMLAttributes<HTMLDivElement> &
   ReturnType<typeof mapStateToProps> &
   typeof mapDispatchToProps & {};
 
-export let MainMap = map(document.getElementById('canvas')).setView([55.0153275, 82.9071235], 13);
-
 const MapUnconnected: React.FC<IProps> = ({
   provider,
   route,
@@ -45,44 +41,38 @@ const MapUnconnected: React.FC<IProps> = ({
   mapClicked,
   mapSetRoute,
   mapSetSticker,
-  mapDropSticker
+  mapDropSticker,
 }) => {
-  const ref = React.useRef(null);
-  const [layer, setLayer] = React.useState<MapInterface>(null);
+  const onClick = React.useCallback(
+    event => {
+      if (!MainMap.clickable) return;
 
-  const onClick = React.useCallback(event => {
-    mapClicked(event.latlng);
-  }, [mapClicked]);
+      mapClicked(event.latlng);
+    },
+    [mapClicked]
+  );
 
   React.useEffect(() => {
-    if (!ref.current) return;
-
-    setLayer(MainMap);
-  }, []);
-
-  React.useEffect(() => {
-    if (!layer) return;
-
-    layer.addEventListener("click", onClick)
+    MainMap.addEventListener('click', onClick);
 
     return () => {
-      layer.removeEventListener("click", onClick)
-    }
-  }, [layer, onClick]);
+      MainMap.removeEventListener('click', onClick);
+    };
+  }, [MainMap, onClick]);
 
   return createPortal(
-    <div ref={ref}>
-      <TileLayer provider={provider} map={layer} />
-      <Route route={route} mapSetRoute={mapSetRoute} map={layer} is_editing={editing} />
+    <div>
+      <TileLayer provider={provider} map={MainMap} />
+      <Route route={route} mapSetRoute={mapSetRoute} map={MainMap} is_editing={editing} />
       <Stickers
         stickers={stickers}
-        map={layer}
+        map={MainMap}
         mapSetSticker={mapSetSticker}
         mapDropSticker={mapDropSticker}
         is_editing={editing}
       />
     </div>,
-    document.getElementById("canvas")
+    document.getElementById('canvas')
   );
 };