fixing layerSelector and trail dots issue

Author: aehmt

src/index.js

@@ -56,7 +56,7 @@ if (process.env.REACT_APP_PUBLISHABLE_KEY) {
     >
       <LiveView
         onDeviceClick={console.log}
-        navigateOnClick={false}
+        navigateOnClick={true}
         publishableKey={process.env.REACT_APP_PUBLISHABLE_KEY}
         showTooltips={false}
         showDeviceList={true}

src/pages/AccountLiveLocation/components/LayerSelector/LayerSelector.js

@@ -37,12 +37,13 @@ const LayerSelector = ({
   useEffect(() => {
     document.addEventListener('mousedown', handleClick, false)
     return () => document.removeEventListener('mousedown', handleClick, false)
-  }, [])
+  }, []) // eslint-disable-line
 
   const layerSelectorEl = useRef(null)
 
   return (
     <div
+      ref={layerSelectorEl}
       className={classNames(styles.LayerSelectorContainer, {
         [styles.active]: showMenu
       })}

src/pages/Generic/Map/index.js

@@ -104,21 +104,18 @@ const MapContainer = props => {
 
   // This effect initilizes/updates/manages accuracy halo
   const haloRef = useRef(null)
-  React.useEffect(
-    () => {
-      if (mapRef && mapRef.current && accuracy) {
-        if (haloRef && haloRef.current) haloRef.current.remove()
-        haloRef.current = Leaflet.circle(markerPosition, {
-          radius: accuracy,
-          fillColor: constants.map.colors.activeColor,
-          stroke: false
-        }).addTo(mapRef.current)
-      } else {
-        if (haloRef.current) haloRef.current.remove()
-      }
-    },
-    [accuracy, markerPosition]
-  )
+  React.useEffect(() => {
+    if (mapRef && mapRef.current && accuracy) {
+      if (haloRef && haloRef.current) haloRef.current.remove()
+      haloRef.current = Leaflet.circle(markerPosition, {
+        radius: accuracy,
+        fillColor: constants.map.colors.activeColor,
+        stroke: false
+      }).addTo(mapRef.current)
+    } else {
+      if (haloRef.current) haloRef.current.remove()
+    }
+  }, [accuracy, markerPosition])
 
   // This effect initilizes/updates/manages trail
   const trailRef = useRef(null)
@@ -131,12 +128,12 @@ const MapContainer = props => {
           html
         })
         if (trailRef && trailRef.current) trailRef.current.clearLayers()
-        const trailPoints = trail.map(trailElement =>
-          Leaflet.marker(trailElement.coordinates, { icon })
-        )
+        const trailPoints = trail.map(trailElement => {
+          return Leaflet.marker(trailElement.geometry.coordinates, { icon })
+        })
         const trailLinePoints = [
           markerPosition || center,
-          ...trail.map(trailElement => trailElement.coordinates)
+          ...trail.map(trailElement => trailElement.geometry.coordinates)
         ]
         const trailLine = Leaflet.polyline(trailLinePoints, {
           color: constants.map.colors.activeColor,

src/pages/index.js

@@ -20,7 +20,7 @@ function reducer(state, action) {
       return { selectedLayer: action.data, name: 'custom' }
     default:
       console.log('error')
-      return CONSTANTS.tileLayers['base']
+      return state
   }
 }