Merge branch 'main' into starter-projects/stop-callout-upgrades

app/components/map/MapView.tsx

@@ -33,9 +33,9 @@ const Map: React.FC = () => {
         longitudeDelta: 0.01
     };
 
-    function selectRoute(route: IMapRoute) {
+    function selectRoute(route: IMapRoute, directionKey: string) {
         if (selectedRoute?.key === route.key) return;
-
+        console.log(directionKey)
         setSelectedRoute(route);
         setDrawnRoutes([route]);
         presentSheet("routeDetails");
@@ -170,7 +170,7 @@ const Map: React.FC = () => {
                                     tappable={true}
                                     onPress={() => selectRoute(drawnRoute)}
                                     style={{ zIndex: active ? 600 : 300,
-                                             elevation: active ? 600 : 300 }} //made a change here ^
+                                             elevation: active ? 600 : 300 }}
                                 />
                             )
                         })

app/components/sheets/AlertList.tsx

@@ -23,7 +23,7 @@ const AlertList: React.FC<SheetProps> = ({ sheetRef }) => {
     const setSelectedAlert = useAppStore((state) => state.setSelectedAlert);
     const [shownAlerts, setShownAlerts] = useState<IMapServiceInterruption[]>([]);
 
-    const { data: alerts } = useServiceInterruptions()
+    const { data: alerts, isError } = useServiceInterruptions()
 
     // If no route is selected, we're looking at all routes, therefore show all alerts
     // If a route is selected, only show the alerts for that route
@@ -70,11 +70,16 @@ const AlertList: React.FC<SheetProps> = ({ sheetRef }) => {
 
                 <View style={{ height: 1, backgroundColor: theme.divider, marginTop: 8 }} />
 
-                {shownAlerts.length === 0 &&
+                {isError ?
                     <View style={{ alignItems: 'center', paddingTop: 16 }}>
-                        <Text style={{color: theme.subtitle }}>There are no active alerts at this time.</Text>
+                        <Text style={{color: theme.subtitle}}>Error loading alerts. Please try again later.</Text>
                     </View>
+                : (shownAlerts.length === 0 &&
+                    <View style={{ alignItems: 'center', paddingTop: 16 }}>
+                        <Text style={{color: theme.subtitle }}>There are no active alerts at this time.</Text>
+                    </View>)
                 }
+
             </BottomSheetView>
 
 

app/components/sheets/RoutesList.tsx

@@ -10,7 +10,7 @@ import BusIcon from "../ui/BusIcon";
 import SheetHeader from "../ui/SheetHeader";
 import AlertPill from "../ui/AlertPill";
 import IconPill from "../ui/IconPill";
-import { useRoutes } from "app/data/api_query";
+import { useAuthToken, useBaseData, usePatternPaths, useRoutes } from "app/data/api_query";
 import { useDefaultRouteGroup, useFavorites } from "app/data/storage_query";
 
 interface SheetProps {
@@ -28,10 +28,13 @@ const RoutesList: React.FC<SheetProps> = ({ sheetRef }) => {
 
     const [shouldUpdateData, setShouldUpdateData] = useState(false);
 
+
     const { data: routes, isLoading: isRoutesLoading } = useRoutes();
-    const { data: favorites, isLoading: isFavoritesLoading } = useFavorites(shouldUpdateData);
+    const { data: favorites, isLoading: isFavoritesLoading, isError: isFavoritesError } = useFavorites(shouldUpdateData);
     const { data: defaultGroup, refetch: refetchDefaultGroup } = useDefaultRouteGroup(shouldUpdateData);
 
+    const routeError = [useRoutes().isError, useAuthToken().isError, usePatternPaths().isError, useBaseData().isError].some((v) => v == true);
+
     const handleRouteSelected = (selectedRoute: IMapRoute) => {        
         // prevent the sheet from updating the data when it is closed, causes sheet to open :/
         setShouldUpdateData(false);
@@ -122,8 +125,19 @@ const RoutesList: React.FC<SheetProps> = ({ sheetRef }) => {
                     </View>
                 )}
 
-                {/* Loading indicatior */}
-                { (isRoutesLoading || !routes) && <ActivityIndicator style={{ marginTop: 12 }} /> }
+                {/* Loading indicatior, only show if no error and either loading or there are no routes */}
+                { (!routeError && (isRoutesLoading || !routes)) && <ActivityIndicator style={{ marginTop: 12 }} /> }
+
+                {/* Error */}
+                { routeError ? 
+                    <View style={{ alignItems: 'center', marginTop: 16 }}>
+                        <Text style={{color: theme.subtitle}}>Error loading routes. Please try again later.</Text>
+                    </View>
+                : (isFavoritesError && selectedRouteCategory === "favorites") &&
+                    <View style={{ alignItems: 'center', marginTop: 16 }}>
+                        <Text style={{color: theme.subtitle}}>Error loading favorites. Please try again later.</Text>
+                    </View>
+                }
             </BottomSheetView>
 
             <BottomSheetFlatList

app/components/sheets/Settings.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useState } from "react";
+import React, { memo, useEffect, useState } from "react";
 import { View, Text, TouchableOpacity, Alert, NativeSyntheticEvent } from "react-native";
 import { BottomSheetModal, BottomSheetView, BottomSheetScrollView } from "@gorhom/bottom-sheet";
 import Ionicons from '@expo/vector-icons/Ionicons';
@@ -34,6 +34,14 @@ const Settings: React.FC<SheetProps> = ({ sheetRef }) => {
         Alert.alert("Restart App", "Please restart the app to see the changes.");
     }
 
+    useEffect(() => {
+        AsyncStorage.getItem('app-theme').then((value) => {
+            if (value) {
+                setTheme(Number(value));
+            }
+        })
+    }, [])
+
     return (
         <BottomSheetModal 
             ref={sheetRef} 

app/components/sheets/StopTimetable.tsx

@@ -123,7 +123,7 @@ const StopTimetable: React.FC<SheetProps> = ({ sheetRef }) => {
 
             </BottomSheetView>
 
-            { scheduleError && <Text style={{ textAlign: 'center', marginTop: 10, color: theme.subtitle }}>Something went wrong. Please try again later</Text> }
+            { scheduleError && <Text style={{ textAlign: 'center', marginTop: 10, color: theme.subtitle }}>Unable to load schedules. Please try again later</Text> }
 
             {!scheduleError && (
                 <BottomSheetScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 35, paddingTop: 4 }}>

app/components/ui/StopCell.tsx

@@ -97,7 +97,7 @@ const StopCell: React.FC<Props> = ({ stop, route, direction, color, disabled, se
             ) : (
                 <Text style={{ marginBottom: 12, marginTop: 4, color: theme.subtitle }}>
                     { isError
-                        ? "Something went wrong. Please try again later."
+                        ? "Unable to load estimates. Please try again later."
                         : status
                     }</Text>
             )}

app/components/ui/Timetable.tsx

@@ -33,7 +33,7 @@ const Timetable: React.FC<Props> = ({ item, tintColor, stopCode, dismissBack })
     const theme = useAppStore((state) => state.theme);
 
     const [tableRows, setTableRows] = useState<TableItemRow[]>([]);
-    const { data: estimate, isLoading, isError } = useTimetableEstimate(stopCode, selectedTimetableDate || moment().toDate());
+    const { data: estimate, isLoading } = useTimetableEstimate(stopCode, selectedTimetableDate || moment().toDate());
 
     useEffect(() => {
         const now = moment().toDate();
@@ -115,10 +115,6 @@ const Timetable: React.FC<Props> = ({ item, tintColor, stopCode, dismissBack })
         setTableRows(stopRows);
     }, [estimate, selectedTimetableDate])
 
-    if (isError) {
-        return <Text style={{ textAlign: 'center', marginTop: 10, color: theme.subtitle }}>Something went wrong. Please try again later</Text>
-    }
-
     return (
         <View style={{ marginLeft: 16, paddingTop: 8 }}>
             <TouchableOpacity onPress={dismissBack} disabled={dismissBack == null} style={{ flexDirection: "row", alignItems: "center", marginBottom: 8 }}>

app/data/api_query.ts

@@ -3,8 +3,6 @@ import { getAuthentication, getBaseData, getNextDepartureTimes, getPatternPaths,
 import { darkMode, lightMode } from "app/theme";
 import { getColorScheme } from "app/utils";
 import moment from "moment";
-import { useEffect } from "react";
-import { Alert } from "react-native";
 import { GetBaseDataResponseSchema, GetNextDepartTimesResponseSchema, GetPatternPathsResponseSchema, GetStopEstimatesResponseSchema, GetStopSchedulesResponseSchema, GetVehiclesResponseSchema, IGetBaseDataResponse, IGetNextDepartTimesResponse, IGetPatternPathsResponse, IGetStopEstimatesResponse, IGetStopSchedulesResponse, IGetVehiclesResponse, IMapRoute, IMapServiceInterruption, IVehicle } from "utils/interfaces";
 
 
@@ -17,12 +15,6 @@ export const useAuthToken = () => {
         staleTime: Infinity
     });
 
-    useEffect(() => {
-        if (query.error) {
-          Alert.alert("Error", "Something went wrong. Please try again later.");
-        }
-      }, [query.error])
-
     return query;
 };
 
@@ -43,15 +35,9 @@ export const useBaseData = () => {
             return baseData;
         },
         enabled: useAuthToken().isSuccess,
-        staleTime: Infinity
+        staleTime: Infinity,
     });
 
-    useEffect(() => {
-        if (query.error) {
-            Alert.alert("Error", "Something went wrong. Please try again later.");
-        }
-    }, [query.error])
-
     return query;
 };
 
@@ -74,12 +60,6 @@ export const usePatternPaths = () => {
         staleTime: Infinity
     });
 
-    useEffect(() => {
-        if (query.error) {
-            Alert.alert("Error", "Something went wrong. Please try again later.");
-        }
-    }, [query.error])
-
     return query
 };
 
@@ -120,12 +100,6 @@ export const useRoutes = () => {
         staleTime: Infinity
     });
 
