962 refactor and test timeline (#1263)

<!--
Check relevant points but **please do not remove entries**.
-->

## Basics

<!--
These points need to be fulfilled for every PR.
-->

- [ ] The PR is rebased with current master
- [ ] I added a line to [changelog.md](/doc/changelog.md)
- [ ] Details of what I changed are in the commit messages
- [ ] References to issues, e.g. `close #X`, are in the commit messages
and changelog
- [ ] The buildserver is happy

<!--
If you have any troubles fulfilling these criteria, please write about
the trouble as comment in the PR.
We will help you, but we cannot accept PRs that do not fulfill the
basics.
-->

## Checklist

<!--
For documentation fixes, spell checking, and similar none of these
points below need to be checked.
Otherwise please check these points when getting a PR done:
-->

- [ ] I fully described what my PR does in the documentation
- [ ] I fixed all affected documentation
- [ ] I fixed the introduction tour
- [ ] I wrote migrations in a way that they are compatible with already
present data
- [ ] I fixed all affected decisions
- [ ] I added automated tests or a [manual test
protocol](../doc/tests/manual/protocol.md)
- [ ] I added code comments, logging, and assertions as appropriate
- [ ] I translated all strings visible to the user
- [ ] I mentioned [every code or
binary](https://github.com/ElektraInitiative/PermaplanT/blob/master/.reuse/dep5)
not directly written or done by me in [reuse
syntax](https://reuse.software/)
- [ ] I created left-over issues for things that are still to be done
- [ ] Code is conforming to [our Architecture](/doc/architecture)
- [ ] Code is conforming to [our Guidelines](/doc/guidelines)
- [ ] Code is consistent to [our Design Decisions](/doc/decisions)
- [ ] Exceptions to any guidelines are documented

## First Time Checklist

<!--
These points are only relevant when creating a PR the first time.
-->

- [ ] I have installed and I am using [pre-commit
hooks](../doc/contrib/README.md#Hooks)
- [ ] I am using [Tailwind CSS
Linting](https://tailwindcss.com/blog/introducing-linting-for-tailwindcss-intellisense)

## Review

<!--
Reviewers can copy&check the following to their review.
Also the checklist above can be used.
But also the PR creator should check these points when getting a PR
done:
-->

- [ ] I've tested the code
- [ ] I've read through the whole code
- [ ] I've read through the whole documentation
- [ ] I've checked conformity to guidelines
- [ ] I've checked conformity to requirements
- [ ] I've checked that the requirements are tested

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;
-  };
 };
 
 /**