chore: orgUnitLoader fixes

dhis2 · Oct 30, 2024 · 4cfb808 · 4cfb808
1 parent eba2e57
commit 4cfb808
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 44 deletions.
diff --git a/src/hooks/useLayersLoader.js b/src/hooks/useLayersLoader.js
@@ -1,5 +1,5 @@
 import { Analytics, useCachedDataQuery } from '@dhis2/analytics'
-import { useDataEngine } from '@dhis2/app-runtime'
+import { useDataEngine, useConfig } from '@dhis2/app-runtime'
 import { useAlert } from '@dhis2/app-service-alerts'
 import { useState, useEffect } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
@@ -24,6 +24,7 @@ const loaders = {
 }
 
 export const useLayersLoader = () => {
+    const { baseUrl } = useConfig()
     const engine = useDataEngine()
     const [analyticsEngine] = useState(() => Analytics.getAnalytics(engine))
     const { show: showLoaderAlert } = useAlert(
@@ -33,15 +34,7 @@ export const useLayersLoader = () => {
     const { nameProperty } = useCachedDataQuery()
     const { showAlerts } = useLoaderAlerts()
 
-    // only load layers that have not yet been loaded
-    const layers = useSelector((state) =>
-        state.map.mapViews.filter(
-            (layer) =>
-                !layer.isLoading &&
-                (!layer.isLoaded || (layer.showDataTable && !layer.isExtended))
-        )
-    )
-    console.log('jj useLayersLoader with layers', layers)
+    const allLayers = useSelector((state) => state.map.mapViews)
     const dispatch = useDispatch()
 
     useEffect(() => {
@@ -51,33 +44,38 @@ export const useLayersLoader = () => {
                 displayProperty: nameProperty,
                 engine,
                 analyticsEngine,
+                baseUrl,
             })
-
             if (result.alerts) {
                 showAlerts(result.alerts)
             }
-
             dispatch(updateLayer(result))
         }
 
-        layers.forEach((layerConfig) => {
-            const loader = loaders[layerConfig.layer]
+        const unloadedLayers = allLayers.filter(
+            (layer) =>
+                !layer.isLoading &&
+                (!layer.isLoaded || (layer.showDataTable && !layer.isExtended))
+        )
 
+        // only load layers that have not yet been loaded
+        unloadedLayers.forEach((layerConfig) => {
+            const loader = loaders[layerConfig.layer]
             if (!loader) {
                 showLoaderAlert({ layer: layerConfig.layer })
                 return
             }
-
             dispatch(setLayerLoading(layerConfig.id))
             loadLayer(layerConfig, loader)
         })
     }, [
-        layers,
+        allLayers,
         dispatch,
         nameProperty,
         engine,
         analyticsEngine,
         showAlerts,
         showLoaderAlert,
+        baseUrl,
     ])
 }
diff --git a/src/loaders/facilityLoader.js b/src/loaders/facilityLoader.js
@@ -93,12 +93,12 @@ const facilityLoader = async ({ config, engine, nameProperty, baseUrl }) => {
         })
     }
 
-    const { styledFeatures, legend } = getStyledOrgUnits(
+    const { styledFeatures, legend } = getStyledOrgUnits({
         features,
         groupSet,
         config,
-        baseUrl
-    )
+        baseUrl,
+    })
 
     legend.title = name
 

