Highlight buses on route

app/components/map/markers/BusMarker.tsx

@@ -5,6 +5,8 @@ import BusCallout from '../BusCallout';
 import { getLighterColor } from '../../../utils';
 import { IVehicle } from 'utils/interfaces';
 
+import useAppStore from '../../../stores/useAppStore';
+
 interface Props {
     bus: IVehicle,
     tintColor: string,
@@ -13,6 +15,11 @@ interface Props {
 
 // Bus Marker with icon and callout
 const BusMarker: React.FC<Props> = ({ bus, tintColor, routeName }) => {
+    const selectedRouteDestination = useAppStore(state => state.selectedRouteDestination);
+
+    const busColor = selectedRouteDestination === bus.directionName ? tintColor : '#808080';
+    const borderColor = getLighterColor(busColor);
+
     return (
         <Marker
             key={bus.key}
@@ -22,7 +29,7 @@ const BusMarker: React.FC<Props> = ({ bus, tintColor, routeName }) => {
             pointerEvents="auto"
         >
             {/* Bus Icon on Map*/}
-            <BusMapIcon color={tintColor} borderColor={getLighterColor(tintColor)} heading={bus.location.heading} />
+            <BusMapIcon color={busColor} borderColor={borderColor} heading={bus.location.heading} />
             <BusCallout directionName={bus.directionName} fullPercentage={Math.round(bus.passengersOnboard / bus.passengerCapacity)} amenities={bus.amenities} tintColor={tintColor ?? "#500000"} routeName={routeName} />
         </Marker>
     );

app/components/sheets/RouteDetails.tsx

@@ -23,6 +23,8 @@ const RouteDetails: React.FC<SheetProps> = ({ sheetRef }) => {
     const currentSelectedRoute = useAppStore((state) => state.selectedRoute);
     const clearSelectedRoute = useAppStore((state) => state.clearSelectedRoute);
 
+    const setSelectedRouteDestination = useAppStore(state => state.setSelectedRouteDestination);
+
     const stopEstimates = useAppStore((state) => state.stopEstimates);
     const setStopEstimates = useAppStore(state => state.setStopEstimates);
 
@@ -71,9 +73,15 @@ const RouteDetails: React.FC<SheetProps> = ({ sheetRef }) => {
         if (!currentSelectedRoute) return;
         setSelectedRoute(currentSelectedRoute);
 
+        setSelectedRouteDestination(currentSelectedRoute.directionList[0]?.destination ?? null);
+
         loadStopEstimates();
     }, [currentSelectedRoute])
 
+    useEffect(() => {
+        return () => setSelectedRouteDestination(null);
+    }, []);
+
     async function loadStopEstimates() {
         if (!currentSelectedRoute || !authToken) return;
         let allStops: IStop[] = [];
@@ -115,6 +123,8 @@ const RouteDetails: React.FC<SheetProps> = ({ sheetRef }) => {
 
     const handleSetSelectedDirection = (evt: NativeSyntheticEvent<NativeSegmentedControlIOSChangeEvent>) => {
         setSelectedDirectionIndex(evt.nativeEvent.selectedSegmentIndex);
+
+        setSelectedRouteDestination(selectedRoute?.directionList[evt.nativeEvent.selectedSegmentIndex]?.destination ?? null);
     }
 
     const snapPoints = ['25%', '45%', '85%'];

app/stores/useAppStore.ts

@@ -25,6 +25,9 @@ interface AppState {
     setSelectedRoute: (selectedRoute: IMapRoute) => void,
     clearSelectedRoute: () => void,
 
+    selectedRouteDestination: string | null,
+    setSelectedRouteDestination: (selectedRouteDirection: string | null) => void,
+
     selectedRouteCategory: "favorites" | "all",
     setSelectedRouteCategory: (selectedRouteCategory: "favorites" | "all") => void
 
@@ -82,6 +85,9 @@ const useAppStore = create<AppState>()((set) => ({
         return { selectedRoute: null };
     }),
 
+    selectedRouteDestination: null,
+    setSelectedRouteDestination: (selectedRouteDirection) => set(() => ({ selectedRouteDestination: selectedRouteDirection })),
+
     selectedRouteCategory: 'all',
     setSelectedRouteCategory: (selectedRouteCategory) => set(() => ({ selectedRouteCategory })),