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);
}
}