Use GlobalMap component in SurgeMap

- Remove unused code

Author: tnagorra

app/src/views/CountryNsOverviewActivities/Map/index.tsx

@@ -337,6 +337,7 @@ function CountryThreeWNationalSocietyProjectsMap(props: Props) {
         <div className={_cs(styles.map, className)}>
             <div className={styles.mapWithLegend}>
                 <GlobalMap
+                    // FIXME: We should use CountryMap instead
                     onAdminZeroFillClick={handleCountryClick}
                 >
                     <MapContainerWithDisclaimer

app/src/views/CountryOngoingActivitiesEmergencies/index.tsx

@@ -519,6 +519,7 @@ export function Component(props: BaseProps) {
                     contentViewType="vertical"
                 >
                     <GlobalMap
+                        // FIXME: We should use CountryMap instead
                         onAdminZeroFillClick={handleCountryClick}
                     >
                         <MapContainerWithDisclaimer

app/src/views/Emergencies/Map/utils.ts

@@ -1,14 +1,11 @@
 import type {
     CircleLayer,
     CirclePaint,
-    FillLayer,
 } from 'mapbox-gl';
 
 import {
     COLOR_BLACK,
     COLOR_BLUE,
-    COLOR_DARK_GREY,
-    COLOR_LIGHT_GREY,
     COLOR_RED,
     COLOR_YELLOW,
 } from '#utils/constants';
@@ -21,18 +18,6 @@ export const RESPONSE_LEVEL_WITHOUT_IFRC_RESPONSE = 0;
 export const RESPONSE_LEVEL_WITH_IFRC_RESPONSE = 1;
 export const RESPONSE_LEVEL_MIXED_RESPONSE = 2;
 
-export const adminFillLayerOptions: Omit<FillLayer, 'id'> = {
-    type: 'fill',
-    paint: {
-        'fill-color': [
-            'case',
-            ['boolean', ['feature-state', 'hovered'], false],
-            COLOR_DARK_GREY,
-            COLOR_LIGHT_GREY,
-        ],
-    },
-};
-
 const circleColor: CirclePaint['circle-color'] = [
     'match',
     ['get', 'responseLevel'],

app/src/views/RegionThreeW/MovementActivitiesMap/index.tsx

@@ -106,7 +106,7 @@ function MovementActivitiesMap(props: Props) {
     const strings = useTranslation(i18n);
     const { regionResponse } = useOutletContext<RegionOutletContext>();
 
-    const countryBounds = useMemo(() => (
+    const regionBounds = useMemo(() => (
         regionResponse ? getBbox(regionResponse.bbox) : undefined
     ), [regionResponse]);
 
@@ -238,7 +238,7 @@ function MovementActivitiesMap(props: Props) {
                     <MapBounds
                         duration={DURATION_MAP_ZOOM}
                         padding={DEFAULT_MAP_PADDING}
-                        bounds={countryBounds}
+                        bounds={regionBounds}
                     />
                     {/* eslint-disable-next-line max-len */}
                     {clickedPointProperties?.lngLat && isDefined(clickedPointProperties.countryId) && (

app/src/views/SurgeOverview/SurgeMap/index.tsx

@@ -23,7 +23,7 @@ import {
     MapSource,
 } from '@togglecorp/re-map';
 
-import BaseMap from '#components/domain/BaseMap';
+import GlobalMap, { type AdminZeroFeatureProperties } from '#components/domain/GlobalMap';
 import Link from '#components/Link';
 import MapContainerWithDisclaimer from '#components/MapContainerWithDisclaimer';
 import MapPopup from '#components/MapPopup';
@@ -32,7 +32,6 @@ import useInputState from '#hooks/useInputState';
 import { useRequest } from '#utils/restRequest';
 
 import {
-    adminFillLayerOptions,
     basePointLayerOptions,
     getLegendOptions,
     getScaleOptions,
@@ -52,24 +51,8 @@ const sourceOptions: mapboxgl.GeoJSONSourceRaw = {
     type: 'geojson',
 };
 
-interface CountryProperties {
-    country_id: number;
-    disputed: boolean;
-    fdrs: string;
-    independent: boolean;
-    is_deprecated: boolean;
-    iso: string;
-    iso3: string;
-    name: string;
-    name_ar: string;
-    name_es: string;
-    name_fr: string;
-    record_type: number;
-    region_id: number;
-}
-
 interface ClickedPoint {
-    feature: GeoJSON.Feature<GeoJSON.Point, CountryProperties>;
+    properties: AdminZeroFeatureProperties;
     lngLat: mapboxgl.LngLatLike;
 }
 
@@ -206,7 +189,7 @@ function SurgeMap(props: Props) {
         ? {
             eruDeployedEvents: mapToList(
                 listToGroupList(
-                    countryGroupedErus[clickedPointProperties.feature.properties.country_id] ?? [],
+                    countryGroupedErus[clickedPointProperties.properties.country_id] ?? [],
                     (eru) => eru.event.id ?? -1,
                 ),
                 (eru) => ({
@@ -216,8 +199,7 @@ function SurgeMap(props: Props) {
             ),
             personnelDeployedEvents: mapToList(
                 listToGroupList(
-                    // eslint-disable-next-line max-len
-                    countryGroupedPersonnel?.[clickedPointProperties.feature.properties.country_id] ?? [],
+                    countryGroupedPersonnel?.[clickedPointProperties.properties.country_id] ?? [],
                     (personnel) => personnel.event.id,
                 ),
                 (personnel) => ({
@@ -229,11 +211,11 @@ function SurgeMap(props: Props) {
         : undefined;
 
     const handleCountryClick = useCallback((
-        feature: mapboxgl.MapboxGeoJSONFeature,
+        properties: AdminZeroFeatureProperties,
         lngLat: mapboxgl.LngLatLike,
     ) => {
         setClickedPointProperties({
-            feature: feature as unknown as ClickedPoint['feature'],
+            properties,
             lngLat,
         });
         return false;
@@ -250,15 +232,8 @@ function SurgeMap(props: Props) {
         <Container
             className={_cs(styles.surgeMap, className)}
         >
-            <BaseMap
-                baseLayers={(
-                    <MapLayer
-                        layerKey="admin-0"
-                        hoverable
-                        layerOptions={adminFillLayerOptions}
-                        onClick={handleCountryClick}
-                    />
-                )}
+            <GlobalMap
+                onAdminZeroFillClick={handleCountryClick}
             >
                 <MapContainerWithDisclaimer
                     className={styles.mapContainer}
@@ -316,10 +291,10 @@ function SurgeMap(props: Props) {
                             <Link
                                 to="countriesLayout"
                                 urlParams={{
-                                    countryId: clickedPointProperties.feature.properties.country_id,
+                                    countryId: clickedPointProperties.properties.country_id,
                                 }}
                             >
-                                {clickedPointProperties.feature.properties.name}
+                                {clickedPointProperties.properties.name}
                             </Link>
                         )}
                         childrenContainerClassName={styles.popupContent}
@@ -368,7 +343,7 @@ function SurgeMap(props: Props) {
                         )}
                     </MapPopup>
                 )}
-            </BaseMap>
+            </GlobalMap>
         </Container>
     );
 }

app/src/views/SurgeOverview/SurgeMap/utils.ts

@@ -1,14 +1,11 @@
 import type {
     CircleLayer,
     CirclePaint,
-    FillLayer,
 } from 'mapbox-gl';
 
 import {
     COLOR_BLACK,
     COLOR_BLUE,
-    COLOR_DARK_GREY,
-    COLOR_LIGHT_GREY,
     COLOR_RED,
     COLOR_YELLOW,
 } from '#utils/constants';
@@ -24,18 +21,6 @@ const SURGE_TYPE_ERU = 0;
 const SURGE_TYPE_PERSONNEL = 1;
 const SURGE_TYPE_ERU_AND_PERSONNEL = 2;
 
-export const adminFillLayerOptions: Omit<FillLayer, 'id'> = {
-    type: 'fill',
-    paint: {
-        'fill-color': [
-            'case',
-            ['boolean', ['feature-state', 'hovered'], false],
-            COLOR_DARK_GREY,
-            COLOR_LIGHT_GREY,
-        ],
-    },
-};
-
 export function getLegendOptions(strings: i18nType['strings']) {
     const legendOptions = [
         {