Clean up mbdraw/aoi atom sync

NASA-IMPACT · Oct 25, 2023 · e82a5fe · e82a5fe
1 parent 26a98b6
commit e82a5fe
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 39 deletions.
diff --git a/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx b/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx
@@ -4,6 +4,7 @@ import { CollecticonUpload2 } from '@devseed-ui/collecticons';
 import { Button, createButtonStyles } from '@devseed-ui/button';
 import styled from 'styled-components';
 import { themeVal } from '@devseed-ui/theme-provider';
+import useMaps from '../../hooks/use-maps';
 import useThemedControl from '../hooks/use-themed-control';
 import CustomAoIModal from './custom-aoi-modal';
 
@@ -20,12 +21,18 @@ const SelectorButton = styled(Button)`
   }
 `;
 
-interface CustomAoIProps {
-  onConfirm: (features: Feature<Polygon>[]) => void;
-}
-
-function CustomAoI({ onConfirm }: CustomAoIProps) {
+function CustomAoI({ map }: { map: any }) {
   const [aoiModalRevealed, setAoIModalRevealed] = useState(false);
+
+  const onConfirm = (features: Feature<Polygon>[]) => {
+    const mbDraw = map?._drawControl;
+    setAoIModalRevealed(false);
+    if (!mbDraw) return;
+    mbDraw.add({
+      type: 'FeatureCollection',
+      features
+    });
+  };
   return (
     <>
       <SelectorButton onClick={() => setAoIModalRevealed(true)}>
@@ -40,8 +47,9 @@ function CustomAoI({ onConfirm }: CustomAoIProps) {
   );
 }
 
-export default function CustomAoIControl(props: CustomAoIProps) {
-  useThemedControl(() => <CustomAoI {...props} />, {
+export default function CustomAoIControl() {
+  const { main } = useMaps();
+  useThemedControl(() => <CustomAoI map={main} />, {
     position: 'top-left'
   });
   return null;

diff --git a/app/scripts/components/common/map/controls/aoi/index.tsx b/app/scripts/components/common/map/controls/aoi/index.tsx
@@ -1,17 +1,13 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import MapboxDraw from '@mapbox/mapbox-gl-draw';
 import { createGlobalStyle } from 'styled-components';
 import { useAtomValue } from 'jotai';
 import { useRef } from 'react';
 import { useControl } from 'react-map-gl';
-import { Feature, Polygon } from 'geojson';
 import useAois from '../hooks/use-aois';
 import { aoisFeaturesAtom } from './atoms';
-import { encodeAois } from '$utils/polygon-url';
 
-type DrawControlProps = {
-  customFeatures: Feature<Polygon>[];
-} & MapboxDraw.DrawOptions;
+type DrawControlProps = MapboxDraw.DrawOptions;
 
 const Css = createGlobalStyle`
 .mapbox-gl-draw_trash {
@@ -23,20 +19,9 @@ const Css = createGlobalStyle`
 export default function DrawControl(props: DrawControlProps) {
   const control = useRef<MapboxDraw>();
   const aoisFeatures = useAtomValue(aoisFeaturesAtom);
-  const { customFeatures } = props;
 
   const { onUpdate, onDelete, onSelectionChange } = useAois();
 
-  const serializedCustomFeatures = encodeAois(customFeatures);
-  useEffect(() => {
-    if (!customFeatures.length) return;
-    control.current?.add({
-      type: 'FeatureCollection',
-      features: customFeatures
-    });
-    // Look at serialized version to only update when the features change
-  }, [serializedCustomFeatures]);
-
   useControl<MapboxDraw>(
     () => {
       control.current = new MapboxDraw(props);

diff --git a/app/scripts/components/common/map/controls/aoi/reset-aoi-control.tsx b/app/scripts/components/common/map/controls/aoi/reset-aoi-control.tsx
@@ -22,7 +22,7 @@ const SelectorButton = styled(Button)`
 `;
 
 function ResetAoI({ map }: { map: any }) {
-  const aoiDeleteAll = useSetAtom(aoiDeleteAllAtom)
+  const aoiDeleteAll = useSetAtom(aoiDeleteAllAtom);
   const onReset = useCallback(() => {
     const mbDraw = map?._drawControl;
     if (!mbDraw) return;

diff --git a/app/scripts/components/exploration/components/map/index.tsx b/app/scripts/components/exploration/components/map/index.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import { useAtomValue } from 'jotai';
-import { Feature, Polygon } from 'geojson';
 
 import { useStacMetadataOnDatasets } from '../../hooks/use-stac-metadata-datasets';
 import { selectedCompareDateAtom, selectedDateAtom, timelineDatasetsAtom } from '../../atoms/atoms';
@@ -20,7 +19,6 @@ import MapOptionsControl from '$components/common/map/controls/map-options';
 import { projectionDefault } from '$components/common/map/controls/map-options/projections';
 import { useBasemap } from '$components/common/map/controls/hooks/use-basemap';
 import DrawControl from '$components/common/map/controls/aoi';
-import useAois from '$components/common/map/controls/hooks/use-aois';
 import CustomAoIControl from '$components/common/map/controls/aoi/custom-aoi-control';
 import ResetAoIControl from '$components/common/map/controls/aoi/reset-aoi-control';
 
@@ -54,16 +52,6 @@ export function ExplorationMap() {
     .slice()
     .reverse();
 
-  const { update } = useAois();
-
-  const [customAoIFeatures, setCustomAoIFeatures] = useState<
-    Feature<Polygon>[]
-  >([]);
-  const onCustomAoIConfirm = (features: Feature<Polygon>[]) => {
-    update(features);
-    setCustomAoIFeatures(features);
-  };
-
   return (
     <Map id='exploration' projection={projection}>
       {/* Map layers */}
@@ -91,9 +79,8 @@ export function ExplorationMap() {
             trash: true
           } as any
         }
-        customFeatures={customAoIFeatures}
       />
-      <CustomAoIControl onConfirm={onCustomAoIConfirm} />
+      <CustomAoIControl />
       <ResetAoIControl />
       <AnalysisMessageControl />
       <GeocoderControl />