DBC22-1219: use popup ref when icon clicked

DBC22-1219: use popup ref when icon clicked to prevent popup onClick event got triggered.

Author: bcgov-brwang

src/frontend/src/Components/Map.js

@@ -84,6 +84,7 @@ export default function MapWrapper({
   const hoveredCamera = useRef();
   const hoveredEvent = useRef();
   const locationPinRef = useRef(null);
+  const cameraPopupRef = useRef(null);
 
   // States
   const [layersOpen, setLayersOpen] = useState(false);
@@ -414,6 +415,11 @@ export default function MapWrapper({
           popup.current.getElement().style.top = '40px';
 
           updateClickedCamera(feature);
+
+          if (!cameraPopupRef.current) {
+            cameraPopupRef.current = popup;
+          } 
+          
         }
       } else {
         // if it wasn't a webcam icon, check if it was an event
@@ -753,7 +759,7 @@ export default function MapWrapper({
         />
         <div id="popup-content" className="ol-popup-content">
           {clickedCamera &&
-            getCamPopup(clickedCamera, updateClickedCamera, navigate)
+            getCamPopup(clickedCamera, updateClickedCamera, navigate, cameraPopupRef)
           }
 
           {clickedEvent &&

src/frontend/src/Components/map/mapPopup.js

@@ -43,13 +43,24 @@ function renderCamGroup(camFeature, setClickedCamera) {
   return res;
 }
 
-export function getCamPopup(camFeature, setClickedCamera, navigate) {
+export function getCamPopup(camFeature, setClickedCamera, navigate, cameraPopupRef) {
   const rootCamData = camFeature.getProperties();
 
   const camData = !rootCamData.groupIndex ? rootCamData : rootCamData.camGroup[rootCamData.groupIndex];
+
+  const handlePopupClick = (e) => {
+    if (!cameraPopupRef.current) {
+      navigate(`/cameras/${camData.id}`);
+    }
+    else{
+      cameraPopupRef.current = null;
+      return;      
+    }
+  };
+
   return (
     <div className="popup popup--camera">
-      <div onClick={() => navigate(`/cameras/${camData.id}`)}>
+      <div onClick={handlePopupClick}>
         <div className="popup__title">
           <p className="bold name">{camData.name}</p>
           <p className="bold orientation">{camData.orientation}</p>