DBC22-1302: moved cam popup into its own component

src/frontend/src/Components/Map.js

@@ -24,8 +24,9 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 
 // Components and functions
+import CamPopup from './map/camPopup.js'
 import { getCamerasLayer } from './map/layers/camerasLayer.js';
-import { getCamPopup, getEventPopup, getFerryPopup } from './map/mapPopup.js'
+import { getEventPopup, getFerryPopup } from './map/mapPopup.js'
 import { getEvents } from './data/events.js';
 import { loadEventsLayers } from './map/layers/eventsLayer.js';
 import {
@@ -698,7 +699,9 @@ export default function MapWrapper({
         />
         <div id="popup-content" className="ol-popup-content">
           {clickedCamera &&
-            getCamPopup(clickedCamera, updateClickedCamera, navigate, cameraPopupRef, isPreview)
+            <CamPopup
+              camFeature={clickedCamera}
+              isPreview={isPreview} />
           }
 
           {clickedEvent &&

src/frontend/src/Components/map/camPopup.js

@@ -0,0 +1,101 @@
+// React
+import React, { useEffect, useRef, useState } from 'react';
+
+// Navigation
+import { useNavigate } from 'react-router-dom';
+
+// Third party packages
+import Button from 'react-bootstrap/Button';
+import FriendlyTime from '../FriendlyTime';
+import parse from 'html-react-parser';
+
+import colocatedCamIcon from '../../images/colocated-camera.svg';
+
+export default function CamPopup(props) {
+  // Props
+  const { camFeature, isPreview } = props;
+
+  // Misc
+  const navigate = useNavigate();
+
+  // Refs
+  const isInitialMount = useRef(true);
+
+  // useState hooks
+  const newCam = camFeature.id ? camFeature : camFeature.getProperties();
+  const [rootCam, setRootCam] = useState(newCam);
+  const [camera, setCamera] = useState(newCam);
+  const [camIndex, setCamIndex] = useState(0);
+
+  // useEffect hooks
+  useEffect(() => {
+    const newCam = camFeature.id ? camFeature : camFeature.getProperties();
+    setRootCam(newCam);
+    setCamera(newCam);
+  }, [camFeature]);
+
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      return;
+    }
+
+    setCamera(rootCam.camGroup[camIndex]);
+  }, [camIndex]);
+
+  // Handlers
+  const handlePopupClick = (e) => {
+    if (!isPreview) {
+      navigate(`/cameras/${camera.id}`);
+    }
+  };
+
+  // Rendering
+  function renderCamGroup(currentCamData) {
+    const clickHandler = (i) => {
+      setCamIndex(i);  // Trigger re-render
+    }
+
+    const res = Object.entries(rootCam.camGroup).map(([index, cam]) => {
+      return (
+        <Button className={'camera-direction-btn' + ((camera.orientation == cam.orientation) ? ' current' : '') }
+         key={cam.id} onClick={(event) => {event.stopPropagation(); clickHandler(index)}}>
+          {cam.orientation}
+        </Button>
+      );
+    });
+
+    return res;
+  }
+
+  return (
+    <div className="popup popup--camera">
+      {camera &&
+        <div onClick={handlePopupClick}>
+          <div className="popup__title">
+            <p className="bold name">{camera.name}</p>
+            <p className="bold orientation">{camera.orientation}</p>
+          </div>
+
+          <div className="popup__description">
+            <p>{parse(camera.caption)}</p>
+            <div className="popup__camera-info">
+              <div className="camera-orientations">
+                <img className="colocated-camera-icon" src={colocatedCamIcon} role="presentation" alt="colocated cameras icon" />
+                {renderCamGroup()}
+              </div>
+              <div className="camera-image">
+                <img src={camera.links.imageSource} width='300' />
+
+                <div className="timestamp">
+                  <p className="driveBC">Drive<span>BC</span></p>
+                  <FriendlyTime date={camera.last_update_modified} />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      }
+    </div>
+  );
+}

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

@@ -7,8 +7,6 @@ import EventTypeIcon from '../EventTypeIcon';
 import FriendlyTime from '../FriendlyTime';
 import parse from 'html-react-parser';
 
-import colocatedCamIcon from '../../images/colocated-camera.svg';
-
 const displayCategoryMap = {
   closures: 'Closure',
   majorEvents: 'Major Delay',
@@ -36,67 +34,6 @@ function convertDirection(direction) {
   }
 }
 
-function renderCamGroup(camFeature, setClickedCamera, currentCamData) {
-  const rootCamData = camFeature.ol_uid ? camFeature.getProperties() : camFeature;
-
-  const clickHandler = (i) => {
-    camFeature.setProperties({ groupIndex: i });
-    setClickedCamera(camFeature);  // Trigger re-render
-  }
-
-  const res = Object.entries(rootCamData.camGroup).map(([index, cam]) => {
-    return (
-      <Button className={'camera-direction-btn' + ((currentCamData.orientation == cam.orientation) ? ' current' : '') }
-       key={cam.id} onClick={(event) => {event.stopPropagation(); clickHandler(index)}}>
-        {cam.orientation}
-      </Button>
-    );
-  });
-
-  return res;
-}
-
-export function getCamPopup(camFeature, setClickedCamera, navigate, cameraPopupRef, isPreview) {
-  const rootCamData = camFeature.id ? camFeature : camFeature.getProperties();
-  const camData = !rootCamData.groupIndex ? rootCamData : rootCamData.camGroup[rootCamData.groupIndex];
-
-  const handlePopupClick = (e) => {
-    if (!cameraPopupRef.current && !isPreview) {
-      navigate(`/cameras/${camData.id}`);
-      cameraPopupRef.current = null;
-    }
-  };
-
-  return (
-    <div className="popup popup--camera">
-      <div onClick={handlePopupClick}>
-        <div className="popup__title">
-          <p className="bold name">{camData.name}</p>
-          <p className="bold orientation">{camData.orientation}</p>
-        </div>
-
-        <div className="popup__description">
-          <p>{parse(camData.caption)}</p>
-          <div className="popup__camera-info">
-            <div className="camera-orientations">
-              <img className="colocated-camera-icon" src={colocatedCamIcon} role="presentation" alt="colocated cameras icon" />
-              {renderCamGroup(camFeature, setClickedCamera, camData)}
-            </div>
-            <div className="camera-image">
-              <img src={camData.links.imageSource} width='300' />
-
-              <div className="timestamp">
-                <p className="driveBC">Drive<span>BC</span></p>
-                <FriendlyTime date={camData.last_update_modified} />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
 export function getEventPopup(eventFeature) {
   const eventData = eventFeature.ol_uid ? eventFeature.getProperties() : eventFeature;
   const severity = eventData.severity.toLowerCase();