diff --git a/src/components/elements/Map-mapbox/Map.tsx b/src/components/elements/Map-mapbox/Map.tsx index 0c193ff9c..ebefc0acb 100644 --- a/src/components/elements/Map-mapbox/Map.tsx +++ b/src/components/elements/Map-mapbox/Map.tsx @@ -16,6 +16,7 @@ import { ModalId } from "@/components/extensive/Modal/ModalConst"; import ModalImageDetails from "@/components/extensive/Modal/ModalImageDetails"; import { LAYERS_NAMES, layersList } from "@/constants/layers"; import { DELETED_POLYGONS } from "@/constants/statuses"; +import { useDashboardContext } from "@/context/dashboard.provider"; import { useLoading } from "@/context/loaderAdmin.provider"; import { useMapAreaContext } from "@/context/mapArea.provider"; import { useModalContext } from "@/context/modal.provider"; @@ -167,6 +168,8 @@ export const MapContainer = ({ const { polygonsData, bbox, setPolygonFromMap, polygonFromMap, sitePolygonData, selectedCountry } = props; const context = useSitePolygonData(); const contextMapArea = useMapAreaContext(); + const dashboardContext = useDashboardContext(); + const { setFilters, dashboardCountries } = dashboardContext ?? {}; const { reloadSiteData } = context ?? {}; const t = useT(); const { mutateAsync } = usePostV2ExportImage(); @@ -246,7 +249,9 @@ export const MapContainer = ({ editPolygonSelected, setEditPolygon, draw.current, - isDashboard + isDashboard, + setFilters, + dashboardCountries ); } }; diff --git a/src/components/elements/Map-mapbox/components/DashboardPopup.tsx b/src/components/elements/Map-mapbox/components/DashboardPopup.tsx index 8fbba3428..8ccda28a3 100644 --- a/src/components/elements/Map-mapbox/components/DashboardPopup.tsx +++ b/src/components/elements/Map-mapbox/components/DashboardPopup.tsx @@ -3,6 +3,7 @@ import { useEffect, useState } from "react"; import { Provider as ReduxProvider } from "react-redux"; import { LAYERS_NAMES } from "@/constants/layers"; +import { CountriesProps } from "@/context/dashboard.provider"; import { fetchGetV2DashboardPolygonDataUuid, fetchGetV2DashboardProjectDataUuid, @@ -24,8 +25,7 @@ type Item = { export const DashboardPopup = (event: any) => { const isoCountry = event?.feature?.properties?.iso; const itemUuid = event?.feature?.properties?.uuid; - - const { addPopupToMap, layerName } = event; + const { addPopupToMap, layerName, setFilters, dashboardCountries } = event; const [items, setItems] = useState([]); const [label, setLabel] = useState(event?.feature?.properties?.country); @@ -114,10 +114,26 @@ export const DashboardPopup = (event: any) => { fetchPolygonData(); } }, [isoCountry, layerName, itemUuid]); + const learnMoreEvent = () => { + if (isoCountry && layerName === LAYERS_NAMES.WORLD_COUNTRIES) { + const selectedCountry = dashboardCountries?.find( + (country: CountriesProps) => country.country_slug === isoCountry + ); + if (selectedCountry) { + setFilters((prevValues: any) => ({ + ...prevValues, + uuid: "", + country: selectedCountry + })); + } + } else if (itemUuid && layerName === LAYERS_NAMES.CENTROIDS) { + setFilters((prevValues: any) => ({ ...prevValues, uuid: itemUuid })); + } + }; return ( - + ); diff --git a/src/components/elements/Map-mapbox/utils.ts b/src/components/elements/Map-mapbox/utils.ts index 1d361f315..e847d4679 100644 --- a/src/components/elements/Map-mapbox/utils.ts +++ b/src/components/elements/Map-mapbox/utils.ts @@ -172,7 +172,9 @@ const handleLayerClick = ( editPolygon: { isOpen: boolean; uuid: string; primary_uuid?: string }, setEditPolygon: (value: { isOpen: boolean; uuid: string; primary_uuid?: string }) => void, layerName?: string, - isDashboard?: string | undefined + isDashboard?: string | undefined, + setFilters?: any, + dashboardCountries?: any ) => { removePopups("POLYGON"); const { lngLat, features } = e; @@ -205,7 +207,9 @@ const handleLayerClick = ( const addPopupToMap = () => { newPopup.addTo(map); }; - root.render(createElement(PopupComponent, { ...commonProps, addPopupToMap, layerName })); + root.render( + createElement(PopupComponent, { ...commonProps, addPopupToMap, layerName, setFilters, dashboardCountries }) + ); } else { newPopup.addTo(map); root.render(createElement(PopupComponent, commonProps)); @@ -411,7 +415,9 @@ export const addPopupsToMap = ( editPolygon: { isOpen: boolean; uuid: string; primary_uuid?: string }, setEditPolygon: (value: { isOpen: boolean; uuid: string; primary_uuid?: string }) => void, draw: MapboxDraw, - isDashboard?: string | undefined + isDashboard?: string | undefined, + setFilters?: any, + dashboardCountries?: any ) => { if (popupComponent) { layersList.forEach((layer: LayerType) => { @@ -425,7 +431,9 @@ export const addPopupsToMap = ( editPolygon, setEditPolygon, draw, - isDashboard + isDashboard, + setFilters, + dashboardCountries ); }); } @@ -442,7 +450,9 @@ export const addPopupToLayer = ( editPolygon: { isOpen: boolean; uuid: string; primary_uuid?: string }, setEditPolygon: (value: { isOpen: boolean; uuid: string; primary_uuid?: string }) => void, draw: MapboxDraw, - isDashboard?: string | undefined + isDashboard?: string | undefined, + setFilters?: any, + dashboardCountries?: any ) => { if (popupComponent) { const { name } = layer; @@ -473,7 +483,9 @@ export const addPopupToLayer = ( editPolygon, setEditPolygon, name, - isDashboard + isDashboard, + setFilters, + dashboardCountries ); }; targetLayers.forEach(targetLayer => { diff --git a/src/pages/dashboard/components/TooltipGridMap.tsx b/src/pages/dashboard/components/TooltipGridMap.tsx index a23e71722..1ee4def3b 100644 --- a/src/pages/dashboard/components/TooltipGridMap.tsx +++ b/src/pages/dashboard/components/TooltipGridMap.tsx @@ -1,5 +1,4 @@ import { useT } from "@transifex/react"; -import { When } from "react-if"; import Text from "@/components/elements/Text/Text"; @@ -11,7 +10,7 @@ export interface TooltipItemProps { export interface TooltipGridProps { label: string; - learnMore?: boolean; + learnMore?: any; isoCountry?: string; items?: TooltipItemProps[]; } @@ -48,12 +47,9 @@ const TooltipGridMap = (props: TooltipGridProps) => { ))} - - - - {t("Learn More")} - - + learnMore()} className="mt-1 text-start text-primary underline" variant="text-12-bold"> + {t("Learn More")} + );