diff --git a/src/loaders/orgUnitLoader.js b/src/loaders/orgUnitLoader.js
@@ -140,19 +140,19 @@ const orgUnitLoader = async ({ config, engine, nameProperty, baseUrl }) => {
 
     const features = addAssociatedGeometries(mainFeatures, associatedGeometries)
 
-    const { styledFeatures, legend } = getStyledOrgUnits(
+    const { styledFeatures, legend } = getStyledOrgUnits({
         features,
         groupSet,
         config,
         baseUrl,
-        orgUnitLevels.organisationUnitLevels.reduce(
+        orgUnitLevels: orgUnitLevels.reduce(
             (obj, item) => ({
                 ...obj,
                 [item.level]: item.name,
             }),
             {}
-        )
-    )
+        ),
+    })
 
     legend.title = name
 

diff --git a/src/util/__tests__/orgUnits.spec.js b/src/util/__tests__/orgUnits.spec.js
@@ -17,14 +17,13 @@ describe('getStyledOrgUnits', () => {
             name: 'GroupSet1',
             organisationUnitGroups: [],
         }
-        const styleParams = { organisationUnitColor: 'red', radiusLow: 10 }
-        const contextPath = '/contextPath'
-        const result = getStyledOrgUnits(
+        const config = { organisationUnitColor: 'red', radiusLow: 10 }
+        const result = getStyledOrgUnits({
             features,
             groupSet,
-            styleParams,
-            contextPath
-        )
+            config,
+            baseUrl: '/baseUrl',
+        })
 
         expect(result.styledFeatures).toHaveLength(1)
         expect(result.styledFeatures[0]).toMatchObject({
@@ -49,7 +48,7 @@ describe('getStyledOrgUnits', () => {
         ]
         const groupSet = { name: 'GroupSet1', organisationUnitGroups: [] }
 
-        const styleParams = { organisationUnitColor: 'red', radiusLow: 10 }
+        const config = { organisationUnitColor: 'red', radiusLow: 10 }
 
         const orgUnitLevels = {
             1: 'Level1',
@@ -58,13 +57,13 @@ describe('getStyledOrgUnits', () => {
             4: 'Level4',
         }
 
-        const result = getStyledOrgUnits(
+        const result = getStyledOrgUnits({
             features,
             groupSet,
-            styleParams,
-            '/contextPath',
-            orgUnitLevels
-        )
+            config,
+            baseUrl: '/contextPath',
+            orgUnitLevels,
+        })
 
         expect(result.styledFeatures).toHaveLength(1)
         expect(result.styledFeatures[0]).toMatchObject({

diff --git a/src/util/orgUnits.js b/src/util/orgUnits.js
@@ -83,14 +83,16 @@ export const getOrgUnitGroupLegendItems = (
               }
     )
 
-/* eslint-disable max-params */
-export const getStyledOrgUnits = (
+export const getStyledOrgUnits = ({
     features = [],
     groupSet = {},
-    { organisationUnitColor = ORG_UNIT_COLOR, radiusLow = ORG_UNIT_RADIUS },
-    contextPath,
-    orgUnitLevels
-) => {
+    config: {
+        organisationUnitColor = ORG_UNIT_COLOR,
+        radiusLow = ORG_UNIT_RADIUS,
+    },
+    baseUrl,
+    orgUnitLevels,
+}) => {
     const {
         name,
         styleType = orgUnitLevels ? STYLE_TYPE_COLOR : STYLE_TYPE_SYMBOL,
@@ -140,7 +142,7 @@ export const getStyledOrgUnits = (
         if (useColor && color) {
             properties.color = hasAdditionalGeometry ? ORG_UNIT_COLOR : color
         } else if (symbol) {
-            properties.iconUrl = `${contextPath}/images/orgunitgroup/${symbol}`
+            properties.iconUrl = `${baseUrl}/images/orgunitgroup/${symbol}`
         }
 
         if (properties.level && levelWeight) {
@@ -161,7 +163,7 @@ export const getStyledOrgUnits = (
     const groupItems = getOrgUnitGroupLegendItems(
         organisationUnitGroups,
         useColor,
-        contextPath
+        baseUrl
     )
 
     const facilityItems =
@@ -183,7 +185,6 @@ export const getStyledOrgUnits = (
         },
     }
 }
-/* eslint-enable max-params */
 
 // Converts "LEVEL-x" to newer "LEVEL-uid" format
 export const translateOrgUnitLevels = (orgUnits, orgUnitLevels = []) => {