adding stickers on click

src/containers/App.tsx

@@ -17,16 +17,15 @@ import { TopRightPanel } from '$components/panels/TopRightPanel';
 import { LogoPreview } from '$components/logo/LogoPreview';
 import { IStickerPack } from "$constants/stickers";
 import { IDialogs } from "$constants/dialogs";
-import { IModes } from "$constants/modes";
 
 import { Map } from "$containers/map/Map"
-import { TileLayer } from '$containers/map/TileLayer';
+import { IRootReducer } from '$redux/user';
 
 type Props = {
   sticker: string,
   renderer_active: boolean,
 
-  mode: keyof IModes,
+  mode: IRootReducer['mode'],
   dialog: keyof IDialogs,
   dialog_active: boolean,
   set: keyof IStickerPack,

src/containers/map/Map/index.tsx

@@ -24,7 +24,8 @@ const mapStateToProps = state => ({
 const mapDispatchToProps = {
   mapSetRoute: MAP_ACTIONS.mapSetRoute,
   mapDropSticker: MAP_ACTIONS.mapDropSticker,
-  mapSetSticker: MAP_ACTIONS.mapSetSticker
+  mapSetSticker: MAP_ACTIONS.mapSetSticker,
+  mapClicked: MAP_ACTIONS.mapClicked
 };
 
 type IProps = React.HTMLAttributes<HTMLDivElement> &
@@ -37,26 +38,41 @@ const MapUnconnected: React.FC<IProps> = ({
   stickers,
   editing,
 
+  mapClicked,
   mapSetRoute,
   mapSetSticker,
   mapDropSticker
 }) => {
   const ref = React.useRef(null);
-  const [maps, setMaps] = React.useState<MapInterface>(null);
+  const [layer, setLayer] = React.useState<MapInterface>(null);
+
+  const onClick = React.useCallback(event => {
+    mapClicked(event.latlng);
+  }, [mapClicked]);
 
   React.useEffect(() => {
     if (!ref.current) return;
 
-    setMaps(map(ref.current).setView([55.0153275, 82.9071235], 13));
+    setLayer(map(ref.current).setView([55.0153275, 82.9071235], 13));
   }, [ref]);
 
+  React.useEffect(() => {
+    if (!layer) return;
+
+    layer.addEventListener("click", onClick)
+
+    return () => {
+      layer.removeEventListener("click", onClick)
+    }
+  }, [layer, onClick]);
+
   return createPortal(
     <div ref={ref}>
-      <TileLayer provider={provider} map={maps} />
-      <Route route={route} mapSetRoute={mapSetRoute} map={maps} is_editing={editing} />
+      <TileLayer provider={provider} map={layer} />
+      <Route route={route} mapSetRoute={mapSetRoute} map={layer} is_editing={editing} />
       <Stickers
         stickers={stickers}
-        map={maps}
+        map={layer}
         mapSetSticker={mapSetSticker}
         mapDropSticker={mapDropSticker}
         is_editing={editing}

src/containers/map/Route/index.tsx

@@ -59,11 +59,9 @@ const Route: FC<IProps> = memo(({ route, is_editing, mapSetRoute, map }) => {
   useEffect(() => {
     if (!layer) return;
 
-    console.log('route use effect!')
-
     const points = (route && route.length > 0 && route) || [];
 
-    layer.setPoints(points as LatLng[]); // TODO: refactor this
+    layer.setPoints(points as LatLng[]);
   }, [route, layer]);
 
   useEffect(() => {