samplePlantLocation Bug

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,

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

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}
           >
-            <div className={styles.clickForDetails}>{t('clickForDetails')}</div>
+            {hoveredPl?.hid && selectedPl?.hid !== hoveredPl?.hid && (
+              <div className={styles.clickForDetails}>
+                {t('clickForDetails')}
+              </div>
+            )}
           </Popup>
         )}
       </MapGL>

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';
 

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 {
                               <div
                                 key={`${spl.id}-marker`}
                                 className={`${styles.single} ${
-                                  spl.id === selectedPl?.id
+                                  spl.hid === samplePlantLocation?.hid
                                     ? styles.singleSelected
                                     : ''
                                 }`}

src/features/projects/components/maps/Project.tsx

@@ -30,6 +30,7 @@ export default function Project({
     setRasterData,
     isMobile,
     setSiteViewPort,
+    samplePlantLocation,
   } = React.useContext(ProjectPropsContext);
 
   const { handleError } = React.useContext(ErrorHandlingContext);
@@ -52,13 +53,15 @@ export default function Project({
   }
 
   React.useEffect(() => {
-    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 &&

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 = () => {

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