Map logic rework

src/components/Map/index.tsx

@@ -1,22 +1,17 @@
 import React from 'react';
 
-import mapboxgl from 'mapbox-gl';
-import { renderToString } from 'react-dom/server';
 import { FaDirections, FaGlobeAfrica, FaMountain } from 'react-icons/fa';
 import { MdFullscreen, MdRadar, MdWbShade } from 'react-icons/md';
 
-import { useMapbox } from '@app/hooks/mapbox';
-import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
 import {
-  setBearing,
   setExaggeration,
   setHillShade,
-  setLatLng,
   setMapStyle,
-  setPitch,
-  setZoom,
 } from '@core/slices/mapSlice';
-import { Card, IconButton } from '@meshtastic/components';
+import { useAppDispatch } from '@hooks/useAppDispatch';
+import { useAppSelector } from '@hooks/useAppSelector';
+import { useMapbox } from '@hooks/useMapbox';
+import { IconButton } from '@meshtastic/components';
 
 import type { MapStyle } from './styles';
 import { MapStyles } from './styles';
@@ -24,63 +19,10 @@ import { MapStyles } from './styles';
 export const Map = (): JSX.Element => {
   const dispatch = useAppDispatch();
   const darkMode = useAppSelector((state) => state.app.darkMode);
-  const nodes = useAppSelector((state) => state.meshtastic.nodes);
+
   const mapState = useAppSelector((state) => state.map);
-  const [markers, setMarkers] = React.useState<
-    { id: number; marker: mapboxgl.Marker }[]
-  >([]);
-  const mapRef = React.useRef<HTMLDivElement>(null);
 
-  const map = useMapbox(mapRef, mapState.accessToken, {
-    center: mapState.latLng,
-    zoom: mapState.zoom,
-    bearing: mapState.bearing,
-    pitch: mapState.pitch,
-    style: mapState.style.url,
-  });
-
-  const updateNodes = React.useCallback(() => {
-    nodes.map((node) => {
-      if (map?.loaded() && node.currentPosition) {
-        const existingMarker = markers.find(
-          (marker) => marker.id === node.number,
-        )?.marker;
-        const marker =
-          existingMarker ??
-          new mapboxgl.Marker({}).setLngLat([0, 0]).addTo(map);
-
-        marker
-          .setLngLat([
-            node.currentPosition.longitudeI / 1e7,
-            node.currentPosition.latitudeI / 1e7,
-          ])
-          .setPopup(
-            new mapboxgl.Popup().setHTML(
-              renderToString(
-                <Card>
-                  <div className="text-xl font-medium">
-                    {node.user?.longName}
-                  </div>
-                  <ul>
-                    <li>ID: {node.number}</li>
-                  </ul>
-                </Card>,
-              ),
-            ),
-          );
-
-        if (!existingMarker) {
-          setMarkers((markers) => [
-            ...markers,
-            {
-              id: node.number,
-              marker,
-            },
-          ]);
-        }
-      }
-    });
-  }, [markers, map, nodes]);
+  const { ref } = useMapbox();
 
   const ChangeMapStyle = React.useCallback(
     (styleName: string, style: MapStyle) => {
@@ -97,95 +39,6 @@ export const Map = (): JSX.Element => {
     [dispatch, darkMode, mapState.style.title],
   );
 
-  React.useEffect(() => {
-    map?.on('load', () => {
-      updateNodes();
-    });
-    map?.on('styledata', () => {
-      if (!map.getSource('mapbox-dem')) {
-        map.addSource('mapbox-dem', {
-          type: 'raster-dem',
-          url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
-          tileSize: 512,
-          maxzoom: 14,
-        });
-      }
-      map.setTerrain({
-        source: 'mapbox-dem',
-        exaggeration: mapState.exaggeration ? 1.5 : 0,
-      });
-    });
-    map?.on('dragend', (e) => {
-      dispatch(setLatLng(e.target.getCenter()));
-    });
-    map?.on('zoomend', (e) => {
-      dispatch(setZoom(e.target.getZoom()));
-    });
-    map?.on('rotate', (e) => {
-      dispatch(setBearing(e.target.getBearing()));
-    });
-    map?.on('pitch', (e) => {
-      dispatch(setPitch(e.target.getPitch()));
-    });
-  }, [dispatch, map, updateNodes, mapState.exaggeration]);
-
-  React.useEffect(() => {
-    const center = map?.getCenter();
-    if (center !== mapState.latLng) {
-      map?.setCenter(mapState.latLng);
-    }
-  }, [map, mapState.latLng]);
-
-  /**
-   * Hill Shading
-   */
-  React.useEffect(() => {
-    if (map?.loaded()) {
-      if (mapState.hillShade) {
-        map.addLayer(
-          {
-            id: 'hillshading',
-            source: 'mapbox-dem',
-            type: 'hillshade',
-            // insert below waterway-river-canal-shadow;
-            // where hillshading sits in the Mapbox Outdoors style
-          },
-          'waterway-river-canal-shadow',
-        );
-      } else {
-        map.removeLayer('hillshading');
-      }
-    }
-  }, [map, mapState.hillShade]);
-
-  /**
-   * Exaggeration
-   */
-  React.useEffect(() => {
-    if (map?.loaded()) {
-      map.setTerrain({
-        source: 'mapbox-dem',
-        exaggeration: mapState.exaggeration ? 1.5 : 0,
-      });
-    }
-  }, [map, mapState.exaggeration]);
-
-  /**
-   * Map Style
-   */
-  React.useEffect(() => {
-    if (map?.loaded()) {
-      map.setStyle(mapState.style.url);
-    }
-  }, [map, mapState.style]);
-
-  /**
-   * Markers
-   */
-  React.useEffect(() => {
-    updateNodes();
-  }, [nodes, updateNodes]);
-
   return (
     <div className="relative flex w-full h-full">
       <div className="fixed right-0 z-20 p-2 m-4 space-y-2 bg-white rounded-md shadow-md md:mx-10 dark:bg-primaryDark">
@@ -232,7 +85,7 @@ export const Map = (): JSX.Element => {
         <IconButton icon={<MdRadar />} />
       </div>
       <div className="flex w-full h-full">
-        <div className="flex-grow w-full h-full" ref={mapRef} />
+        <div className="flex-grow w-full h-full" ref={ref} />
       </div>
     </div>
   );