@xyo-network/react-map 3.0.14 → 3.0.16

package/src/Components/LayerAnimator.tsx

@@ -2,7 +2,7 @@ import type { WithChildren } from '@xylabs/react-shared'
 import { useInterval } from '@xylabs/react-shared'
 import type { Map } from 'mapbox-gl'
 import React, {
-  useCallback, useEffect, useRef, useState,
+  useCallback, useEffect, useMemo, useRef,
 } from 'react'
 
 import type { MapLayer } from '../Layers/index.ts'
@@ -21,9 +21,21 @@ const animatedLayerCount = 3
 export const LayerAnimator: React.FC<WithChildren<LayerAnimatorProps>> = ({
   animateLayers, children, layers, layersInitialized, map,
 }) => {
-  const [fillLayers, setFillLayers] = useState<MapLayer[]>([])
   const layerIndexQueue = useRef<number[]>([])
 
+  const fillLayers: MapLayer[] = useMemo(() => {
+    if (layers?.length && map && layersInitialized) {
+      return layers.filter((layer) => {
+        const fillLayer = layer.id.startsWith('location-fill')
+        if (fillLayer) {
+          map.setPaintProperty(layer.id, 'fill-opacity-transition', { delay: 0, duration: 4000 })
+        }
+        return fillLayer
+      })
+    }
+    return []
+  }, [layers, layersInitialized, map])
+
   const incrementQueue = useCallback(
     (index: number) => {
       if (fillLayers[index]) {
@@ -71,21 +83,6 @@ export const LayerAnimator: React.FC<WithChildren<LayerAnimatorProps>> = ({
     [map, unshiftQueue],
   )
 
-  useEffect(() => {
-    if (layers?.length && map && layersInitialized) {
-      // Only animate fill layers for now
-      setFillLayers(
-        layers.filter((layer) => {
-          const fillLayer = layer.id.startsWith('location-fill')
-          if (fillLayer) {
-            map.setPaintProperty(layer.id, 'fill-opacity-transition', { delay: 0, duration: 4000 })
-          }
-          return fillLayer
-        }),
-      )
-    }
-  }, [layers, layersInitialized, map])
-
   //
   const queueLayerAnimation = useCallback(() => {
     const animatedLayers: MapLayer[] = []

package/src/Components/MapBox.tsx

@@ -50,6 +50,7 @@ export const MapBox: React.FC<MapBoxProps> = ({
 
     // Allow external components to control the map
     setMapBoxInstance?.(map)
+    // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
     setMap(map)
 
     // save the map canvas ref to help with resizing

package/src/Components/MapBoxPoints.tsx

@@ -3,7 +3,7 @@ import { FlexCol } from '@xylabs/react-flexbox'
 import type { Feature, Point } from 'geojson'
 import type { MapOptions } from 'mapbox-gl'
 import React, {
-  useCallback, useEffect, useState,
+  useCallback, useEffect, useMemo,
 } from 'react'
 
 import { useMapBoxInstance, useMapSettings } from '../Contexts/index.ts'
@@ -25,7 +25,6 @@ export const MapboxPointsFlexBox: React.FC<MapboxPointsFlexBoxProps> = ({
   zoom,
   ...props
 }) => {
-  const [mapPoints, setMapPoints] = useState<MapPoints>()
   const { mapSettings } = useMapSettings()
   const { map, mapInitialized } = useMapBoxInstance()
 
@@ -40,6 +39,14 @@ export const MapboxPointsFlexBox: React.FC<MapboxPointsFlexBoxProps> = ({
     return {}
   }
 
+  const mapPoints = useMemo(() => {
+    return (map && features?.length)
+      ? new MapPoints({
+        features, map, zoom,
+      })
+      : undefined
+  }, [map, features, zoom])
+
   const updateFeatures = useCallback(() => {
     if (mapPoints?.isMapReady && features?.length && layers)
       for (const layer of layers) {
@@ -70,14 +77,6 @@ export const MapboxPointsFlexBox: React.FC<MapboxPointsFlexBoxProps> = ({
     updateFeatures()
   }, [mapPoints, fitToPointsPadding, updateFeatures, zoom])
 
-  useEffect(() => {
-    if (map && features?.length) {
-      setMapPoints(new MapPoints({
-        features, map, zoom,
-      }))
-    }
-  }, [map, features, zoom])
-
   useEffect(() => {
     if (mapInitialized) {
       updateMapSetup()

package/src/Contexts/HeatMapInitializer/Provider.tsx

@@ -1,9 +1,7 @@
 import { forget } from '@xylabs/forget'
 import type { WithChildren } from '@xylabs/react-shared'
 import type { Feature, Polygon } from 'geojson'
-import React, {
-  useEffect, useMemo, useState,
-} from 'react'
+import React, { useEffect, useMemo } from 'react'
 
 import type { AnimatedHeatMapColorProps, HeatMapColorProps } from '../../Colors/index.ts'
 import { useDynamicPositioning } from '../../hooks/index.ts'
@@ -34,11 +32,18 @@ export const HeatMapInitializerProvider: React.FC<WithChildren<MapInitializerPro
   layers,
   zoom,
 }) => {
-  const [mapHeat, setMapHeat] = useState<MapHeat>()
   const { options } = useDynamicPositioning()
   const { mapSettings } = useMapSettings()
   const { map, mapInitialized } = useMapBoxInstance()
 
+  const mapHeat = useMemo(() => {
+    return (map && features?.length)
+      ? new MapHeat({
+        features, map, zoom,
+      })
+      : undefined
+  }, [map, features, zoom])
+
   const value: HeatMapInitializerState = useMemo(() => ({
     MapHeat: mapHeat,
     heatMapColorProps,
@@ -76,7 +81,7 @@ export const HeatMapInitializerProvider: React.FC<WithChildren<MapInitializerPro
             map,
             features,
           )
-        } else if (options.zoom && options.center) {
+        } else if (options?.zoom && options.center) {
           map.setZoom(options.zoom)
           map.setCenter(options.center)
         }
@@ -84,14 +89,5 @@ export const HeatMapInitializerProvider: React.FC<WithChildren<MapInitializerPro
     }
   }, [mapHeat, map, mapSettings, fitToPadding, options, mapInitialized, features])
 
-  useEffect(() => {
-    if (map && features?.length) {
-      // Every time we get a new map or features, we make a new class
-      setMapHeat(new MapHeat({
-        features, map, zoom,
-      }))
-    }
-  }, [map, features, zoom])
-
   return <HeatMapInitializerContext.Provider value={value}>{children}</HeatMapInitializerContext.Provider>
 }

package/src/hooks/useDynamicMapResize.tsx

@@ -1,8 +1,6 @@
 import type { Map } from 'mapbox-gl'
 import type { MutableRefObject } from 'react'
-import {
-  useEffect, useMemo, useState,
-} from 'react'
+import { useEffect, useMemo } from 'react'
 
 /**
  * Inspired by - https://bl.ocks.org/danswick/fc56f37c10d40be62e4feac5984250d2
@@ -13,8 +11,6 @@ export const useDynamicMapResize = (
   mapInstance?: Map,
   active = true,
 ) => {
-  const [dependenciesReady, setDependenciesReady] = useState(false)
-
   const resizer = useMemo(
     () =>
       new ResizeObserver(() => {
@@ -29,9 +25,8 @@ export const useDynamicMapResize = (
     [mapCanvasRef, mapContainerRef, mapInstance],
   )
 
-  useEffect(() => {
-    const dependenciesReady = !!(active && mapInstance && mapContainerRef?.current && mapCanvasRef.current)
-    setDependenciesReady(dependenciesReady)
+  const dependenciesReady = useMemo(() => {
+    return !!(active && mapInstance && mapContainerRef?.current && mapCanvasRef.current)
   }, [active, mapCanvasRef, mapContainerRef, mapInstance])
 
   useEffect(() => {

package/src/hooks/useDynamicPositioning.tsx

@@ -1,6 +1,6 @@
 import { useWindowSize } from '@xylabs/react-shared'
 import type { MapOptions } from 'mapbox-gl'
-import { useEffect, useState } from 'react'
+import { useMemo } from 'react'
 
 /**
  * Zoom level for the map
@@ -49,17 +49,16 @@ const linearInterpolate = (aspectRatio: number, degreeRange: number[], aspectRat
 }
 
 const useDynamicPositioning = () => {
-  const [options, setOptions] = useState<Partial<MapOptions>>({})
   const { width, height } = useWindowSize()
 
-  useEffect(() => {
+  const options = useMemo(() => {
     if (width && height) {
       const aspectRatio = width / height
 
-      setOptions({
+      return {
         center: [linearInterpolate(aspectRatio, lngRange), linearInterpolate(aspectRatio, latRange)],
         zoom: defaultZoom,
-      })
+      } as Partial<MapOptions>
     }
   }, [height, width])
 

package/src/hooks/useQuadKeyPayloadsToFeatures.tsx

@@ -1,7 +1,7 @@
 import { exists } from '@xylabs/exists'
 import { GeoJson } from '@xyo-network/sdk-geo'
 import type { Feature, Geometry } from 'geojson'
-import { useEffect, useState } from 'react'
+import { useMemo, useState } from 'react'
 
 import type { NetworkLocationHeatmapQuadkeyAnswerPayload } from '../types/index.ts'
 
@@ -26,7 +26,7 @@ const useQuadKeyPayloadsToFeatures = (payloads?: NetworkLocationHeatmapQuadkeyAn
   const [features, setFeatures] = useState<Feature<Geometry>[]>([])
   const [error, setError] = useState<Error>()
 
-  useEffect(() => {
+  useMemo(() => {
     // Convert Multiple Payloads from Quadkey to GeoJson
     if (Array.isArray(payloads)) {
       if ((payloads)?.filter(exists).length > 0) {