Fix AA layer loading mechanism

frontend/src/components/MapView/DateSelector/index.tsx

@@ -34,7 +34,9 @@ import { format } from 'date-fns';
 import { leftPanelTabValueSelector } from 'context/leftPanelStateSlice';
 import { updateDateRange } from 'context/mapStateSlice';
 import { getRequestDate } from 'utils/server-utils';
-import { AAAvailableDatesSelector } from 'context/anticipatoryAction/AADroughtStateSlice';
+import { isAnticipatoryActionLayer, isWindowedDates } from 'config/utils';
+import { getAAConfig } from 'context/anticipatoryAction/config';
+import { RootState } from 'context/store';
 import TickSvg from './tick.svg';
 import DateSelectorInput from './DateSelectorInput';
 import TimelineItems from './TimelineItems';
@@ -59,7 +61,9 @@ const calculateStartAndEndDates = (startDate: Date, selectedTab: string) => {
     (selectedTab === Panel.AnticipatoryActionDrought && startDate.getMonth() < 3
       ? 1
       : 0);
-  const startMonth = selectedTab === Panel.AnticipatoryActionDrought ? 3 : 0; // April for anticipatory_action, January otherwise
+
+  const startMonth = isAnticipatoryActionLayer(selectedTab) ? 3 : 0; // April for anticipatory_action, January otherwise
+
   const start = new Date(year, startMonth, 1);
   const end = new Date(year, startMonth + 11, 31);
 
@@ -119,32 +123,56 @@ const DateSelector = memo(() => {
     [availableDates],
   );
 
-  const AAAvailableDates = useSelector(AAAvailableDatesSelector);
+  const AAConfig = useMemo(() => {
+    const anticipatoryLayer = selectedLayers.find(layer =>
+      isAnticipatoryActionLayer(layer.type),
+    );
+    if (anticipatoryLayer) {
+      return getAAConfig(anticipatoryLayer.type as AnticipatoryAction);
+    }
+    return null;
+  }, [selectedLayers]);
 
-  // Create a temporary layer for each AA window
-  const AALayers: DateCompatibleLayerWithDateItems[] = useMemo(
-    () =>
-      AAAvailableDates
-        ? [
-            {
-              id: 'anticipatory_action_window_1',
-              title: 'Window 1',
-              dateItems: AAAvailableDates['Window 1'],
-              type: AnticipatoryAction.drought,
-              opacity: 1,
-            },
-            {
-              id: 'anticipatory_action_window_2',
-              title: 'Window 2',
-              dateItems: AAAvailableDates['Window 2'],
-              type: AnticipatoryAction.drought,
-              opacity: 1,
-            },
-          ]
-        : [],
-    [AAAvailableDates],
+  const AAAvailableDates = useSelector((state: RootState) =>
+    AAConfig ? AAConfig.availableDatesSelector(state) : null,
   );
 
+  // Create a temporary layer for each AA window
+  const AALayers: DateCompatibleLayerWithDateItems[] = useMemo(() => {
+    if (!AAAvailableDates) {
+      return [];
+    }
+
+    if (isWindowedDates(AAAvailableDates)) {
+      return [
+        {
+          id: 'anticipatory_action_window_1',
+          title: 'Window 1',
+          dateItems: AAAvailableDates['Window 1'],
+          type: AnticipatoryAction.drought,
+          opacity: 1,
+        },
+        {
+          id: 'anticipatory_action_window_2',
+          title: 'Window 2',
+          dateItems: AAAvailableDates['Window 2'],
+          type: AnticipatoryAction.drought,
+          opacity: 1,
+        },
+      ];
+    }
+
+    return [
+      {
+        id: 'anticipatory_action_storm',
+        title: 'Anticipatory Action Storm',
+        dateItems: AAAvailableDates,
+        type: AnticipatoryAction.storm,
+        opacity: 1,
+      },
+    ];
+  }, [AAAvailableDates]);
+
   // Replace anticipatory action unique layer by window1 and window2 layers
   // Keep anticipatory actions at the top of the timeline
   const orderedLayers: DateCompatibleLayerWithDateItems[] = useMemo(
@@ -162,7 +190,12 @@ const DateSelector = memo(() => {
           }
           return 0;
         })
-        .map(l => (l.id === 'anticipatory_action_drought' ? AALayers : l))
+        .map(layer => {
+          if (isAnticipatoryActionLayer(layer.type)) {
+            return AALayers.filter(al => al.type === layer.type);
+          }
+          return layer;
+        })
         .flat(),
     [selectedLayers, AALayers],
   );
@@ -337,12 +370,17 @@ const DateSelector = memo(() => {
     );
 
     // All dates in AA windows should be selectable, regardless of overlap
-    if (panelTab === Panel.AnticipatoryActionDrought && AAAvailableDates) {
-      // eslint-disable-next-line fp/no-mutating-methods
-      dates.push(
-        AAAvailableDates?.['Window 1']?.map(d => d.displayDate) ?? [],
-        AAAvailableDates?.['Window 2']?.map(d => d.displayDate) ?? [],
-      );
+    if (isAnticipatoryActionLayer(panelTab) && AAAvailableDates) {
+      if (isWindowedDates(AAAvailableDates)) {
+        // eslint-disable-next-line fp/no-mutating-methods
+        dates.push(
+          AAAvailableDates?.['Window 1']?.map(d => d.displayDate) ?? [],
+          AAAvailableDates?.['Window 2']?.map(d => d.displayDate) ?? [],
+        );
+      } else {
+        // eslint-disable-next-line fp/no-mutating-methods
+        dates.push(AAAvailableDates?.map(d => d.displayDate) ?? []);
+      }
 
       // eslint-disable-next-line fp/no-mutating-methods
       return dates

frontend/src/components/MapView/Layers/AnticipatoryActionStormLayer/index.tsx

@@ -60,7 +60,7 @@ const AnticipatoryActionStormLayer = React.memo(
     useDefaultDate(layer.id);
     const map = useSelector(mapSelector);
     const { viewType, selectedDate } = useSelector(AAFiltersSelector);
-    const AAStormData = useSelector(AADataSelector);
+    const stormData = useSelector(AADataSelector);
     const boundaryLayerState = useSelector(
       layerDataSelector(boundaryLayer.id),
     ) as LayerData<BoundaryLayerProps> | undefined;
@@ -117,8 +117,8 @@ const AnticipatoryActionStormLayer = React.memo(
     }
 
     const timeSeries: any =
-      AAStormData && AAStormData.timeSeries
-        ? enhanceTimeSeries(AAStormData.timeSeries as unknown as TimeSeries)
+      stormData && stormData.timeSeries
+        ? enhanceTimeSeries(stormData.timeSeries as unknown as TimeSeries)
         : null;
 
     function getIconNameByWindType(windType: string) {
@@ -249,7 +249,7 @@ const AnticipatoryActionStormLayer = React.memo(
           .map(feature => {
             const districtName =
               feature.properties?.[boundaryLayer.adminLevelLocalNames[1]];
-            const colorInfo = getDistrictColor(districtName, AAStormData);
+            const colorInfo = getDistrictColor(districtName, stormData);
 
             if (!colorInfo) {
               return null;
@@ -266,9 +266,9 @@ const AnticipatoryActionStormLayer = React.memo(
           })
           .filter(Boolean),
       };
-    }, [boundaryData, AAStormData]);
+    }, [boundaryData, stormData]);
 
-    if (!boundaryData || !AAStormData) {
+    if (!boundaryData || !stormData) {
       return null;
     }
 
@@ -305,7 +305,7 @@ const AnticipatoryActionStormLayer = React.memo(
         {viewType === 'forecast' && (
           <>
             <Source
-              data={AAStormData.activeDistricts?.Moderate?.polygon}
+              data={stormData.activeDistricts?.Moderate?.polygon}
               type="geojson"
             >
               <Layer
@@ -320,7 +320,7 @@ const AnticipatoryActionStormLayer = React.memo(
               />
             </Source>
             <Source
-              data={AAStormData.activeDistricts?.Severe?.polygon}
+              data={stormData.activeDistricts?.Severe?.polygon}
               type="geojson"
             >
               <Layer
@@ -340,7 +340,7 @@ const AnticipatoryActionStormLayer = React.memo(
         {/* Storm Risk Map view */}
         {viewType === 'risk' && (
           <Source
-            data={AAStormData.activeDistricts?.Risk?.polygon}
+            data={stormData.activeDistricts?.Risk?.polygon}
             type="geojson"
           >
             <Layer
@@ -386,11 +386,11 @@ const AnticipatoryActionStormLayer = React.memo(
 
         <AAStormDatePopup />
 
-        {selectedFeature && AAStormData.landfall && selectedDate && (
+        {selectedFeature && stormData.landfall && selectedDate && (
           <AAStormLandfallPopup
             point={selectedFeature.geometry}
             reportDate={selectedFeature.properties?.time}
-            landfallInfo={AAStormData.landfall}
+            landfallInfo={stormData.landfall}
             onClose={() => landfallPopupCloseHandler()}
             timelineDate={selectedDate}
           />

frontend/src/components/MapView/LeftPanel/AnticipatoryActionPanel/AnticipatoryActionDroughtPanel/index.tsx

@@ -21,8 +21,6 @@ import {
 } from 'context/anticipatoryAction/AADroughtStateSlice/types';
 import { AAWindowKeys } from 'config/utils';
 import {
-  AAAvailableDatesSelector,
-  AADataSelector,
   AAFiltersSelector,
   AAMonitoredDistrictsSelector,
   AASelectedDistrictSelector,
@@ -32,20 +30,16 @@ import {
   setAAView,
 } from 'context/anticipatoryAction/AADroughtStateSlice';
 import { dateRangeSelector } from 'context/mapStateSlice/selectors';
-import {
-  getAAAvailableDatesCombined,
-  getRequestDate,
-} from 'utils/server-utils';
 import { getFormattedDate } from 'utils/date-utils';
-import { DateFormat } from 'utils/name-utils';
-import { PanelSize } from 'config/types';
+import { AnticipatoryAction, PanelSize } from 'config/types';
 import { StyledCheckboxLabel, StyledRadioLabel } from './utils';
 import { StyledSelect } from '../utils';
 import DistrictView from './DistrictView/index';
 import HomeTable from './HomeTable';
 import HowToReadModal from '../HowToReadModal';
 import Timeline from './Timeline';
 import Forecast from './Forecast';
+import { useAnticipatoryAction } from '../useAnticipatoryAction';
 
 const isZimbabwe = safeCountry === 'zimbabwe';
 
@@ -67,13 +61,12 @@ function AnticipatoryActionDroughtPanel() {
   const classes = useStyles();
   const dispatch = useDispatch();
   const { t } = useSafeTranslation();
+  const { AAData } = useAnticipatoryAction(AnticipatoryAction.drought);
   const monitoredDistricts = useSelector(AAMonitoredDistrictsSelector);
-  const AAAvailableDates = useSelector(AAAvailableDatesSelector);
   const selectedDistrict = useSelector(AASelectedDistrictSelector);
   const { categories: categoryFilters, selectedIndex } =
     useSelector(AAFiltersSelector);
   const { startDate: selectedDate } = useSelector(dateRangeSelector);
-  const aaData = useSelector(AADataSelector);
   const view = useSelector(AAViewSelector);
   const [indexOptions, setIndexOptions] = React.useState<string[]>([]);
   const [howToReadModalOpen, setHowToReadModalOpen] = React.useState(false);
@@ -89,25 +82,14 @@ function AnticipatoryActionDroughtPanel() {
     if (!selectedDistrict) {
       return;
     }
-    const entries = Object.values(aaData)
+    const entries = Object.values(AAData)
       .map(x => x[selectedDistrict])
       .flat()
       .filter(x => x);
 
     const options = [...new Set(entries.map(x => x.index))];
     setIndexOptions(options);
-  }, [aaData, selectedDistrict]);
-
-  const layerAvailableDates =
-    AAAvailableDates !== undefined
-      ? getAAAvailableDatesCombined(AAAvailableDates)
-      : [];
-  const queryDate = getRequestDate(layerAvailableDates, selectedDate);
-  const date = getFormattedDate(queryDate, DateFormat.Default) as string;
-
-  React.useEffect(() => {
-    dispatch(setAAFilters({ selectedDate: date }));
-  }, [date, dispatch]);
+  }, [AAData, selectedDistrict]);
 
   return (
     <div

frontend/src/components/MapView/LeftPanel/AnticipatoryActionPanel/AnticipatoryActionStormPanel/index.tsx

@@ -12,30 +12,27 @@ import {
 import React from 'react';
 import { useSafeTranslation } from 'i18n';
 import { useDispatch, useSelector } from 'react-redux';
-import {
-  AAAvailableDatesSelector,
-  AADataSelector,
-  setAAFilters,
-} from 'context/anticipatoryAction/AAStormStateSlice';
-import { PanelSize } from 'config/types';
-import { updateDateRange } from 'context/mapStateSlice';
-import { useDefaultDate } from 'utils/useDefaultDate';
+import { setAAFilters } from 'context/anticipatoryAction/AAStormStateSlice';
+import { AnticipatoryAction, PanelSize } from 'config/types';
 import { getFormattedDate } from 'utils/date-utils';
 import { getRequestDate } from 'utils/server-utils';
 import { DateFormat } from 'utils/name-utils';
+import { dateRangeSelector } from 'context/mapStateSlice/selectors';
 import HowToReadModal from '../HowToReadModal';
 import ActivationTrigger from './ActivationTriggerView';
 import { StyledSelect } from '../utils';
+import { useAnticipatoryAction } from '../useAnticipatoryAction';
 
 function AnticipatoryActionStormPanel() {
   const classes = useStyles();
   const dispatch = useDispatch();
   const { t } = useSafeTranslation();
-  const AAAvailableDates = useSelector(AAAvailableDatesSelector);
-  const AAData = useSelector(AADataSelector);
+  const { AAData, AAAvailableDates } = useAnticipatoryAction(
+    AnticipatoryAction.storm,
+  );
   const [howToReadModalOpen, setHowToReadModalOpen] = React.useState(false);
 
-  const selectedDate = useDefaultDate('anticipatory_action_storm');
+  const { startDate: selectedDate } = useSelector(dateRangeSelector);
 
   const [viewType, setViewType] = React.useState<'forecast' | 'risk'>(
     'forecast',
@@ -49,15 +46,10 @@ function AnticipatoryActionStormPanel() {
     dispatch(
       setAAFilters({
         viewType,
-        selectedDate: getFormattedDate(selectedDate, 'default'),
       }),
     );
-    dispatch(updateDateRange({ startDate: selectedDate }));
-  }, [viewType, selectedDate, dispatch]);
-
-  if (!selectedDate) {
-    return null;
-  }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [viewType]);
 
   return (
     <div