DBC22-4119: moved route switch states to parent panel

Author: ray-oxd

src/frontend/src/Components/map/panels/RouteDetailsPanel.js

@@ -1,5 +1,5 @@
 // React
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 // Redux
 import { useSelector } from 'react-redux';
@@ -24,10 +24,56 @@ export default function RouteDetailsPanel(props) {
   const { clickedFeatureRef, updateClickedFeature, showRouteObjs, setShowRouteObjs } = props;
 
   // Redux
-  const { searchedRoutes, selectedRoute } = useSelector(useCallback(memoize(state => ({
-    searchedRoutes: state.routes.searchedRoutes,
-    selectedRoute: state.routes.selectedRoute
-  }))));
+  const {
+    feeds: {
+      events: { filteredList: filteredEvents },
+      ferries: { filteredList: filteredFerries },
+    },
+    advisories: { filteredList: filteredAdvisories },
+    routes: { selectedRoute, searchedRoutes },
+
+  } = useSelector(
+    useCallback(
+      memoize(state => ({
+        feeds: {
+          events: state.feeds.events,
+          ferries: state.feeds.ferries,
+        },
+        advisories: state.cms.advisories,
+        routes: state.routes,
+      })),
+    ),
+  );
+
+  // States
+  const [routeSwitched, setRouteSwitched] = useState(false);
+  const [pendingAdvisories, setPendingAdvisories] = useState(false);
+  const [pendingEvents, setPendingEvents] = useState(false);
+  const [pendingFerries, setPendingFerries] = useState(false);
+
+  // Effects
+  // Mark data as not updating when they finish filtering
+  useEffect(() => {
+    setPendingAdvisories(true);
+  }, [filteredAdvisories]);
+
+  useEffect(() => {
+    setPendingEvents(true);
+  }, [filteredEvents]);
+
+  useEffect(() => {
+    setPendingFerries(true);
+  }, [filteredFerries]);
+
+  // When all data is filtered, rank the object list again
+  useEffect(() => {
+    if (pendingAdvisories && pendingEvents && pendingFerries) {
+      setPendingAdvisories(false);
+      setPendingEvents(false);
+      setPendingFerries(false);
+      setRouteSwitched(false);
+    }
+  }, [pendingAdvisories, pendingEvents, pendingFerries]);
 
   /* Rendering */
   // Sub components
@@ -41,11 +87,21 @@ export default function RouteDetailsPanel(props) {
 
       <div className="popup__content">
         {largeScreen && searchedRoutes.map((route, index) => (
-          <RouteDetails route={route} isPanel={true} key={index} setShowRouteObjs={setShowRouteObjs} />
+          <RouteDetails
+            key={index}
+            route={route}
+            isPanel={true}
+            setShowRouteObjs={setShowRouteObjs}
+            setRouteSwitched={setRouteSwitched} />
         ))}
 
         {(!largeScreen && selectedRoute) &&
-          <RouteDetails route={selectedRoute} isPanel={true} onMobile={true} setShowRouteObjs={setShowRouteObjs} />
+          <RouteDetails
+            route={selectedRoute}
+            isPanel={true}
+            onMobile={true}
+            setShowRouteObjs={setShowRouteObjs}
+            setRouteSwitched={setRouteSwitched} />
         }
       </div>
     </div>
@@ -61,6 +117,7 @@ export default function RouteDetailsPanel(props) {
 
       <div className="popup__content route-object-list">
         <RouteObjectList
+          routeSwitched={routeSwitched}
           setShowRouteObjs={setShowRouteObjs}
           clickedFeatureRef={clickedFeatureRef}
           updateClickedFeature={updateClickedFeature} />

src/frontend/src/Components/routing/RouteDetails.js

@@ -56,7 +56,7 @@ import 'react-loading-skeleton/dist/skeleton.css'
 export default function RouteDetails(props) {
   /* Setup */
   // Props
-  const { route, isPanel, setRouteFavCams, setRouteLabel, onMobile, setShowRouteObjs } = props;
+  const { route, isPanel, setRouteFavCams, setRouteLabel, onMobile, setShowRouteObjs, setRouteSwitched } = props;
 
   // Context
   const { authContext, setAuthContext } = useContext(AuthContext);
@@ -322,6 +322,7 @@ export default function RouteDetails(props) {
 
   const switchRouteHandler = () => {
     if (!compareRoutes(route, selectedRoute)){
+      setRouteSwitched(true);
       dispatch(updateSelectedRoute(route));
     }
   }
@@ -723,8 +724,8 @@ export default function RouteDetails(props) {
             <Button
               variant="light"
               className='view-details-btn'
-              onClick={() => {if (setShowRouteObjs) setShowRouteObjs(true)}}
-              onKeyDown={() => {if (setShowRouteObjs) setShowRouteObjs(true)}}>
+              onClick={() => {setShowRouteObjs(true)}}
+              onKeyDown={() => {setShowRouteObjs(true)}}>
 
               View Details
               <FontAwesomeIcon icon={faChevronRight}/>

src/frontend/src/Components/routing/RouteObjectList.js

@@ -45,7 +45,7 @@ export default function RouteObjectList(props) {
   const largeScreen = useMediaQuery('only screen and (min-width : 768px)');
 
   // Props
-  const { setShowRouteObjs, clickedFeatureRef, updateClickedFeature } = props;
+  const { routeSwitched, setShowRouteObjs, clickedFeatureRef, updateClickedFeature } = props;
 
   // Context
   const { authContext, setAuthContext } = useContext(AuthContext);
@@ -82,9 +82,6 @@ export default function RouteObjectList(props) {
   const [showSavePopup, setShowSavePopup] = useState(false);
   const [routeMapImg, setRouteMapImg] = useState(); // for map snapshot
   const [objList, setObjList] = useState([]);
-  const [pendingAdvisories, setPendingAdvisories] = useState(false);
-  const [pendingEvents, setPendingEvents] = useState(false);
-  const [pendingFerries, setPendingFerries] = useState(false);
 
   // Effects
   useEffect(() => {
@@ -98,25 +95,13 @@ export default function RouteObjectList(props) {
     }
   }, [authContext, pendingAction]);
 
-  // Mark data as not updating when they finish filtering
-  useEffect(() => {
-    setPendingAdvisories(true);
-  }, [filteredAdvisories]);
-
-  useEffect(() => {
-    setPendingEvents(true);
-  }, [filteredEvents]);
-
-  useEffect(() => {
-    setPendingFerries(true);
-  }, [filteredFerries]);
-
   // When all data is filtered, rank the object list again
   useEffect(() => {
-    if (pendingAdvisories && pendingEvents && pendingFerries) {
+    // Only rank when route has finished switching
+    if (!routeSwitched) {
       rankObjectList();
     }
-  }, [pendingAdvisories, pendingEvents, pendingFerries]);
+  }, [routeSwitched]);
 
   /* Helpers */
   const toggleAuthModal = (action) => {
@@ -137,9 +122,6 @@ export default function RouteObjectList(props) {
     });
 
     setObjList(projectedObjs);
-    setPendingAdvisories(false);
-    setPendingEvents(false);
-    setPendingFerries(false);
   }
 
   const resetPopup = () => {
@@ -219,7 +201,7 @@ export default function RouteObjectList(props) {
   }
 
   const getObjectList = () => {
-    if (pendingAdvisories || pendingEvents || pendingFerries) {
+    if (routeSwitched) {
       return (
         <div>
           <Skeleton count={5} width={200} />