diff --git a/src/features/common/Layout/ProjectPropsContext.tsx b/src/features/common/Layout/ProjectPropsContext.tsx index 59ec1b8372..6b7fa8f08e 100644 --- a/src/features/common/Layout/ProjectPropsContext.tsx +++ b/src/features/common/Layout/ProjectPropsContext.tsx @@ -61,6 +61,8 @@ export const ProjectPropsContext = React.createContext({ setPlantLocations: (value: []) => {}, selectedPl: {}, setSelectedPl: (value: {}) => {}, + samplePlantLocation: {}, + setSamplePlantLocation: (value: {}) => {}, zoomLevel: 1, setZoomLevel: (value: number) => {}, satellite: false, @@ -88,6 +90,7 @@ function ProjectPropsProvider({ children }: any): ReactElement { const [project, setProject] = React.useState(null); const [plantLocations, setPlantLocations] = React.useState(null); const [selectedPl, setSelectedPl] = React.useState(null); + const [samplePlantLocation, setSamplePlantLocation] = React.useState(null); const [zoomLevel, setZoomLevel] = React.useState(1); const [showProjects, setShowProjects] = React.useState(true); const [showSingleProject, setShowSingleProject] = React.useState(false); @@ -281,6 +284,8 @@ function ProjectPropsProvider({ children }: any): ReactElement { setPlantLocations, selectedPl, setSelectedPl, + samplePlantLocation, + setSamplePlantLocation, zoomLevel, setZoomLevel, satellite, diff --git a/src/features/projects/components/PlantLocation/PlantLocationDetails.tsx b/src/features/projects/components/PlantLocation/PlantLocationDetails.tsx index d30dd750da..dc3757a33e 100644 --- a/src/features/projects/components/PlantLocation/PlantLocationDetails.tsx +++ b/src/features/projects/components/PlantLocation/PlantLocationDetails.tsx @@ -31,8 +31,12 @@ interface Props { export default function PlantLocationDetails({ plantLocation, }: Props): ReactElement { - const { setSelectedPl, plantLocations } = - React.useContext(ProjectPropsContext); + const { + setSelectedPl, + plantLocations, + setSamplePlantLocation, + setHoveredPl, + } = React.useContext(ProjectPropsContext); const { t, i18n } = useTranslation(['maps']); const [treeCount, setTreeCount] = React.useState(1); const [plantationArea, setPlantationArea] = React.useState(0); @@ -93,6 +97,7 @@ export default function PlantLocationDetails({ }, [plantLocation]); const openSampleTree = (id: any) => { + setHoveredPl(null); if (plantLocation && plantLocation.samplePlantLocations) { for (const key in plantLocation.samplePlantLocations) { if ( @@ -102,7 +107,8 @@ export default function PlantLocationDetails({ ) ) { const element = plantLocation.samplePlantLocations[key]; - if (element.id === id) setSelectedPl(element); + + if (element.id === id) setSamplePlantLocation(element); } } } diff --git a/src/features/projects/components/ProjectsMap.tsx b/src/features/projects/components/ProjectsMap.tsx index a06f6f70e5..70b39d821d 100644 --- a/src/features/projects/components/ProjectsMap.tsx +++ b/src/features/projects/components/ProjectsMap.tsx @@ -43,6 +43,8 @@ export default function ProjectsMap(): ReactElement { hoveredPl, setIsPolygonMenuOpen, setFilterOpen, + setSamplePlantLocation, + samplePlantLocation, } = React.useContext(ProjectPropsContext); const { t } = useTranslation(['maps']); @@ -92,8 +94,7 @@ export default function ProjectsMap(): ReactElement { }; const onMapClick = (e: MapEvent) => { - setSelectedPl(null); - setHoveredPl(null); + setSamplePlantLocation(null); setPopupData({ ...popupData, show: false }); setIsPolygonMenuOpen(false); setFilterOpen(false); @@ -167,7 +168,7 @@ export default function ProjectsMap(): ReactElement { onViewportChange={_onViewportChange} onStateChange={_onStateChange} onClick={onMapClick} - onHover={plIds ? onMapHover : undefined} + onHover={onMapHover} onLoad={() => setLoaded(true)} interactiveLayerIds={plIds ? plIds : undefined} > @@ -204,7 +205,11 @@ export default function ProjectsMap(): ReactElement { offsetTop={-5} tipSize={0} > -
{t('clickForDetails')}
+ {hoveredPl?.hid && selectedPl?.hid !== hoveredPl?.hid && ( +
+ {t('clickForDetails')} +
+ )} )} diff --git a/src/features/projects/components/maps/Location.tsx b/src/features/projects/components/maps/Location.tsx index 29f4cdd28c..5d2186a9eb 100644 --- a/src/features/projects/components/maps/Location.tsx +++ b/src/features/projects/components/maps/Location.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Layer, Marker, Source } from 'react-map-gl'; +import { Marker } from 'react-map-gl'; import styles from '../../styles/ProjectsMap.module.scss'; import ProjectPolygon from './ProjectPolygon'; diff --git a/src/features/projects/components/maps/PlantLocations.tsx b/src/features/projects/components/maps/PlantLocations.tsx index 2654e9a4a3..d0a42b18f4 100644 --- a/src/features/projects/components/maps/PlantLocations.tsx +++ b/src/features/projects/components/maps/PlantLocations.tsx @@ -2,7 +2,6 @@ import React, { ReactElement } from 'react'; import { Layer, Marker } from 'react-map-gl'; import { Source } from 'react-map-gl'; import { ProjectPropsContext } from '../../../common/Layout/ProjectPropsContext'; -import { useRouter } from 'next/router'; import styles from '../../styles/PlantLocation.module.scss'; import * as turf from '@turf/turf'; import { localizedAbbreviatedNumber } from '../../../../utils/getFormattedNumber'; @@ -11,7 +10,6 @@ import { useTranslation } from 'next-i18next'; interface Props {} export default function PlantLocations({}: Props): ReactElement { - const router = useRouter(); const { plantLocations, hoveredPl, @@ -20,12 +18,14 @@ export default function PlantLocations({}: Props): ReactElement { setHoveredPl, viewport, satellite, + setSamplePlantLocation, + samplePlantLocation, } = React.useContext(ProjectPropsContext); const { i18n, t } = useTranslation(['maps', 'common']); const openPl = (pl: any) => { - setSelectedPl(pl); + setSamplePlantLocation(pl); }; const onHover = (pl: Object) => { @@ -186,7 +186,7 @@ export default function PlantLocations({}: Props): ReactElement {
{ - if (plantLocations && selectedPl) { - setPlantPolygonCoordinates(selectedPl?.geometry.coordinates[0]); + if (!selectedPl?.parent) { + if (plantLocations && selectedPl) { + setPlantPolygonCoordinates(selectedPl?.geometry.coordinates[0]); + } } - }, [router, selectedPl, plantLocations]); + }, [selectedPl]); React.useEffect(() => { - if (selectedPl && plantPolygonCoordinates) { + if (selectedPl && plantPolygonCoordinates && !selectedPl?.parent) { router.push(`/${project.slug}?ploc=${selectedPl?.hid}`); } }, [selectedPl, plantPolygonCoordinates]); @@ -78,6 +81,7 @@ export default function Project({ 4000 ); } else if ( + !selectedPl?.parent && plantPolygonCoordinates && plantLocations && router.query.ploc && diff --git a/src/features/projects/screens/SingleProjectDetails.tsx b/src/features/projects/screens/SingleProjectDetails.tsx index 603184aa04..25182f66dc 100644 --- a/src/features/projects/screens/SingleProjectDetails.tsx +++ b/src/features/projects/screens/SingleProjectDetails.tsx @@ -49,6 +49,7 @@ function SingleProjectDetails({}: Props): ReactElement { selectedPl, setHoveredPl, setSelectedPl, + samplePlantLocation, } = useContext(ProjectPropsContext); const screenWidth = window.innerWidth; const screenHeight = window.innerHeight; @@ -82,7 +83,11 @@ function SingleProjectDetails({}: Props): ReactElement { }; const ProjectProps = { - plantLocation: hoveredPl ? hoveredPl : selectedPl, + plantLocation: hoveredPl + ? hoveredPl + : samplePlantLocation + ? samplePlantLocation + : selectedPl, }; const goBack = () => { diff --git a/src/features/projects/styles/PlantLocation.module.scss b/src/features/projects/styles/PlantLocation.module.scss index da1f31e337..c992476791 100644 --- a/src/features/projects/styles/PlantLocation.module.scss +++ b/src/features/projects/styles/PlantLocation.module.scss @@ -131,7 +131,7 @@ position: absolute; z-index: 1; &.singleSelected { - background-color: rgba(0, 122, 73, 1); + background-color: rgba(0, 122, 73, 1); } }