Remove fetch of special layers with opacity 0

openforis · Feb 6, 2024 · 39d2c71 · 39d2c71
1 parent 768a191
commit 39d2c71
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 53 deletions.
diff --git a/src/client/pages/Geo/GeoMap/hooks/useFetchAgreementLevelLayer.ts b/src/client/pages/Geo/GeoMap/hooks/useFetchAgreementLevelLayer.ts
@@ -19,33 +19,42 @@ export const useFetchAgreementLevelLayer = (sectionKey: LayerSectionKey, layerKe
   const countSelectedLayers = useCountSectionSelectedLayers({ sectionKey, ignoreAgreementLayer: true })
   const cacheKey = getAgreementLayerCacheKey(sectionState ?? ({} as LayersSectionState))
 
-  useEffect(() => {
-    if (!layerState?.selected) return
-    if (agreementLevel === undefined) {
-      dispatch(GeoActions.setAgreementLevel({ sectionKey, layerKey, level: 1 }))
-      return
-    }
-    if (countSelectedLayers < 2 || agreementLevel > countSelectedLayers) {
-      dispatch(GeoActions.setLayerSelected({ sectionKey, layerKey, selected: false }))
-      dispatch(GeoActions.setAgreementLevel({ sectionKey, layerKey, level: 1 }))
-      return
-    }
+  useEffect(
+    () => {
+      if (!layerState?.selected) return
+      if (agreementLevel === undefined) {
+        dispatch(GeoActions.setAgreementLevel({ sectionKey, layerKey, level: 1 }))
+        return
+      }
+      if (countSelectedLayers < 2 || agreementLevel > countSelectedLayers) {
+        dispatch(GeoActions.setLayerSelected({ sectionKey, layerKey, selected: false }))
+        dispatch(GeoActions.setAgreementLevel({ sectionKey, layerKey, level: 1 }))
+        return
+      }
 
-    const cachedMapId = layerState?.cache?.[cacheKey]
-    if (cachedMapId === undefined) {
-      dispatch(GeoActions.postLayer({ countryIso, sectionKey, layerKey }))
-    } else {
-      dispatch(GeoActions.setLayerMapId({ sectionKey, layerKey, mapId: cachedMapId, drawLayer: true }))
-    }
-  }, [
-    agreementLevel,
-    cacheKey,
-    countSelectedLayers,
-    countryIso,
-    dispatch,
-    layerKey,
-    layerState?.cache,
-    layerState?.selected,
-    sectionKey,
-  ])
+      const cachedMapId = layerState?.cache?.[cacheKey]
+      if (cachedMapId === undefined) {
+        if (layerState?.opacity > 0) {
+          dispatch(GeoActions.postLayer({ countryIso, sectionKey, layerKey }))
+        } else {
+          dispatch(GeoActions.resetLayerStatus({ sectionKey, layerKey }))
+        }
+      } else {
+        dispatch(GeoActions.setLayerMapId({ sectionKey, layerKey, mapId: cachedMapId, drawLayer: true }))
+      }
+    },
+    // Ignore opacity changes:
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      agreementLevel,
+      cacheKey,
+      countSelectedLayers,
+      countryIso,
+      dispatch,
+      layerKey,
+      layerState?.cache,
+      layerState?.selected,
+      sectionKey,
+    ]
+  )
 }
diff --git a/src/client/pages/Geo/GeoMap/hooks/useFetchNewLayerOption.ts b/src/client/pages/Geo/GeoMap/hooks/useFetchNewLayerOption.ts
@@ -18,30 +18,39 @@ export const useFetchNewLayerOption = (
   const layerState = useGeoLayer(sectionKey, layerKey)
   const layerOptionValue = layerState?.options?.[layerOptionKey]
 
-  useEffect(() => {
-    if (!layerState?.selected) return
-    if (layerOptionValue === undefined) {
-      if (layerOptionKey === 'gteTreeCoverPercent') {
-        const gteTreeCoverPercent = layer.options.gteTreeCoverPercent.at(0)
-        dispatch(GeoActions.setLayerGteTreeCoverPercent({ sectionKey, layerKey, gteTreeCoverPercent }))
+  useEffect(
+    () => {
+      if (!layerState?.selected) return
+      if (layerOptionValue === undefined) {
+        if (layerOptionKey === 'gteTreeCoverPercent') {
+          const gteTreeCoverPercent = layer.options.gteTreeCoverPercent.at(0)
+          dispatch(GeoActions.setLayerGteTreeCoverPercent({ sectionKey, layerKey, gteTreeCoverPercent }))
+        }
+        return
       }
-      return
-    }
-    const cachedMapId = layerState.cache?.[layerOptionValue]
-    if (cachedMapId === undefined) {
-      dispatch(GeoActions.postLayer({ countryIso, sectionKey, layerKey }))
-    } else {
-      dispatch(GeoActions.setLayerMapId({ sectionKey, layerKey, mapId: cachedMapId, drawLayer: true }))
-    }
-  }, [
-    countryIso,
-    dispatch,
-    layer,
-    layerKey,
-    layerOptionKey,
-    layerOptionValue,
-    layerState?.cache,
-    layerState?.selected,
-    sectionKey,
-  ])
+      const cachedMapId = layerState.cache?.[layerOptionValue]
+      if (cachedMapId === undefined) {
+        if (layerState?.opacity > 0) {
+          dispatch(GeoActions.postLayer({ countryIso, sectionKey, layerKey }))
+        } else {
+          dispatch(GeoActions.resetLayerStatus({ sectionKey, layerKey }))
+        }
+      } else {
+        dispatch(GeoActions.setLayerMapId({ sectionKey, layerKey, mapId: cachedMapId, drawLayer: true }))
+      }
+    },
+    // Ignore opacity changes:
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      countryIso,
+      dispatch,
+      layer,
+      layerKey,
+      layerOptionKey,
+      layerOptionValue,
+      layerState?.cache,
+      layerState?.selected,
+      sectionKey,
+    ]
+  )
 }