feat: add map api comm (no tests)

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

 /* eslint-disable no-magic-numbers */
+import { BASE_MAP_IMAGES_URL } from '@/constants';
 import { OPTIONS } from '@/constants/map';
+import { currentBackgroundImagePathSelector } from '@/redux/backgrounds/background.selectors';
 import { mapDataPositionSelector, mapDataSizeSelector } from '@/redux/map/map.selectors';
+import { projectDataSelector } from '@/redux/project/project.selectors';
 import { Point } from '@/types/map';
 import { usePointToProjection } from '@/utils/map/usePointToProjection';
 import { View } from 'ol';
@@ -18,6 +21,8 @@ interface UseOlMapConfigResult {
 export const useOlMapConfig = (): UseOlMapConfigResult => {
   const mapPosition = useSelector(mapDataPositionSelector);
   const mapSize = useSelector(mapDataSizeSelector);
+  const currentBackgroundImagePath = useSelector(currentBackgroundImagePathSelector);
+  const project = useSelector(projectDataSelector);
   const pointToProjection = usePointToProjection();
 
   const center = useMemo(() => {
@@ -44,15 +49,14 @@ export const useOlMapConfig = (): UseOlMapConfigResult => {
       new TileLayer({
         visible: true,
         source: new XYZ({
-          url: 'https://pdmap.uni.lu/map_images/9d4911bdeeea752f076e57a91d9b1f45/_nested0/{z}/{x}/{y}.PNG',
-          // TODO: build url from data in redux
+          url: `${BASE_MAP_IMAGES_URL}/map_images/${project?.directory}/${currentBackgroundImagePath}/{z}/{x}/{y}.PNG`,
           maxZoom: mapSize.maxZoom,
           minZoom: mapSize.minZoom,
           tileSize: mapSize.tileSize,
           wrapX: OPTIONS.wrapXInTileLayer,
         }),
       }),
-    [mapSize],
+    [mapSize, currentBackgroundImagePath, project],
   );
 
   return {

src/components/Map/MapViewer/utils/init/useFirstStage.ts

+import { PROJECT_ID } from '@/constants';
+import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
+import { getProjectById } from '@/redux/project/project.thunks';
+import { mapLoadingFirstStageInitializedSelector } from '@/redux/root/mapStages.selectors';
+import { useCallback, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+
+export const useFirstStage = (): void => {
+  const dispatch = useAppDispatch();
+  const isInitialized = useSelector(mapLoadingFirstStageInitializedSelector);
+
+  const initProjectData = useCallback((): void => {
+    dispatch(getProjectById(PROJECT_ID));
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (isInitialized) {
+      return;
+    }
+
+    initProjectData();
+  }, [initProjectData, isInitialized]);
+};

src/components/Map/MapViewer/utils/init/useOlMapInit.ts

+import { useFirstStage } from './useFirstStage';
+import { useSecondStage } from './useSecondStage';
+import { useThirdStage } from './useThirdStage';
+
+export const useOlMapInit = (): void => {
+  useFirstStage();
+  useSecondStage();
+  useThirdStage();
+};

src/components/Map/MapViewer/utils/init/useSecondStage.ts

+import { getAllBackgroundsByProjectId } from '@/redux/backgrounds/backgrounds.thunks';
+import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
+import { getAllModelsByProjectId } from '@/redux/models/models.thunks';
+import { getAllPublicOverlaysByProjectId } from '@/redux/overlays/overlays.thunks';
+import { projectDataSelector } from '@/redux/project/project.selectors';
+import {
+  mapLoadingFirstStageCompletedSelector,
+  mapLoadingSecondStageInitializedSelector,
+} from '@/redux/root/mapStages.selectors';
+import { AppDispatch } from '@/redux/store';
+import { Project } from '@/types/models';
+import { useCallback, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+
+const getMapDataAction =
+  (project: Project) =>
+    (dispatch: AppDispatch): void => {
+      dispatch(getAllBackgroundsByProjectId(project.projectId));
+      dispatch(getAllPublicOverlaysByProjectId(project.projectId));
+      dispatch(getAllModelsByProjectId(project.projectId));
+    };
+
+export const useSecondStage = (): void => {
+  const dispatch = useAppDispatch();
+  const project = useSelector(projectDataSelector);
+  const isPreviousCompleted = useSelector(mapLoadingFirstStageCompletedSelector);
+  const isInitialized = useSelector(mapLoadingSecondStageInitializedSelector);
+
+  const initMapData = useCallback((): void => {
+    if (!project) {
+      return;
+    }
+
+    dispatch(getMapDataAction(project));
+  }, [dispatch, project]);
+
+  useEffect(() => {
+    if (!isPreviousCompleted || isInitialized) {
+      return;
+    }
+
+    initMapData();
+  }, [initMapData, isInitialized, isPreviousCompleted]);
+};

src/components/Map/MapViewer/utils/init/useThirdStage.ts

+import { backgroundsDataSelector } from '@/redux/backgrounds/background.selectors';
+import { mapDataSelector } from '@/redux/map/map.selectors';
+import { modelsDataSelector } from '@/redux/models/models.selectors';
+import { mapLoadingAllStagesCompletedSelector } from '@/redux/root/mapStages.selectors';
+import { useHandleMapChange } from '@/utils/map/useHandleMapChange';
+import { useCallback, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+
+const FIRST = 0;
+
+export const useThirdStage = (): void => {
+  const map = useSelector(mapDataSelector);
+  const models = useSelector(modelsDataSelector);
+  const backgrounds = useSelector(backgroundsDataSelector);
+  const loadingCompleted = useSelector(mapLoadingAllStagesCompletedSelector);
+  const handleMapChange = useHandleMapChange();
+
+  const setDefaultMapModelData = useCallback(() => {
+    const defaultBackground = backgrounds?.[FIRST];
+    const defaultModel = models?.[FIRST];
+    if (map.modelId || !defaultModel || !defaultBackground) {
+      return;
+    }
+
+    handleMapChange({
+      model: defaultModel,
+      background: defaultBackground,
+    });
+  }, [backgrounds, models, map, handleMapChange]);
+
+  useEffect(() => {
+    if (!loadingCompleted) {
+      return;
+    }
+
+    setDefaultMapModelData();
+  }, [setDefaultMapModelData, loadingCompleted]);
+};

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

 import Map from 'ol/Map';
 import React, { MutableRefObject, useEffect, useState } from 'react';
 import { MapInstance } from '../MapViewer.types';
-import { useOlMapConfig } from './useOlMapConfig';
-import { useOlMapInit } from './useOlMapInit';
+import { useOlMapConfig } from './config/useOlMapConfig';
+import { useOlMapInit } from './init/useOlMapInit';
 
 interface UseOlMapInput {
   target?: HTMLElement;

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

-/* eslint-disable no-magic-numbers */
-// TODO: Remove mocks and implement communication with API
-
-import { DEFAULT_ZOOM } from '@/constants/map';
-import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
-import { setMapData } from '@/redux/map/map.slice';
-import { useCallback, useEffect } from 'react';
-
-const MOCK_PROJECT = {
-  version: '',
-  disease: {
-    link: 'http://id.nlm.nih.gov/mesh/D010300',
-    type: 'MESH_2012',
-    resource: 'D010300',
-    id: 3211856,
-    annotatorClassName: '',
-  },
-  idObject: 6065,
-  status: 'Ok',
-  directory: '9d4911bdeeea752f076e57a91d9b1f45',
-  progress: 100,
-  notifyEmail: 'ewa.smula@uni.lu',
-  logEntries: true,
-  name: "Parkinson's disease map",
-  sharedInMinervaNet: true,
-  owner: 'ewa.smula',
-  projectId: 'pd_map_winter_23',
-  creationDate: '2023-02-15 16:35:11',
-  mapCanvasType: 'OPEN_LAYERS',
-};
-
-const MOCK_MODEL = {
-  idObject: 5053,
-  width: 26779.25,
-  height: 13503,
-  defaultCenterX: null,
-  defaultCenterY: null,
-  description: '',
-  name: 'Core PD map',
-  defaultZoomLevel: null,
-  tileSize: 256,
-  references: [],
-  authors: [],
-  creationDate: null,
-  modificationDates: [],
-  minZoom: 2,
-  maxZoom: 9,
-};
-
-export const useOlMapInit = (): void => {
-  const dispatch = useAppDispatch();
-
-  const mapInit = useCallback(() => {
-    dispatch(
-      setMapData({
-        meshId: MOCK_PROJECT.disease.resource,
-        modelId: MOCK_MODEL.idObject,
-        size: {
-          width: MOCK_MODEL.width,
-          height: MOCK_MODEL.height,
-          tileSize: MOCK_MODEL.tileSize,
-          minZoom: MOCK_MODEL.minZoom,
-          maxZoom: MOCK_MODEL.maxZoom,
-        },
-        position: {
-          x: MOCK_MODEL.defaultCenterX || MOCK_MODEL.width / 2,
-          y: MOCK_MODEL.defaultCenterY || MOCK_MODEL.height / 2,
-          z: MOCK_MODEL.defaultZoomLevel || DEFAULT_ZOOM,
-        },
-      }),
-    );
-  }, [dispatch]);
-
-  useEffect(() => mapInit(), [mapInit]);
-};

src/utils/map/useHandleMapChange.ts

+import { DEFAULT_ZOOM } from '@/constants/map';
+import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
+import { setMapData } from '@/redux/map/map.slice';
+import { MapBackground, MapModel } from '@/types/models';
+
+interface HandleMapChangeArgs {
+  model: MapModel;
+  background?: MapBackground;
+}
+
+type UseHandleMapChangeFunction = (args: HandleMapChangeArgs) => void;
+
+const HALF = 2;
+
+export const useHandleMapChange = (): UseHandleMapChangeFunction => {
+  const dispatch = useAppDispatch();
+
+  const handleMapChange = ({ model, background }: HandleMapChangeArgs): void => {
+    dispatch(
+      setMapData({
+        modelId: model.idObject,
+        backgroundId: background?.id,
+        size: {
+          width: model.width,
+          height: model.height,
+          tileSize: model.tileSize,
+          minZoom: model.minZoom,
+          maxZoom: model.maxZoom,
+        },
+        position: {
+          x: model.defaultCenterX || model.width / HALF,
+          y: model.defaultCenterY || model.height / HALF,
+          z: model.defaultZoomLevel || DEFAULT_ZOOM,
+        },
+      }),
+    );
+  };
+
+  return handleMapChange;
+};