DBC22-5424: separated chain-ups into its own page

Author: ray-oxd

src/frontend/src/App.js

@@ -300,7 +300,8 @@ function App() {
                             <Route path="/my-routes" element={<SavedRoutesPage />} />
                             <Route path="/cameras" element={<CamerasListPage />} />
                             <Route path="/cameras/:id" element={<CameraDetailsPage />} />
-                            <Route path="/delays" element={<EventsListPage />} />
+                            <Route path="/delays" element={<EventsListPage key="/delays" />} />
+                            <Route path="/chain-ups" element={<EventsListPage key="/chain-ups" chainUpsOnly={true} />} />
                             <Route path="/advisories" element={<AdvisoriesListPage />} />
                             <Route path="/advisories/:id/:subid?" element={<AdvisoryDetailsPage />} />
                             <Route path="/bulletins" element={<BulletinsListPage />} />

src/frontend/src/Components/shared/header/Header.js

@@ -192,7 +192,7 @@ export default function Header() {
 
   const handleChainUpsClick = (e) => {
     e.preventDefault();
-    navigate('/delays?chainUpsOnly=true');
+    navigate('/chain-ups');
     setIsCommercialOpen(false);
     onClickActions();
   }
@@ -321,17 +321,17 @@ export default function Header() {
               </LinkContainer>
 
               <div className="commercial-dropdown" ref={commercialDropdownRef}>
-                <Nav.Link 
-                  active={false} 
+                <Nav.Link
+                  active={false}
                   onClick={() => {
                     setIsCommercialOpen(!isCommercialOpen);
                   }}
                   className={isCommercialOpen ? 'open' : ''}
                 >
                   <div className='title'>
                     Commercial
-                    <FontAwesomeIcon 
-                      icon={faChevronDown} 
+                    <FontAwesomeIcon
+                      icon={faChevronDown}
                       className={`chevron-icon ${isCommercialOpen ? 'rotated' : ''}`}
                     />
                   </div>

src/frontend/src/pages/EventsListPage.js

@@ -2,7 +2,7 @@
 import React, { useCallback, useContext, useEffect, useState, useRef } from 'react';
 
 // Routing
-import { createSearchParams, useNavigate, useSearchParams } from 'react-router-dom';
+import { createSearchParams, useNavigate } from 'react-router-dom';
 
 // Redux
 import { useSelector, useDispatch } from 'react-redux';
@@ -30,7 +30,7 @@ import Dropdown from 'react-bootstrap/Dropdown';
 import Button from 'react-bootstrap/Button';
 
 // Internal imports
-import { CMSContext, MapContext, HeaderHeightContext, FilterContext } from '../App';
+import { CMSContext, MapContext, FilterContext } from '../App';
 import { filterAdvisoryByRoute } from "../Components/map/helpers";
 import { getAdvisories, markAdvisoriesAsRead } from '../Components/data/advisories';
 import { getEvents, getEventDetails } from '../Components/data/events';
@@ -82,13 +82,15 @@ const sortEvents = (events, key) => {
   }
 }
 
-export default function EventsListPage() {
+export default function EventsListPage(props) {
   /* Setup */
   document.title = 'DriveBC - Delays';
 
+  // Props
+  const { chainUpsOnly } = props;
+
   // Navigation
   const navigate = useNavigate();
-  const [searchParams] = useSearchParams();
 
   // Redux
   const dispatch = useDispatch();
@@ -104,11 +106,10 @@ export default function EventsListPage() {
   const { cmsContext, setCMSContext } = useContext(CMSContext);
   const { filterContext, setFilterContext } = useContext(FilterContext);
   const { mapContext } = useContext(MapContext);
-  // const { headerHeightContext } = useContext(HeaderHeightContext);
 
   // States
   const getFilterState = () => {
-    if (searchParams.get('chainUpsOnly') === 'true') {
+    if (chainUpsOnly) {
       return {
         'closures': false,
         'majorEvents': false,
@@ -614,8 +615,8 @@ export default function EventsListPage() {
         }
 
         <PageHeader
-          title="Delays"
-          description="Find out if there are any delays that might impact your journey before you go.">
+          title={chainUpsOnly ? 'Commercial chain-ups' : 'Delays'}
+          description={chainUpsOnly ? 'Segments of the highway that require commercial vehicles over 11,794 kg to have chains on.' : 'Find out if there are any delays that might impact your journey before you go.'}>
         </PageHeader>
 
         <Container className="container--sidepanel">
@@ -700,7 +701,7 @@ export default function EventsListPage() {
                       </Button>
                     }
 
-                    {!smallScreen &&
+                    {!smallScreen && !chainUpsOnly &&
                       <div className="type filter-option-btn">
                         <ListFilters
                           disableFeatures={true}
@@ -789,7 +790,7 @@ export default function EventsListPage() {
 
               {(!showLoader && !processedEvents.length) &&
                 <div className="empty-event-display">
-                  <h2>No delays to display</h2>
+                  <h2>{`No ${chainUpsOnly ? 'chain-ups' : 'delays'} to display`}</h2>
 
                   <strong>Do you have a starting location and a destination entered?</strong>
                   <p>Adding a route will narrow down the information for the whole site, including the delays list. There might not be any delays between those two locations.</p>
@@ -847,14 +848,16 @@ export default function EventsListPage() {
 
           <p className="overlay__header bold">List</p>
 
-          <ListFilters
-            disableFeatures={true}
-            enableRoadConditions={false}
-            enableChainUps={true}
-            textOverride={'List'}
-            iconOverride={true}
-            isDelaysPage={true}
-            fullOverlay={true} />
+          {!chainUpsOnly &&
+            <ListFilters
+              disableFeatures={true}
+              enableRoadConditions={false}
+              enableChainUps={true}
+              textOverride={'List'}
+              iconOverride={true}
+              isDelaysPage={true}
+              fullOverlay={true} />
+          }
         </div>
       }