DBC22-924: moved all camera and highway ordering to FE (#220)

Author: ray-oxd

src/backend/apps/webcam/views.py

@@ -6,7 +6,7 @@
 
 
 class WebcamAPI(CachedListModelMixin):
-    queryset = Webcam.objects.all().order_by("highway", "highway_cam_order", "id")
+    queryset = Webcam.objects.all()
     serializer_class = WebcamSerializer
     cache_key = CacheKey.WEBCAM_LIST
     cache_timeout = CacheTimeout.WEBCAM_LIST

src/frontend/src/Components/cameras/CameraList.js

@@ -14,6 +14,8 @@ import Advisories from '../advisories/Advisories';
 // Styling
 import './CameraList.scss';
 
+const collator = new Intl.Collator(undefined, {numeric: true, sensitivity: 'base'});
+
 export default function CameraList() {
   // UseRef hooks
   const isInitialMount = useRef(true);
@@ -27,15 +29,17 @@ export default function CameraList() {
     const webcamResults = await getWebcams();
     const cameras = groupCameras(webcamResults);
 
+    // Sort cameras by highway number
+    cameras.sort(function(a, b) {
+      return collator.compare(a.highway, b.highway)
+    });
+
     setWebcams(cameras);
 
     isInitialMount.current = false;
   };
 
   const getDisplayedWebcams = () => {
-    webcams.sort((a, b) => {
-      return parseInt(a.highway, 10) - parseInt(b.highway, 10);
-    });
     const res = webcams.slice(0, displayedWebcams.length + 7);
     setDisplayedWebcams(res);
   };
@@ -52,7 +56,7 @@ export default function CameraList() {
   useEffect(() => {
     if (!isInitialMount.current) { // Only run on updates
       getDisplayedWebcams();
-    }        
+    }
   }, [webcams]);
 
   useEffect(() => {
@@ -79,35 +83,48 @@ export default function CameraList() {
   };
 
   const renderWebcams = () => {
-    return Object.entries(mapDisplayedWebcams()).map(([highway, cameras]) => (
-      <div className="highway-group" key={highway}>
-        <Container>
-          <div className="highway-title">
-            <div className="highway-shield-box">
-              {highwayShield(highway)}
+    const groupedCams = mapDisplayedWebcams();
+    const highwayKeys = Object.keys(groupedCams);
+
+    // Render camera groups by highway number
+    highwayKeys.sort(collator.compare);
+
+    return highwayKeys.map((highway) => {
+      const cameras = groupedCams[highway];
+
+      // Render cameras by highway_cam_order
+      cameras.sort((a, b) => a.highway_cam_order - b.highway_cam_order);
+
+      return (
+        <div className="highway-group" key={highway}>
+          <Container>
+            <div className="highway-title">
+              <div className="highway-shield-box">
+                {highwayShield(highway)}
+              </div>
+
+              <div className="highway-name">
+                <p className="highway-name__number">Highway {highway}</p>
+                {highway === '1' &&
+                  <h2 className="highway-name__alias highway-name__alias--green">Trans Canada</h2>
+                }
+                {highway !== '1' &&
+                  <h2 className="highway-name__alias">Highway {highway}</h2>
+                }
+              </div>
             </div>
 
-            <div className="highway-name">
-              <p className="highway-name__number">Highway {highway}</p>
-              {highway === '1' &&
-                <h2 className="highway-name__alias highway-name__alias--green">Trans Canada</h2>
-              }
-              {highway !== '1' &&
-                <h2 className="highway-name__alias">Highway {highway}</h2>
-              }
+            <div className="webcam-group">
+              {cameras.map((camera, id) => (
+                <WebcamCard cameraData={camera} className="webcam" key={id}>
+                </WebcamCard>
+              ))}
             </div>
-          </div>
-
-          <div className="webcam-group">
-            {cameras.map((camera, id) => (
-              <WebcamCard cameraData={camera} className="webcam" key={id}>
-              </WebcamCard>
-            ))}
-          </div>
-        </Container>
-      </div>
-    ));
-  };
+          </Container>
+        </div>
+      );
+    });
+  }
 
   return (
     <div className="camera-list">