From 2f4491b295dbfea2ebe7df131834f800b6eaa3aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez=20Mu=C3=B1oz?= Date: Mon, 16 Oct 2023 13:18:29 +0200 Subject: [PATCH] syncs protected areas visibility --- .../confirmation-prompt/component.tsx | 2 +- app/hooks/map/index.ts | 31 ----------------- .../project/inventory-panel/wdpas/index.tsx | 24 +++++++++---- .../projects/show/map/legend/hooks/index.ts | 34 +++++++++++++++++-- 4 files changed, 50 insertions(+), 41 deletions(-) diff --git a/app/components/confirmation-prompt/component.tsx b/app/components/confirmation-prompt/component.tsx index b0e6883553..6a7c432e53 100644 --- a/app/components/confirmation-prompt/component.tsx +++ b/app/components/confirmation-prompt/component.tsx @@ -33,7 +33,7 @@ export const ConfirmationPrompt: React.FC = ({ className={cn({ 'my-4 text-sm sm:pr-32': true, 'text-black underline': !!danger, - 'text-gray-100': !danger, + 'text-gray-900': !danger, })} > {description} diff --git a/app/hooks/map/index.ts b/app/hooks/map/index.ts index dd01084a89..d3955ad9df 100644 --- a/app/hooks/map/index.ts +++ b/app/hooks/map/index.ts @@ -688,37 +688,6 @@ export function usePUGridLayer({ // ANALYSIS - GAP ANALYSIS ...(sublayers.includes('features') ? [ - // ...(features?.length - // ? [ - // { - // type: 'fill', - // 'source-layer': 'layer0', - // layout: { - // visibility: getLayerVisibility(FeaturesVisibility), - // }, - // // ...runId && { - // // filter: [ - // // 'all', - // // ['in', `-${runId}-`, ['get', 'valuePosition']], - // // ], - // // }, - // paint: { - // 'fill-color': COLORS.features, - // 'fill-opacity': [ - // 'case', - // [ - // 'any', - // ...features.map((id) => { - // return ['in', id, ['get', 'featureList']]; - // }), - // ], - // 0.5 * FeaturesOpacity, - // 0, - // ], - // }, - // }, - // ] - // : []), ...preHighlightFeatures.map((id) => ({ type: 'fill', 'source-layer': 'layer0', diff --git a/app/layout/project/sidebar/project/inventory-panel/wdpas/index.tsx b/app/layout/project/sidebar/project/inventory-panel/wdpas/index.tsx index 62df611eb0..1d9ed566ec 100644 --- a/app/layout/project/sidebar/project/inventory-panel/wdpas/index.tsx +++ b/app/layout/project/sidebar/project/inventory-panel/wdpas/index.tsx @@ -3,7 +3,7 @@ import { useState, useCallback, useEffect, ChangeEvent } from 'react'; import { useRouter } from 'next/router'; import { useAppDispatch, useAppSelector } from 'store/hooks'; -import { setSelectedWDPAs as setVisibleWDPAs } from 'store/slices/projects/[id]'; +import { setSelectedWDPAs as setVisibleWDPAs, setLayerSettings } from 'store/slices/projects/[id]'; import { useProjectWDPAs } from 'hooks/wdpa'; @@ -28,9 +28,11 @@ const InventoryPanelProtectedAreas = ({ }): JSX.Element => { const dispatch = useAppDispatch(); - const { selectedWDPAs: visibleWDPAs, search } = useAppSelector( - (state) => state['/projects/[id]'] - ); + const { + selectedWDPAs: visibleWDPAs, + search, + layerSettings, + } = useAppSelector((state) => state['/projects/[id]']); const { query } = useRouter(); const { pid } = query as { pid: string }; @@ -78,13 +80,23 @@ const InventoryPanelProtectedAreas = ({ const toggleSeeOnMap = useCallback( (WDPAId: WDPA['id']) => { const newSelectedWDPAs = [...visibleWDPAs]; - if (!newSelectedWDPAs.includes(WDPAId)) { + const isIncluded = newSelectedWDPAs.includes(WDPAId); + if (!isIncluded) { newSelectedWDPAs.push(WDPAId); } else { const i = newSelectedWDPAs.indexOf(WDPAId); newSelectedWDPAs.splice(i, 1); } dispatch(setVisibleWDPAs(newSelectedWDPAs)); + + dispatch( + setLayerSettings({ + id: WDPAId, + settings: { + visibility: !isIncluded, + }, + }) + ); }, [dispatch, visibleWDPAs] ); @@ -108,7 +120,7 @@ const InventoryPanelProtectedAreas = ({ name: wdpa.name, scenarios: wdpa.scenarioUsageCount, isCustom: wdpa.isCustom, - isVisibleOnMap: visibleWDPAs?.includes(wdpa.id), + isVisibleOnMap: layerSettings[wdpa.id]?.visibility ?? false, })); return ( diff --git a/app/layout/projects/show/map/legend/hooks/index.ts b/app/layout/projects/show/map/legend/hooks/index.ts index 2ef3feab85..39b91235c6 100644 --- a/app/layout/projects/show/map/legend/hooks/index.ts +++ b/app/layout/projects/show/map/legend/hooks/index.ts @@ -1,7 +1,11 @@ import { useRouter } from 'next/router'; import { useAppDispatch, useAppSelector } from 'store/hooks'; -import { setSelectedFeatures, setLayerSettings } from 'store/slices/projects/[id]'; +import { + setSelectedFeatures, + setLayerSettings, + setSelectedWDPAs as setVisibleWDPAs, +} from 'store/slices/projects/[id]'; import chroma from 'chroma-js'; @@ -69,7 +73,9 @@ export const useConservationAreasLegend = () => { const { query } = useRouter(); const { pid } = query as { pid: string }; const dispatch = useAppDispatch(); - const { layerSettings } = useAppSelector((state) => state['/projects/[id]']); + const { layerSettings, selectedWDPAs: visibleWDPAs } = useAppSelector( + (state) => state['/projects/[id]'] + ); const protectedAreaQuery = useProjectWDPAs( pid, @@ -82,6 +88,16 @@ export const useConservationAreasLegend = () => { return LEGEND_LAYERS['designated-areas']({ items: protectedAreaQuery?.data, onChangeVisibility: (WDPAId: WDPA['id']) => { + const newSelectedWDPAs = [...visibleWDPAs]; + const isIncluded = newSelectedWDPAs.includes(WDPAId); + if (!isIncluded) { + newSelectedWDPAs.push(WDPAId); + } else { + const i = newSelectedWDPAs.indexOf(WDPAId); + newSelectedWDPAs.splice(i, 1); + } + + dispatch(setVisibleWDPAs(newSelectedWDPAs)); dispatch( setLayerSettings({ id: WDPAId, @@ -107,7 +123,9 @@ export const useFeatureAbundanceLegend = () => { } ); - const { layerSettings } = useAppSelector((state) => state['/projects/[id]']); + const { layerSettings, selectedFeatures: visibleFeatures } = useAppSelector( + (state) => state['/projects/[id]'] + ); const totalItems = projectFeaturesQuery.data?.length || 0; @@ -133,6 +151,16 @@ export const useFeatureAbundanceLegend = () => { onChangeVisibility: (featureId: Feature['id']) => { const { color, amountRange } = items.find(({ id }) => id === featureId) || {}; + const newSelectedFeatures = [...visibleFeatures]; + const isIncluded = newSelectedFeatures.includes(featureId); + if (!isIncluded) { + newSelectedFeatures.push(featureId); + } else { + const i = newSelectedFeatures.indexOf(featureId); + newSelectedFeatures.splice(i, 1); + } + dispatch(setSelectedFeatures(newSelectedFeatures)); + dispatch( setLayerSettings({ id: `feature-abundance-${featureId}`,