fix direction selection

Maroon-Rides · Mar 14, 2024 · 7437e3f · 7437e3f
1 parent ff98f7e
commit 7437e3f
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 12 deletions.
diff --git a/app/components/map/MapView.tsx b/app/components/map/MapView.tsx
@@ -36,14 +36,17 @@ const Map: React.FC = () => {
 
 
     function selectRoute(route: IMapRoute, directionKey: string) {
+
+        if (selectedRouteDirection !== directionKey) {
+            setSelectedDirection(directionKey);
+            return;
+        }
+
         if (selectedRoute?.key === route.key) return;
-        console.log(directionKey)
+
         setSelectedRoute(route);
         setDrawnRoutes([route]);
         presentSheet("routeDetails");
-
-        if (selectedRouteDirection !== directionKey)
-            setSelectedDirection(route.key);
 
     }
 

diff --git a/app/components/map/markers/BusMarker.tsx b/app/components/map/markers/BusMarker.tsx
@@ -3,9 +3,7 @@ import { Marker } from 'react-native-maps';
 import BusMapIcon from '../BusMapIcon';
 import BusCallout from '../BusCallout';
 import { IVehicle } from 'utils/interfaces';
-
 import useAppStore from '../../../data/app_state';
-import { getLighterColor } from 'app/utils';
 
 interface Props {
     bus: IVehicle,
@@ -18,10 +16,6 @@ const BusMarker: React.FC<Props> = ({ bus, tintColor, routeName }) => {
     const selectedRouteDirection = useAppStore(state => state.selectedRouteDirection);
     const setSelectedDirection = useAppStore(state => state.setSelectedRouteDirection);
 
-    const busColor = selectedRouteDirection === bus.directionKey ? tintColor : tintColor+"70";
-    const borderColor = selectedRouteDirection === bus.directionKey ? getLighterColor(tintColor) : undefined;
-    const iconColor = selectedRouteDirection === bus.directionKey ? "white" : "#ffffffcc";
-
     //if direction is not selected and route is inactive, then call setSelectedDirection w/ parameter bus.directionKey
     const busDefaultDirection = () => {
         if (selectedRouteDirection !== bus.directionKey)
@@ -43,7 +37,7 @@ const BusMarker: React.FC<Props> = ({ bus, tintColor, routeName }) => {
         >
             {/* Bus Icon on Map*/}
             <BusMapIcon 
-                tintColor={busColor}
+                tintColor={tintColor}
                 heading={bus.location.heading} 
                 active={selectedRouteDirection === bus.directionKey} 
             />
@@ -52,7 +46,7 @@ const BusMarker: React.FC<Props> = ({ bus, tintColor, routeName }) => {
                 directionName={bus.directionName} 
                 fullPercentage={Math.round((bus.passengersOnboard / bus.passengerCapacity)*100)}
                 amenities={bus.amenities} 
-                tintColor={busColor ?? "#500000"} 
+                tintColor={tintColor} 
                 routeName={routeName} 
                 busId={bus.name}
             />

diff --git a/app/components/sheets/RouteDetails.tsx b/app/components/sheets/RouteDetails.tsx
@@ -24,6 +24,7 @@ const RouteDetails: React.FC<SheetProps> = ({ sheetRef }) => {
     const setSelectedRouteDirection = useAppStore(state => state.setSelectedRouteDirection);
     const setSelectedStop = useAppStore(state => state.setSelectedStop);
     const setPoppedUpStopCallout = useAppStore(state => state.setPoppedUpStopCallout);
+    const selectedRouteDirection = useAppStore(state => state.selectedRouteDirection);
     const theme = useAppStore(state => state.theme);
 
     const { data: stopEstimates } = useStopEstimate(
@@ -87,6 +88,18 @@ const RouteDetails: React.FC<SheetProps> = ({ sheetRef }) => {
 
     }, [currentSelectedRoute])
 
+
+    // update the segmented control when the selected direction changes
+    useEffect(() => {
+        if (!selectedRoute) return;
+
+        const directionIndex = selectedRoute.directionList.findIndex(direction => direction.direction.key === selectedRouteDirection);
+
+        if (directionIndex === -1) return;
+
+        setSelectedDirectionIndex(directionIndex);
+    }, [selectedRouteDirection]);
+
     useEffect(() => {
         return () => setSelectedRouteDirection(null);
     }, []);