feat: add switching logic when map type get changed (#127)

* feat: add switching logic when map type get changed * fix: fix zoom problem of ipc map and fcs map * fix: replace old zoom out with zoomOut function and fix mapOperations.tsx * fix: move adm1data endpoint to the top and remove isLoading --------- Co-authored-by: Armanpreet Ghotra <[email protected]>
jst-seminar-rostlab-tum · Dec 16, 2024 · b62899b · b62899b
1 parent c26db7f
commit b62899b
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 11 deletions.
diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx
@@ -45,6 +45,7 @@ export default function Map({ countries, disputedAreas, fcsData, alertData }: Ma
   const [regionNutritionData, setRegionNutritionData] = useState<FeatureCollection | undefined>();
   const [ipcRegionData, setIpcRegionData] = useState<FeatureCollection<Geometry, GeoJsonProperties> | undefined>();
   const [selectedCountryName, setSelectedCountryName] = useState<string | undefined>(undefined);
+  const [isDataAvailable, setIsDataAvailable] = useState<boolean>(true);
 
   const onZoomThresholdReached = () => {
     MapOperations.resetSelectedCountryData(
@@ -82,7 +83,8 @@ export default function Map({ countries, disputedAreas, fcsData, alertData }: Ma
           setCountryData,
           setCountryIso3Data,
           setRegionNutritionData,
-          setIpcRegionData
+          setIpcRegionData,
+          setIsDataAvailable
         );
         window.gtag('event', `${selectedCountryData.properties.iso3}_country_selected`, {
           selectedMap: selectedMapType,
@@ -93,6 +95,17 @@ export default function Map({ countries, disputedAreas, fcsData, alertData }: Ma
     }
   }, [selectedCountryId, selectedMapType]);
 
+  useEffect(() => {
+    if (isDataAvailable) {
+      const selectedCountryData = countries.features.find(
+        (country) => country.properties.adm0_id === selectedCountryId
+      );
+      mapRef.current?.fitBounds(L.geoJSON(selectedCountryData as GeoJSON).getBounds(), { animate: true });
+    } else {
+      mapRef.current?.zoomOut(4, { animate: true });
+    }
+  }, [isDataAvailable]);
+
   return (
     <MapContainer
       ref={mapRef}

diff --git a/src/infrastructure/repositories/CountryRepositoryImpl.ts b/src/infrastructure/repositories/CountryRepositoryImpl.ts
@@ -33,7 +33,14 @@ export default class CountryRepositoryImpl implements CountryRepository {
   }
 
   async getRegionIpcData(countryId: number): Promise<RegionIpc> {
-    const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/adm0/${countryId}/ipc.geojson`);
+    const url = `${process.env.NEXT_PUBLIC_API_URL}/adm0/${countryId}/ipc.geojson`;
+
+    const response = await fetch(url);
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch IPC data: HTTP ${response.status} - ${response.statusText}`);
+    }
+
     return response.json();
   }
 }
diff --git a/src/operations/map/MapOperations.tsx b/src/operations/map/MapOperations.tsx
@@ -19,15 +19,20 @@ export class MapOperations {
     setCountryData: (countryData: CountryData | undefined) => void,
     setCountryIso3Data: (iso3Data: CountryIso3Data | undefined) => void,
     setRegionNutritionData: (regionNutritionData: FeatureCollection | undefined) => void,
-    setIpcRegionData: (ipcRegionData: FeatureCollection<Geometry, GeoJsonProperties> | undefined) => void
+    setIpcRegionData: (ipcRegionData: FeatureCollection<Geometry, GeoJsonProperties> | undefined) => void,
+    setIsDataAvailable: (isDataAvailable: boolean) => void
   ) {
     setCountryClickLoading(true);
 
     const countryRepository = container.resolve<CountryRepository>('CountryRepository');
     try {
       if (selectedMapType === GlobalInsight.FOOD) {
         const newRegionData = await countryRepository.getRegionData(selectedCountryData.properties.adm0_id);
-        if (newRegionData && newRegionData.features) {
+        if (Array.isArray(newRegionData) && newRegionData[1] === 404) {
+          setIsDataAvailable(false);
+        } else if (newRegionData && newRegionData.features) {
+          const hasFcs = newRegionData.features.some((feature) => feature.properties?.fcs !== undefined);
+          setIsDataAvailable(hasFcs);
           setRegionData({
             type: 'FeatureCollection',
             features: newRegionData.features as GeoJsonFeature<Geometry, GeoJsonProperties>[],
@@ -36,13 +41,18 @@ export class MapOperations {
       }
 
       if (selectedMapType === GlobalInsight.IPC) {
-        setIpcRegionData(undefined);
-        const newIpcRegionData = await countryRepository.getRegionIpcData(selectedCountryData.properties.adm0_id);
-        if (newIpcRegionData && newIpcRegionData.features) {
-          setIpcRegionData({
-            type: 'FeatureCollection',
-            features: newIpcRegionData?.features as GeoJsonFeature<Geometry, GeoJsonProperties>[],
-          });
+        try {
+          const newIpcRegionData = await countryRepository.getRegionIpcData(selectedCountryData.properties.adm0_id);
+          const hasIpc = newIpcRegionData.features.some((feature) => feature.properties?.ipcPhase !== undefined);
+          setIsDataAvailable(hasIpc);
+          if (newIpcRegionData && newIpcRegionData.features) {
+            setIpcRegionData({
+              type: 'FeatureCollection',
+              features: newIpcRegionData?.features as GeoJsonFeature<Geometry, GeoJsonProperties>[],
+            });
+          }
+        } catch {
+          setIsDataAvailable(false);
         }
       }
 
@@ -60,6 +70,13 @@ export class MapOperations {
         const newRegionNutritionData = await countryRepository.getRegionNutritionData(
           selectedCountryData.properties.adm0_id
         );
+        const hasNutrition = newRegionNutritionData.features.some(
+          (feature) =>
+            feature.properties?.nutrition &&
+            typeof feature.properties.nutrition === 'object' &&
+            Object.keys(feature.properties.nutrition).length > 0
+        );
+        setIsDataAvailable(hasNutrition);
         if (newRegionNutritionData && newRegionNutritionData.features) {
           setRegionNutritionData({
             type: 'FeatureCollection',