refactor: remove custom control in favor of alertdialog component

src/components/maps/CoordinatePickerMap.tsx

@@ -8,8 +8,7 @@ import { useFormContext } from 'react-hook-form'
 import MapLayersSelector from './MapLayersSelector'
 import AlertDialog from '../ui/micro/AlertDialogue'
 import useResponsive from '@/js/hooks/useResponsive'
-import { MapPin, Crosshair, Trash, FloppyDiskBack } from '@phosphor-icons/react'
-import CustomOverlay from './controls/CustomControl'
+import { MapPin, Crosshair } from '@phosphor-icons/react'
 
 export interface CameraInfo {
  center: {
@@ -49,10 +48,6 @@ export const CoordinatePickerMap: React.FC<CoordinatePickerMapProps> = ({
  const initialCoordinates = initialCenter != null ? { lng: initialCenter[0], lat: initialCenter[1] } : { lng: 0, lat: 0 }
  const { setValue } = useFormContext()
 
- const hasNewSelectedCoord = (): boolean => {
- return newSelectedCoord.lat !== defaultCoords.lat || newSelectedCoord.lng !== defaultCoords.lng
- }
-
  const onLoad = useCallback((e: MapLibreEvent) => {
  if (e.target == null) return
  if (initialCenter != null) {
@@ -99,16 +94,6 @@ export const CoordinatePickerMap: React.FC<CoordinatePickerMapProps> = ({
  }
  }
 
- const handleReset = (): void => {
- // trigger the dialog close if it is open
- if (hasNewSelectedCoord()) {
- if (triggerButtonRef.current != null) {
- triggerButtonRef.current.click()
- }
- setNewSelectedCoord({ lng: 0, lat: 0 })
- }
- }
-
  const anchorClass = isMobile
  ? 'fixed bottom-1/4 left-1/2 transform -translate-x-1/2'
  : 'fixed bottom-1/4 left-1/2 transform -translate-x-1/2'
@@ -138,20 +123,6 @@ export const CoordinatePickerMap: React.FC<CoordinatePickerMapProps> = ({
  <MapLayersSelector emit={updateMapLayer} />
  <ScaleControl unit='imperial' style={{ marginBottom: 10 }} position='bottom-left' />
  <ScaleControl unit='metric' style={{ marginBottom: 0 }} position='bottom-left' />
- {hasNewSelectedCoord() && (
- <CustomOverlay position='top-right'>
- <button onClick={confirmSelection}>
- <FloppyDiskBack size={29} />
- </button>
- </CustomOverlay>
- )}
- {hasNewSelectedCoord() && (
- <CustomOverlay position='top-left'>
- <button onClick={handleReset}>
- <Trash size={29} />
- </button>
- </CustomOverlay>
- )}
  {showFullscreenControl && <FullscreenControl />}
  <GeolocateControl position='top-left' onGeolocate={handleGeolocate} />
  <NavigationControl showCompass={false} position='bottom-right' />