feat(map): improve usage of selectors and types in map module

src/components/Map/MapViewer/utils/useOlMapConfig.ts

 /* eslint-disable no-magic-numbers */
 import { OPTIONS } from '@/constants/map';
-import { mapDataSelector } from '@/redux/map/map.selectors';
+import { mapDataPositionSelector, mapDataSizeSelector } from '@/redux/map/map.selectors';
 import { Point } from '@/types/map';
 import { usePointToProjection } from '@/utils/map/usePointToProjection';
 import { View } from 'ol';
@@ -16,26 +16,27 @@ interface UseOlMapConfigResult {
 }
 
 export const useOlMapConfig = (): UseOlMapConfigResult => {
-  const { data: mapData } = useSelector(mapDataSelector);
+  const mapPosition = useSelector(mapDataPositionSelector);
+  const mapSize = useSelector(mapDataSizeSelector);
   const pointToProjection = usePointToProjection();
 
   const center = useMemo(() => {
     const centerPoint: Point = {
-      x: mapData.position.x,
-      y: mapData.position.y,
+      x: mapPosition.x,
+      y: mapPosition.y,
     };
 
     return pointToProjection(centerPoint);
-  }, [mapData.position, pointToProjection]);
+  }, [mapPosition, pointToProjection]);
 
   const view = useMemo(
     () =>
       new View({
         center,
-        zoom: mapData.position.z,
+        zoom: mapPosition.z,
         showFullExtent: OPTIONS.showFullExtent,
       }),
-    [center, mapData.position],
+    [center, mapPosition],
   );
 
   const tileLayer = useMemo(
@@ -45,13 +46,13 @@ export const useOlMapConfig = (): UseOlMapConfigResult => {
         source: new XYZ({
           url: 'https://pdmap.uni.lu/map_images/9d4911bdeeea752f076e57a91d9b1f45/_nested0/{z}/{x}/{y}.PNG',
           // TODO: build url from data in redux
-          maxZoom: mapData.size.maxZoom,
-          minZoom: mapData.size.minZoom,
-          tileSize: mapData.size.tileSize,
+          maxZoom: mapSize.maxZoom,
+          minZoom: mapSize.minZoom,
+          tileSize: mapSize.tileSize,
           wrapX: OPTIONS.wrapXInTileLayer,
         }),
       }),
-    [mapData.size],
+    [mapSize],
   );
 
   return {

src/redux/map/map.selectors.ts

-import { createSelector } from '@reduxjs/toolkit';
 import { rootSelector } from '@/redux/root/root.selectors';
+import { createSelector } from '@reduxjs/toolkit';
+
+export const mapDataSelector = createSelector(rootSelector, state => state.map.data);
+
+export const mapDataSizeSelector = createSelector(mapDataSelector, map => map.size);
 
-export const mapDataSelector = createSelector(rootSelector, state => state.map);
+export const mapDataPositionSelector = createSelector(mapDataSelector, map => map.position);

src/redux/map/map.types.ts

-import { Loading } from '@/types/loadingState';
+import { FetchDataState } from '@/types/fetchDataState';
 import { Point } from '@/types/map';
 
 export interface MapSize {
@@ -22,8 +22,4 @@ export type MapData = {
   };
 };
 
-export type MapState = {
-  data: MapData;
-  loading: Loading;
-  error: Error;
-};
+export type MapState = FetchDataState<MapData, MapData>;

src/types/fetchDataState.ts

 import { Loading } from './loadingState';
 
-export type FetchDataState<T> = {
-  data: T | undefined;
+export type FetchDataState<T, T2 = undefined> = {
+  data: T | T2;
   loading: Loading;
   error: Error;
 };

src/utils/map/usePointToProjection.ts

 import { LATLNG_FALLBACK } from '@/constants/map';
-import { mapDataSelector } from '@/redux/map/map.selectors';
+import { mapDataSizeSelector } from '@/redux/map/map.selectors';
 import { Point } from '@/types/map';
 import { Coordinate } from 'ol/coordinate';
 import { fromLonLat } from 'ol/proj';
@@ -12,17 +12,17 @@ type UsePointToProjectionResult = (point: Point) => Coordinate;
 type UsePointToProjection = () => UsePointToProjectionResult;
 
 export const usePointToProjection: UsePointToProjection = () => {
-  const map = useSelector(mapDataSelector);
+  const mapSize = useSelector(mapDataSizeSelector);
 
   const pointToProjection = useCallback(
     (point: Point): Coordinate => {
-      const [lng, lat] = pointToLatLng(point, map.data.size);
+      const [lng, lat] = pointToLatLng(point, mapSize);
       const projection = fromLonLat([lng, lat]);
       const isValid = !projection.some(v => Number.isNaN(v));
 
       return isValid ? projection : LATLNG_FALLBACK;
     },
-    [map.data.size],
+    [mapSize],
   );
 
   return pointToProjection;