962 refactor and test timeline

doc/changelog.md

@@ -110,6 +110,7 @@ Syntax: `- short text describing the change _(Your Name)_`
 - Added Meeting Agenda&Notes for 11.03.2024 9:00 _(Markus Raab, Jannis)_
 - Added Meeting Agenda&Notes for 25.03.2024 9:00 _(Markus Raab, Moritz)_
 - Added Meeting Agenda&Notes for 02.04.2024 9:00 _(Markus Raab, Lukas)_
+- _()_
 - Added Meeting Agenda&Notes for 08.04.2024 9:00 _(Markus Raab, Filip)_
 - Add 'Christoph Schreiner' as team member _(Christoph Schreiner)_
 - Migrate from Jest to Vitest, update Vite to v5, update Node to 20, .env should be .env.local _(Paul)_
@@ -128,6 +129,9 @@ Syntax: `- short text describing the change _(Your Name)_`
 - Improve documentation of schema.rs patch workflow. _(Jannis @horenso, Christoph @chr_schr)_
 - Prevent propagating enft key on markdown editor _(Daniel Steinkogler)_
 - Enable deletion of selected plants via DEL shortcut _(Daniel Steinkogler)_
+- _()_
+- Refactoring of timeline state and add unit tests _(Daniel Steinkogler)_
+- _()_
 - Fix link to Plant image for Openstreetmap _(Andrei Dinu)_
 - Add key combinations for map geometry _(Daniel Steinkogler)_
 - Add documentation for adding a new field to an entity _(Christoph Schreiner)_

frontend/src/features/map_planning/components/timeline/TimelineDatePicker.test.tsx

@@ -1,8 +1,7 @@
 import { render } from '@testing-library/react';
 import ReactTestUtils, { act } from 'react-dom/test-utils';
 import { createDays, createYearsAndMonths } from '../../hooks/useGetTimelineData';
-import useMapStore from '../../store/MapStore';
-import { UNTRACKED_DEFAULT_STATE, UntrackedMapSlice } from '../../store/MapStoreTypes';
+import { useTimelineStore } from '../../store/TimeLineStore';
 import TimelineDatePicker from './TimelineDatePicker';
 
 const onSelectChange = vi.fn();
@@ -184,21 +183,18 @@ describe('handleYearItemChange', () => {
 });
 
 function setupTimeline() {
-  useMapStore.setState(createStoreWithTimelineData());
+  useTimelineStore.setState(createStoreWithTimelineData());
 }
 