-    useEffect(() => {
-        if (query.error) {
-            Alert.alert("Error", "Something went wrong. Please try again later.");
-        }
-    }, [query.error])
-
     return query;
 };
 
@@ -182,7 +156,7 @@ export const useTimetableEstimate = (stopCode: string, date: Date) => {
     const client = useQueryClient();
 
     return useQuery<IGetStopEstimatesResponse>({
-        queryKey: ["timetableEstimate", stopCode, date],
+        queryKey: ["timetableEstimate", stopCode, moment(date).format("YYYY-MM-DD")],
         queryFn: async () => {
             const authToken: string = client.getQueryData(["authToken"])!;
 

app/data/storage_query.ts

@@ -1,7 +1,5 @@
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useEffect } from "react";
-import { Alert } from "react-native";
 import { IMapRoute } from "utils/interfaces";
 import { useRoutes } from "./api_query";
 
@@ -54,12 +52,6 @@ export const useFavorites = (allowUpdate: boolean = true) => {
         enabled: useRoutes().isSuccess && allowUpdate
     });
 
-    useEffect(() => {
-        if (query.error) {
-          Alert.alert("Error", "Something went wrong. Please try again later.");
-        }
-      }, [query.error])
-
     return query;
 }
 
@@ -77,12 +69,6 @@ export const useFavorite = (routeShortName: string) => {
         staleTime: Infinity
     });
 
-    useEffect(() => {
-        if (query.error) {
-          Alert.alert("Error", "Something went wrong. Please try again later.");
-        }
-      }, [query.error])
-
     return query;
 }
 
@@ -145,12 +131,6 @@ export const useDefaultRouteGroup = (allowUpdate: boolean = true) => {
         enabled: allowUpdate
     });
 
-    useEffect(() => {
-        if (query.error) {
-          Alert.alert("Error", "Something went wrong. Please try again later.");
-        }
-      }, [query.error])
-
     return query;
 }