Feature/f 189 add skeletons for fcs nutrition and ipc accordions

src/components/Map/FcsChoropleth.tsx

@@ -4,6 +4,7 @@ import { useTheme } from 'next-themes';
 import React, { useEffect, useRef } from 'react';
 import { GeoJSON } from 'react-leaflet';
 
+import FcsAccordion from '@/components/Map/FcsAccordion';
 import { useSelectedCountryId } from '@/domain/contexts/SelectedCountryIdContext';
 import { CountryMapData } from '@/domain/entities/country/CountryMapData.ts';
 import { LayerWithFeature } from '@/domain/entities/map/LayerWithFeature.ts';
@@ -18,7 +19,7 @@ import FscCountryChoropleth from './FcsCountryChoropleth';
 export default function FcsChoropleth({
   data,
   countryId,
-  loading,
+  isLoadingCountry,
   regionData,
   countryData,
   countryIso3Data,
@@ -75,13 +76,17 @@ export default function FcsChoropleth({
           <AccordionModalSkeleton />
         </>
       )}
-      {regionData && countryId === selectedCountryId && regionLabelData && (
-        <FscCountryChoropleth
-          regionData={regionData}
+      {countryId === selectedCountryId && (
+        <FcsAccordion
           countryData={countryData}
           countryIso3Data={countryIso3Data}
+          loading={isLoadingCountry}
           countryName={selectedCountryName}
-          loading={loading}
+        />
+      )}
+      {regionData && countryId === selectedCountryId && regionLabelData && (
+        <FscCountryChoropleth
+          regionData={regionData}
           handleBackButtonClick={handleBackClick}
           regionLabelData={regionLabelData}
           countryMapData={data.features[0] as CountryMapData}

src/components/Map/FcsCountryChoropleth.tsx

@@ -4,14 +4,8 @@ import { GeoJSON, useMap } from 'react-leaflet';
 import FscCountryChoroplethProps from '@/domain/props/FcsCountryChoroplethProps';
 import { FcsCountryChoroplethOperations } from '@/operations/map/FcsCountryChoroplethOperations';
 
-import FcsAccordion from './FcsAccordion';
-
 export default function FscCountryChoropleth({
   regionData,
-  countryData,
-  countryIso3Data,
-  countryName,
-  loading,
   regionLabelData,
   countryMapData,
   setRegionLabelTooltips,
@@ -20,12 +14,6 @@ export default function FscCountryChoropleth({
 
   return (
     <div>
-      <FcsAccordion
-        countryData={countryData}
-        countryIso3Data={countryIso3Data}
-        loading={loading}
-        countryName={countryName}
-      />
       <GeoJSON
         data={regionData}
         style={FcsCountryChoroplethOperations.styleFunction}

src/components/Map/IpcMap/IpcAccordion.tsx

@@ -8,7 +8,7 @@ import { cardsWrapperClass } from '@/utils/primitives';
 import { ReactComponent as FoodConsumption } from '../../../../public/Images/FoodConsumption.svg';
 import { ReactComponent as Population } from '../../../../public/Images/Population.svg';
 
-export default function IpcAccordion({ countryData, countryName }: IpcAccordionProps) {
+export default function IpcAccordion({ countryData, countryName, loading }: IpcAccordionProps) {
   const deltaOneMonth = countryData?.fcsMinus1 ? countryData.fcs - countryData.fcsMinus1 : null;
   const deltaThreeMonth = countryData?.fcsMinus3 ? countryData.fcs - countryData.fcsMinus3 : null;
   const hasNoData: boolean =
@@ -20,6 +20,7 @@ export default function IpcAccordion({ countryData, countryName }: IpcAccordionP
         title={countryName ?? undefined}
         accordionModalActive
         maxWidth={600}
+        loading={loading}
         items={[
           {
             title: 'Food Security',

src/components/Map/IpcMap/IpcChoropleth.tsx

@@ -3,14 +3,21 @@ import React from 'react';
 
 import AccordionModalSkeleton from '@/components/Accordions/AccordionModalSkeleton';
 import CountryLoadingLayer from '@/components/Map/CountryLoading';
+import IpcAccordion from '@/components/Map/IpcMap/IpcAccordion';
 import { useSelectedCountryId } from '@/domain/contexts/SelectedCountryIdContext';
 import { useIpcQuery } from '@/domain/hooks/globalHooks';
 import { IpcChoroplethProps } from '@/domain/props/IpcChoroplethProps';
 
 import IpcCountryChoropleth from './IpcCountryChoropleth';
 import IpcGlobalChoropleth from './IpcGlobalChoropleth';
 
-function IpcChoropleth({ countries, countryData, ipcRegionData, selectedCountryName }: IpcChoroplethProps) {
+function IpcChoropleth({
+  countries,
+  countryData,
+  ipcRegionData,
+  selectedCountryName,
+  isLoadingCountry,
+}: IpcChoroplethProps) {
   const { data: ipcData } = useIpcQuery(true);
   const { selectedCountryId, setSelectedCountryId } = useSelectedCountryId();
 
@@ -39,14 +46,10 @@ function IpcChoropleth({ countries, countryData, ipcRegionData, selectedCountryN
           <AccordionModalSkeleton />
         </>
       )}
-
-      {ipcRegionData && (
-        <IpcCountryChoropleth
-          regionIpcData={ipcRegionData}
-          countryData={countryData}
-          countryName={selectedCountryName}
-        />
+      {selectedCountryId && (
+        <IpcAccordion countryData={countryData} countryName={selectedCountryName} loading={isLoadingCountry} />
       )}
+      {ipcRegionData && <IpcCountryChoropleth regionIpcData={ipcRegionData} />}
     </>
   );
 }

src/components/Map/IpcMap/IpcCountryChoropleth.tsx

@@ -5,21 +5,17 @@ import { GeoJSON } from 'react-leaflet';
 import IpcCountryChoroplethProps from '@/domain/props/IpcCountryChoroplethProps';
 import { IpcChoroplethOperations } from '@/operations/map/IpcChoroplethOperations';
 
-import IpcAccordion from './IpcAccordion';
-
-function IpcCountryChoropleth({ regionIpcData, countryData, countryName }: IpcCountryChoroplethProps) {
+function IpcCountryChoropleth({ regionIpcData }: IpcCountryChoroplethProps) {
   const handleCountryFeature = (feature: Feature<Geometry, GeoJsonProperties>, layer: L.Layer) => {
     IpcChoroplethOperations.attachEventsRegion(feature, layer);
   };
   return (
-    <>
-      <IpcAccordion countryData={countryData} countryName={countryName} />
-      <GeoJSON
-        style={IpcChoroplethOperations.ipcCountryStyle}
-        data={regionIpcData}
-        onEachFeature={handleCountryFeature}
-      />
-    </>
+    <GeoJSON
+      style={IpcChoroplethOperations.ipcCountryStyle}
+      data={regionIpcData}
+      onEachFeature={handleCountryFeature}
+    />
   );
 }
+
 export default IpcCountryChoropleth;

src/components/Map/Map.tsx

@@ -42,7 +42,7 @@ export default function Map({ countries, disputedAreas, fcsData, alertData }: Ma
   const [countryData, setCountryData] = useState<CountryData | undefined>();
   const [countryIso3Data, setCountryIso3Data] = useState<CountryIso3Data | undefined>();
   const [regionData, setRegionData] = useState<FeatureCollection<Geometry, GeoJsonProperties> | undefined>();
-  const [countryClickLoading, setCountryClickLoading] = useState<boolean>(false);
+  const [isLoadingCountry, setIsLoadingCountry] = useState<boolean>(false);
   const [regionNutritionData, setRegionNutritionData] = useState<FeatureCollection | undefined>();
   const [ipcRegionData, setIpcRegionData] = useState<FeatureCollection<Geometry, GeoJsonProperties> | undefined>();
   const [selectedCountryName, setSelectedCountryName] = useState<string | undefined>(undefined);
@@ -81,7 +81,7 @@ export default function Map({ countries, disputedAreas, fcsData, alertData }: Ma
         MapOperations.fetchCountryData(
           selectedMapType,
           selectedCountryData,
-          setCountryClickLoading,
+          setIsLoadingCountry,
           setRegionData,
           setCountryData,
           setCountryIso3Data,
@@ -157,7 +157,7 @@ export default function Map({ countries, disputedAreas, fcsData, alertData }: Ma
               key={country.properties.adm0_id}
               countryId={country.properties.adm0_id}
               data={{ type: 'FeatureCollection', features: [country as Feature<Geometry, GeoJsonProperties>] }}
-              loading={countryClickLoading}
+              isLoadingCountry={isLoadingCountry}
               countryData={countryData}
               countryIso3Data={countryIso3Data}
               regionData={regionData}
@@ -185,6 +185,7 @@ export default function Map({ countries, disputedAreas, fcsData, alertData }: Ma
             selectedCountryName={selectedCountryName}
             regionLabelData={regionLabelData}
             setRegionLabelTooltips={setRegionLabelTooltips}
+            isLoadingCountry={isLoadingCountry}
           />
         ))}
 
@@ -206,6 +207,7 @@ export default function Map({ countries, disputedAreas, fcsData, alertData }: Ma
           countryData={countryData}
           ipcRegionData={ipcRegionData}
           selectedCountryName={selectedCountryName}
+          isLoadingCountry={isLoadingCountry}
         />
       )}
 

src/components/Map/NutritionAccordion.tsx

@@ -13,6 +13,7 @@ export default function NutritionAccordion({
   setSelectedNutrient,
   selectedNutrient,
   countryName,
+  loading,
 }: NutritionAccordionProps) {
   return (
     <div className="absolute left-[108px] top-4" style={{ zIndex: 1000 }}>
@@ -21,6 +22,7 @@ export default function NutritionAccordion({
           title={countryName ?? undefined}
           accordionModalActive
           maxWidth={600}
+          loading={loading}
           items={[
             {
               title: 'Micronutrients',

src/components/Map/NutritionChoropleth.tsx

@@ -1,12 +1,14 @@
 import { Feature } from 'geojson';
 import L from 'leaflet';
 import { useTheme } from 'next-themes';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { GeoJSON } from 'react-leaflet';
 
+import NutritionAccordion from '@/components/Map/NutritionAccordion';
 import { useSelectedCountryId } from '@/domain/contexts/SelectedCountryIdContext';
 import { CountryMapData } from '@/domain/entities/country/CountryMapData.ts';
 import { LayerWithFeature } from '@/domain/entities/map/LayerWithFeature.ts';
+import { NutrientType } from '@/domain/enums/NutrientType.ts';
 import { useNutritionQuery } from '@/domain/hooks/globalHooks';
 import NutritionChoroplethProps from '@/domain/props/NutritionChoroplethProps';
 import { MapOperations } from '@/operations/map/MapOperations';
@@ -23,11 +25,13 @@ export default function NutritionChoropleth({
   selectedCountryName,
   regionLabelData,
   setRegionLabelTooltips,
+  isLoadingCountry,
 }: NutritionChoroplethProps) {
   const geoJsonRef = useRef<L.GeoJSON | null>(null);
   const { selectedCountryId, setSelectedCountryId } = useSelectedCountryId();
   const { theme } = useTheme();
   const { data: nutritionData } = useNutritionQuery(true);
+  const [selectedNutrient, setSelectedNutrient] = useState<NutrientType>(NutrientType.MINI_SIMPLE);
 
   // adding the country name as a tooltip to each layer (on hover)
   // the tooltip is not shown if the country is selected or there is no data available for the country
@@ -79,15 +83,23 @@ export default function NutritionChoropleth({
           <AccordionModalSkeleton />
         </>
       )}
+      {countryId === selectedCountryId && (
+        <NutritionAccordion
+          setSelectedNutrient={setSelectedNutrient}
+          selectedNutrient={selectedNutrient}
+          countryName={selectedCountryName}
+          loading={isLoadingCountry}
+        />
+      )}
       {
         // if this country ('countryId') is selected and data is loaded ('regionNutritionData') show Choropleth for all states
         regionNutritionData && countryId === selectedCountryId && regionLabelData && (
           <NutritionStateChoropleth
             regionNutrition={regionNutritionData}
-            countryName={selectedCountryName}
             regionLabelData={regionLabelData}
             setRegionLabelTooltips={setRegionLabelTooltips}
             countryMapData={data.features[0] as CountryMapData}
+            selectedNutrient={selectedNutrient}
           />
         )
       }

src/components/Map/NutritionStateChoropleth.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { GeoJSON, useMap } from 'react-leaflet';
 
 import { LayerWithFeature } from '@/domain/entities/map/LayerWithFeature.ts';
@@ -7,17 +7,14 @@ import { NutritionStateChoroplethProps } from '@/domain/props/NutritionStateProp
 import { MapOperations } from '@/operations/map/MapOperations';
 import NutritionStateChoroplethOperations from '@/operations/map/NutritionStateChoroplethOperations';
 
-import NutritionAccordion from './NutritionAccordion';
-
 export default function NutritionStateChoropleth({
   regionNutrition,
-  countryName,
   setRegionLabelTooltips,
   regionLabelData,
   countryMapData,
+  selectedNutrient,
 }: NutritionStateChoroplethProps) {
   const layersRef = useRef<LayerWithFeature[]>([]);
-  const [selectedNutrient, setSelectedNutrient] = useState<NutrientType>(NutrientType.MINI_SIMPLE);
   const selectedNutrientRef = useRef<NutrientType>(selectedNutrient);
   const map = useMap();
 
@@ -34,30 +31,15 @@ export default function NutritionStateChoropleth({
   }, [selectedNutrient, regionNutrition]);
 
   return (
-    <>
-      <NutritionAccordion
-        setSelectedNutrient={setSelectedNutrient}
-        selectedNutrient={selectedNutrient}
-        countryName={countryName}
-      />
-      {regionNutrition && (
-        <GeoJSON
-          data={regionNutrition}
-          style={(feature) => NutritionStateChoroplethOperations.dynamicStyle(feature, selectedNutrient)}
-          onEachFeature={(feature, layer) => {
-            layersRef.current.push(layer);
-            NutritionStateChoroplethOperations.addNutritionTooltip(layer, feature, selectedNutrient);
-            NutritionStateChoroplethOperations.addHoverEffect(layer);
-            MapOperations.setupRegionLabelTooltip(
-              feature,
-              regionLabelData,
-              countryMapData,
-              map,
-              setRegionLabelTooltips
-            );
-          }}
-        />
-      )}
-    </>
+    <GeoJSON
+      data={regionNutrition}
+      style={(feature) => NutritionStateChoroplethOperations.dynamicStyle(feature, selectedNutrient)}
+      onEachFeature={(feature, layer) => {
+        layersRef.current.push(layer);
+        NutritionStateChoroplethOperations.addNutritionTooltip(layer, feature, selectedNutrient);
+        NutritionStateChoroplethOperations.addHoverEffect(layer);
+        MapOperations.setupRegionLabelTooltip(feature, regionLabelData, countryMapData, map, setRegionLabelTooltips);
+      }}
+    />
   );
 }

src/domain/props/FcsChoroplethProps.ts

@@ -8,7 +8,7 @@ import { CountryIso3Data } from '@/domain/entities/country/CountryIso3Data.ts';
 export default interface FcsChoroplethProps {
   data: FeatureCollection<Geometry, GeoJsonProperties>;
   countryId: number;
-  loading: boolean;
+  isLoadingCountry: boolean;
   regionData?: FeatureCollection<Geometry, GeoJsonProperties>;
   countryData?: CountryData;
   countryIso3Data?: CountryIso3Data;

src/domain/props/FcsCountryChoroplethProps.ts

@@ -3,15 +3,8 @@ import L from 'leaflet';
 
 import { CountryMapData } from '@/domain/entities/country/CountryMapData.ts';
 
-import { CountryData } from '../entities/country/CountryData';
-import { CountryIso3Data } from '../entities/country/CountryIso3Data';
-
 export default interface FscCountryChoroplethProps {
   regionData: FeatureCollection<Geometry, GeoJsonProperties>;
-  countryData?: CountryData;
-  countryIso3Data?: CountryIso3Data;
-  countryName?: string;
-  loading: boolean;
   handleBackButtonClick?: () => void;
   regionLabelData: FeatureCollection<Geometry, GeoJsonProperties>;
   countryMapData: CountryMapData;

src/domain/props/IpcAccordionProps.tsx

@@ -3,4 +3,5 @@ import { CountryData } from '../entities/country/CountryData';
 export default interface IpcAccordionProps {
   countryData: CountryData | undefined;
   countryName?: string;
+  loading: boolean;
 }

src/domain/props/IpcChoroplethProps.tsx

@@ -9,4 +9,5 @@ export interface IpcChoroplethProps {
   countryData?: CountryData;
   ipcRegionData?: FeatureCollection<Geometry, GeoJsonProperties>;
   selectedCountryName?: string;
+  isLoadingCountry: boolean;
 }

src/domain/props/IpcCountryChoroplethProps.tsx

@@ -1,9 +1,5 @@
 import { FeatureCollection, GeoJsonProperties, Geometry } from 'geojson';
 
-import { CountryData } from '../entities/country/CountryData';
-
 export default interface IpcCountryChoroplethProps {
   regionIpcData: FeatureCollection<Geometry, GeoJsonProperties>;
-  countryData: CountryData | undefined;
-  countryName?: string;
 }

src/domain/props/NutritionAccordionProps.tsx

@@ -6,4 +6,5 @@ export default interface NutritionAccordionProps {
   setSelectedNutrient: React.Dispatch<React.SetStateAction<NutrientType>>;
   selectedNutrient: NutrientType;
   countryName?: string;
+  loading: boolean;
 }

src/domain/props/NutritionChoroplethProps.tsx

@@ -8,4 +8,5 @@ export default interface NutritionChoroplethProps {
   selectedCountryName?: string;
   regionLabelData?: FeatureCollection<Geometry, GeoJsonProperties>;
   setRegionLabelTooltips: (tooltips: (prevRegionLabelData: L.Tooltip[]) => L.Tooltip[]) => void;
+  isLoadingCountry: boolean;
 }