From 0314edd5509ebd38a1d4bf48b7be6486c007e80a Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 10 Jan 2020 14:45:17 +0700
Subject: [PATCH] fixed sticker text issues

---
 src/containers/map/Sticker/index.tsx  | 21 +++++++++++++--------
 src/containers/map/Stickers/index.tsx |  2 +-
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/containers/map/Sticker/index.tsx b/src/containers/map/Sticker/index.tsx
index b9d74e9..914e374 100644
--- a/src/containers/map/Sticker/index.tsx
+++ b/src/containers/map/Sticker/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { marker, Marker } from 'leaflet';
 import { IStickerDump } from '~/redux/map/types';
 import { STICKERS } from '~/constants/stickers';
@@ -6,7 +6,7 @@ import { StickerDesc } from '~/components/StickerDesc';
 import classNames from 'classnames';
 import { DomMarker } from '~/utils/DomMarker';
 import { createPortal } from 'react-dom';
-import { MapContainer } from '~/constants/map';
+import { MapContainer, MainMap } from '~/constants/map';
 
 interface IProps {
   map: MapContainer;
@@ -154,22 +154,27 @@ const Sticker: React.FC<IProps> = ({
 
   // Initial leaflet marker creation, when element (dom element div) is ready
   React.useEffect(() => {
-    if (!map) return;
-
     const icon = new DomMarker({
       element,
       className: 'sticker-container',
     });
 
-    const item = marker(sticker.latlng, { icon, draggable: true }).addTo(map);
-
+    const item = marker(sticker.latlng, { icon, draggable: true })
+    
     setLayer(item);
 
     return () => {
-      item.removeFrom(map);
       item.remove();
     };
-  }, [element, map, sticker]);
+  }, [element]);
+
+  useEffect(() => {
+    if (!layer) return;
+    
+    layer.addTo(MainMap);
+
+    return () => layer.removeFrom(MainMap)
+  }, [layer]);
 
   React.useEffect(() => {
     element.className = is_editing ? 'sticker-container' : 'sticker-container inactive';
diff --git a/src/containers/map/Stickers/index.tsx b/src/containers/map/Stickers/index.tsx
index ee40980..6756bec 100644
--- a/src/containers/map/Stickers/index.tsx
+++ b/src/containers/map/Stickers/index.tsx
@@ -30,7 +30,7 @@ const Stickers: React.FC<IProps> = React.memo(
             <Sticker
               map={map}
               sticker={sticker}
-              key={`${index}`}
+              key={`${sticker.set}.${sticker.sticker}.${index}`}
               index={index}
               is_editing={is_editing}
               mapSetSticker={mapSetSticker}