DBC22-642

bcgov · Jun 5, 2024 · 0d84a62 · 0d84a62
1 parent a069b95
commit 0d84a62
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 36 deletions.
diff --git a/src/frontend/src/App.js b/src/frontend/src/App.js
@@ -30,6 +30,8 @@ import '@fortawesome/fontawesome-svg-core/styles.css'
 config.autoAddCss = false
 
 export const MapContext = createContext(null);
+export const CamsContext = createContext(null);
+
 
 function App() {
   function getInitialMapContext() {
@@ -50,29 +52,32 @@ function App() {
   }
 
   const [mapContext, setMapContext] = useState(getInitialMapContext());
+  const [camsContext] = useState({ displayLength: 21, setDisplayLength: (length) => {} });
 
   return (
     <MapContext.Provider value={{ mapContext, setMapContext }}>
-      <div className="App">
-        <Header />
-        <ScrollToTop />
-        <Routes>
-          <Route path="/" element={<MapPage />} />
-          <Route path="/cameras" element={<CamerasListPage />} />
-          <Route path="/cameras/:id" element={<CameraDetailsPage />} />
-          <Route path="/delays" element={<EventsListPage />} />
-          <Route path="/advisories" element={<AdvisoriesListPage />} />
-          <Route path="/advisories/:id" element={<AdvisoryDetailsPage />} />
-          <Route path="/bulletins" element={<BulletinsListPage />} />
-          <Route path="/bulletins/:id" element={<BulletinDetailsPage />} />
-          {/* Catch-all route for 404 errors */}
-          <Route path="*" element={<NotFoundPage />} />
-          <Route path="/problems" element={<ProblemsPage />} />
-          <Route path="/website-problem" element={<div>Website Problem or Suggestion Page</div>} />
-          <Route path="/highway-problem" element={<div>Highway or Bridge Problem Page</div>} />
-          <Route path="/road-electrical-problem" element={<div>Road Electrical Problem Page</div>} />
-        </Routes>
-      </div>
+      <CamsContext.Provider value={{ camsContext }}>
+        <div className="App">
+          <Header />
+          <ScrollToTop />
+          <Routes>
+            <Route path="/" element={<MapPage />} />
+            <Route path="/cameras" element={<CamerasListPage />} />
+            <Route path="/cameras/:id" element={<CameraDetailsPage />} />
+            <Route path="/delays" element={<EventsListPage />} />
+            <Route path="/advisories" element={<AdvisoriesListPage />} />
+            <Route path="/advisories/:id" element={<AdvisoryDetailsPage />} />
+            <Route path="/bulletins" element={<BulletinsListPage />} />
+            <Route path="/bulletins/:id" element={<BulletinDetailsPage />} />
+            {/* Catch-all route for 404 errors */}
+            <Route path="*" element={<NotFoundPage />} />
+            <Route path="/problems" element={<ProblemsPage />} />
+            <Route path="/website-problem" element={<div>Website Problem or Suggestion Page</div>} />
+            <Route path="/highway-problem" element={<div>Highway or Bridge Problem Page</div>} />
+            <Route path="/road-electrical-problem" element={<div>Road Electrical Problem Page</div>} />
+          </Routes>
+        </div>
+      </CamsContext.Provider>
     </MapContext.Provider>
   );
 }

diff --git a/src/frontend/src/Components/cameras/CameraList.js b/src/frontend/src/Components/cameras/CameraList.js
@@ -1,10 +1,10 @@
 // React
-import React, { useEffect, useState } from 'react';
-
+import React, { useContext, useEffect, useState } from 'react';
 // Third party packages
 import InfiniteScroll from 'react-infinite-scroll-component';
 
 // Components and functions
+import { CamsContext } from '../../App.js';
 import HighwayGroup from './HighwayGroup.js';
 
 // Styling
@@ -14,50 +14,55 @@ export default function CameraList(props) {
   // Props
   const { cameras } = props;
 
+  // Contexts
+  const { camsContext } = useContext(CamsContext);
+
   // UseState hooks
   const [displayedCameras, setDisplayedCameras] = useState([]);
 
   // UseEffect hooks and data functions
   const getDisplayedCameras = (length) => {
-    const res = cameras.slice(0, length ? length : displayedCameras.length + 7);
-    setDisplayedCameras(res);
+
+    if (!length) { camsContext.displayLength += 4; }
+    const shown = cameras.slice(0, length ? length : camsContext.displayLength);
+    setDisplayedCameras(shown);
   };
 
   useEffect(() => {
     if (cameras) { // Do nothing until cameras are processed
-      getDisplayedCameras(21); // Load up to 21 cameras at the start
+      getDisplayedCameras(camsContext.displayLength);
     }
   }, [cameras]);
 
   // Rendering
   const groupDisplayedCameras = () => {
     // Group adjacent cams on the same road into  arrays
-    const res = [];
+    const groups = [];
     displayedCameras.forEach((cam) => {
       const highway = cam.highway_display;
 
-      if (res.length == 0 || res[res.length-1]['highway'] !== highway) {
-        res.push({
+      if (groups.length == 0 || groups[groups.length - 1]['highway'] !== highway) {
+        groups.push({
           'highway': highway,
           'cams': []
-        })
+        });
       }
 
-      res[res.length-1]['cams'].push(cam);
+      groups[groups.length - 1]['cams'].push(cam);
     });
 
-    return res;
+    return groups;
   };
 
   const renderHighways = () => {
     const groupedCams = groupDisplayedCameras();
 
-    const res = [];
+    const groups = [];
     for (const {highway, cams} of groupedCams) {
-      res.push(<HighwayGroup key={highway} highway={highway} cams={cams} />);
+      groups.push(<HighwayGroup key={highway} highway={highway} cams={cams} />);
     }
 
-    return res;
+    return groups;
   }
 
   const getHasMore = () => {
@@ -67,7 +72,7 @@ export default function CameraList(props) {
   return (
     <div className="camera-list">
       <InfiniteScroll
-        dataLength={displayedCameras.length}
+        dataLength={camsContext.displayLength}
         next={getDisplayedCameras}
         hasMore={getHasMore}>
 

diff --git a/src/frontend/src/Header.js b/src/frontend/src/Header.js
@@ -24,8 +24,13 @@ export default function Header() {
   const [expanded, setExpanded] = useState(false);
 
   // Component functions
+  const onClickActions = () => {
+    setTimeout(() => setExpanded(false));
+    sessionStorage.setItem('scrollPosition', 0);
+  }
+
   const getNavLink = (title) => {
-    return <Nav.Link active={false} onClick={() => setTimeout(() => setExpanded(false))}>{title}</Nav.Link>
+    return <Nav.Link active={false} onClick={onClickActions}>{title}</Nav.Link>
   };
 
   const xLargeScreen = useMediaQuery('only screen and (min-width : 992px)');