-function createStoreWithTimelineData(): Pick<UntrackedMapSlice, 'untrackedState'> {
+function createStoreWithTimelineData() {
   const { years, months } = createYearsAndMonths(2000, 2021, {}, {});
   const days = createDays(2000, 2021, {});
 
   return {
-    untrackedState: {
-      ...UNTRACKED_DEFAULT_STATE,
-      timeLineEvents: {
-        yearly: years,
-        monthly: months,
-        daily: days,
-      },
+    timeLineEvents: {
+      yearly: years,
+      monthly: months,
+      daily: days,
     },
   };
 }

frontend/src/features/map_planning/components/timeline/TimelineDatePicker.tsx

@@ -1,11 +1,11 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import useMapStore from '../../store/MapStore';
 import {
   TimelineDailyEvent,
   TimelineMonthlyEvent,
   TimelineYearlyEvent,
-} from '../../store/MapStoreTypes';
+  useTimelineStore,
+} from '../../store/TimeLineStore';
 import { getShortMonthNameFromNumber } from '../../utils/date-utils';
 import ItemSliderPicker from './ItemSliderPicker';
 
@@ -33,9 +33,9 @@ type TimelineDatePickerProps = {
 const TimelineDatePicker = ({ onSelectDate, onLoading, defaultDate }: TimelineDatePickerProps) => {
   const { i18n } = useTranslation();
 
-  const daySliderItems = useMapStore((state) => state.untrackedState.timeLineEvents.daily);
-  const monthSliderItems = useMapStore((state) => state.untrackedState.timeLineEvents.monthly);
-  const yearSliderItems = useMapStore((state) => state.untrackedState.timeLineEvents.yearly);
+  const daySliderItems = useTimelineStore((state) => state.timeLineEvents.daily);
+  const monthSliderItems = useTimelineStore((state) => state.timeLineEvents.monthly);
+  const yearSliderItems = useTimelineStore((state) => state.timeLineEvents.yearly);
 
   const defaulttDateObject = new Date(defaultDate);
   const defaultYear = defaulttDateObject.getFullYear();
@@ -257,14 +257,11 @@ const TimelineDatePicker = ({ onSelectDate, onLoading, defaultDate }: TimelineDa
   };
 
   const updateTimeLineVisibleYears = (from: number, to: number) => {
-    useMapStore.setState((state) => ({
+    useTimelineStore.setState((state) => ({
       ...state,
-      untrackedState: {
-        ...state.untrackedState,
-        timeLineVisibleYears: {
-          from,
-          to,
-        },
+      timeLineVisibleYears: {
+        from,
+        to,
       },
     }));
   };
@@ -330,7 +327,7 @@ const TimelineDatePicker = ({ onSelectDate, onLoading, defaultDate }: TimelineDa
   }, [selectedDayItem]);
 
   const updateVisibleYears = useCallback(() => {
-    const timeLineVisibleYears = useMapStore.getState().untrackedState.timeLineVisibleYears;
+    const timeLineVisibleYears = useTimelineStore.getState().timeLineVisibleYears;
     if (yearLeftBoundReached.current) {
       updateTimeLineVisibleYears(timeLineVisibleYears.from - 100, timeLineVisibleYears.to - 100);
       yearLeftBoundReached.current = false;

frontend/src/features/map_planning/layers/plant/actions.ts

@@ -23,12 +23,7 @@ import updateAddDatePlanting, {
 } from '../../api/plantingApi';
 import useMapStore from '../../store/MapStore';
 import { Action, TrackedMapState } from '../../store/MapStoreTypes';
-import {
-  decreaseAddedPlantsForDate,
-  increaseAddedPlantsForDate,
-  timlineEventsUpdateAdedDate,
-  timlineEventsUpdateRemoveDate,
-} from '../../utils/TimelineEventsHelper';
+import { useTimelineStore } from '../../store/TimeLineStore';
 import { filterVisibleObjects } from '../../utils/filterVisibleObjects';
 
 export class CreatePlantAction
@@ -53,7 +48,7 @@ export class CreatePlantAction
 
   apply(state: TrackedMapState): TrackedMapState {
     const timelineDate = useMapStore.getState().untrackedState.timelineDate;
-    increaseAddedPlantsForDate(this._data[0].addDate || timelineDate);
+    useTimelineStore.getState().increaseAddedEventsForDate(this._data[0].addDate || timelineDate);
 
     return {
       ...state,
@@ -108,7 +103,10 @@ export class DeletePlantAction
         (obj) => obj.id === deleteActionPayload.id,
       );
       if (plant?.addDate) {
-        decreaseAddedPlantsForDate(plant.addDate);
+        useTimelineStore.getState().decreaseAddedEventsForDate(plant.addDate);
+      }
+      if (plant?.removeDate) {
+        useTimelineStore.getState().decreaseRemovedEventsForDate(plant.removeDate);
       }
     }
 
@@ -313,7 +311,9 @@ export class UpdateAddDatePlantAction
         (obj) => obj.id === addDateActionPayload.id,
       );
       if (plant?.addDate && addDateActionPayload.addDate) {
-        timlineEventsUpdateAdedDate(plant.addDate, addDateActionPayload.addDate);
+        useTimelineStore
+          .getState()
+          .timelineEventsUpdateAddedDate(plant.addDate, addDateActionPayload.addDate);
       }
     }
 
@@ -453,7 +453,10 @@ export class UpdateRemoveDatePlantAction
       const plant = state.layers.plants.loadedObjects.find(
         (obj) => obj.id === removeDateActionPayload.id,
       );
-      timlineEventsUpdateRemoveDate(plant?.removeDate, removeDateActionPayload.removeDate);
+
+      useTimelineStore
+        .getState()
+        .timelineEventsUpdateRemoveDate(plant?.removeDate, removeDateActionPayload.removeDate);
     }
 
     return {

frontend/src/features/map_planning/routes/MapWrapper.tsx

@@ -20,6 +20,7 @@ import useGetTimeLineData from '../hooks/useGetTimelineData';
 import { useMapId } from '../hooks/useMapId';
 import useMapStore from '../store/MapStore';
 import { handleRemoteAction } from '../store/RemoteActions';
+import { useTimelineStore } from '../store/TimeLineStore';
 import { mapEditorSteps, tourOptions } from '../utils/EditorTour';
 import { ReadOnlyModeContextProvider } from '../utils/ReadOnlyModeContext';
 
@@ -31,7 +32,7 @@ function getDefaultLayer(layerType: LayerType, layers?: LayerDto[]) {
 }
 
 const useInitializeTimeline = (mapId: number) => {
-  const timeLineVisibleYears = useMapStore((state) => state.untrackedState.timeLineVisibleYears);
+  const timeLineVisibleYears = useTimelineStore((state) => state.timeLineVisibleYears);
   const timeLineEvents = useGetTimeLineData(
     mapId,
     timeLineVisibleYears.from,
@@ -40,15 +41,12 @@ const useInitializeTimeline = (mapId: number) => {
 
   useEffect(() => {
     if (timeLineEvents) {
-      useMapStore.setState((state) => ({
+      useTimelineStore.setState((state) => ({
         ...state,
-        untrackedState: {
-          ...state.untrackedState,
-          timeLineEvents: {
-            daily: timeLineEvents.daily,
-            monthly: timeLineEvents.monthly,
-            yearly: timeLineEvents.yearly,
-          },
+        timeLineEvents: {
+          daily: timeLineEvents.daily,
+          monthly: timeLineEvents.monthly,
+          yearly: timeLineEvents.yearly,
         },
       }));
     }

frontend/src/features/map_planning/store/MapStoreTypes.ts

@@ -317,15 +317,6 @@ export const UNTRACKED_DEFAULT_STATE: UntrackedMapState = {
     }),
     {} as UntrackedLayers,
   ),
-  timeLineEvents: {
-    daily: [],
-    monthly: [],
-    yearly: [],
-  },
-  timeLineVisibleYears: {
-    from: new Date().getFullYear() - 100,
-    to: new Date().getFullYear() + 100,
-  },
 };
 
 /**
@@ -394,36 +385,6 @@ export type TrackedPlantLayerState = {
   loadedObjects: PlantingDto[];
 };
 
-export type TimelineDailyEvent = {
-  key: number;
-  year: number;
-  month: number;
-  day: number;
-  added: number;
-  removed: number;
-};
-
-export type TimelineMonthlyEvent = {
-  key: number;
-  year: number;
-  month: number;
-  added: number;
-  removed: number;
-};
-
-export type TimelineYearlyEvent = {
-  key: number;
-  year: number;
-  added: number;
-  removed: number;
-};
-
-export type TimeLineEvents = {
-  daily: TimelineDailyEvent[];
-  monthly: TimelineMonthlyEvent[];
-  yearly: TimelineYearlyEvent[];
-};
-
 export type TrackedBaseLayerState = {
   id: number;
   layerId: number;
@@ -521,11 +482,6 @@ export type UntrackedMapState = {
   tooltipPosition: { x: number; y: number };
   bottomStatusPanelContent: React.ReactNode | null;
   layers: UntrackedLayers;
-  timeLineEvents: TimeLineEvents;
-  timeLineVisibleYears: {
-    from: number;
-    to: number;
-  };
 };
 
 /**