feat: add travel aid error handling and loading state (#4772)

AtB-AS · Oct 23, 2024 · 8f661e7 · 8f661e7
1 parent 0e1092e
commit 8f661e7
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 47 deletions.
diff --git a/src/api/serviceJourney.ts b/src/api/serviceJourney.ts
@@ -17,7 +17,7 @@ export async function getServiceJourneyWithEstimatedCalls(
   const response = await client.get<{
     value: ServiceJourneyWithEstCallsFragment;
   }>(url);
-  return response.data?.value;
+  return response.data.value;
 }
 
 export async function getServiceJourneyMapLegs(

diff --git a/src/translations/screens/subscreens/TravelAid.ts b/src/translations/screens/subscreens/TravelAid.ts
@@ -10,6 +10,13 @@ export const TravelAidTexts = {
   scheduledTime: (time: string) =>
     _(`Rutetid kl. ${time}`, `Scheduled at ${time}`, `Rutetid kl. ${time}`),
   clock: (time: string) => _(`kl. ${time}`, `${time}`, `kl. ${time}`),
+  error: {
+    message: _(
+      'Det oppstod en feil ved henting av reisedata for denne avgangen.',
+      'There was a problem loading travel data for this trip.',
+      'Det oppstod ein feil då vi prøvde å hente reisedata for denne avgangen.',
+    ),
+  },
   noRealtimeError: {
     title: _(
       'Ingen kontakt med kjøretøy',

diff --git a/src/travel-aid/TravelAidScreenComponent.tsx b/src/travel-aid/TravelAidScreenComponent.tsx
@@ -8,7 +8,7 @@ import {SafeAreaView} from 'react-native-safe-area-context';
 import {useTravelAidDataQuery} from './use-travel-aid-data';
 import {ScrollView} from 'react-native-gesture-handler';
 import {GenericSectionItem, Section} from '@atb/components/sections';
-import {View} from 'react-native';
+import {ActivityIndicator, View} from 'react-native';
 import {ThemeText} from '@atb/components/text';
 import {formatToClock, formatToClockOrRelativeMinutes} from '@atb/utils/date';
 import {TranslateFunction, dictionary, useTranslation} from '@atb/translations';
@@ -23,6 +23,7 @@ import {
   TravelAidStatus,
   getFocusedEstimatedCall,
 } from './get-focused-estimated-call';
+import {ServiceJourneyWithEstCallsFragment} from '@atb/api/types/generated/fragments/service-journeys';
 
 export type TravelAidScreenParams = {
   serviceJourneyDeparture: ServiceJourneyDeparture;
@@ -38,20 +39,15 @@ export const TravelAidScreenComponent = ({
   const {t} = useTranslation();
   const {themeName} = useTheme();
 
-  // TODO: Add error handling and loading state
-  const {data: serviceJourney} = useTravelAidDataQuery(
+  const {
+    data: serviceJourney,
+    status,
+    refetch,
+  } = useTravelAidDataQuery(
     serviceJourneyDeparture.serviceJourneyId,
     serviceJourneyDeparture.serviceDate,
   );
 
-  const state =
-    serviceJourney?.estimatedCalls && serviceJourney.estimatedCalls.length > 0
-      ? getFocusedEstimatedCall(
-          serviceJourney.estimatedCalls,
-          serviceJourneyDeparture.fromQuayId,
-        )
-      : undefined;
-
   return (
     <SafeAreaView style={{flex: 1}}>
       <StatusBarOnFocus
@@ -65,47 +61,79 @@ export const TravelAidScreenComponent = ({
         type="medium"
       />
       <ScrollView contentContainerStyle={styles.container}>
-        {state && (
-          <Section>
-            <GenericSectionItem style={styles.sectionContainer}>
-              <EstimatedCallInfo
-                departure={{
-                  cancellation: false,
-                  predictionInaccurate: false,
-                  serviceJourney: serviceJourney ?? {},
-                  destinationDisplay:
-                    state.focusedEstimatedCall.destinationDisplay,
-                }}
-              />
-            </GenericSectionItem>
-            <GenericSectionItem>
-              <View style={styles.sectionContainer}>
-                {state.status === TravelAidStatus.NoRealtime && (
-                  <MessageInfoBox
-                    type="error"
-                    title={t(TravelAidTexts.noRealtimeError.title)}
-                    message={t(TravelAidTexts.noRealtimeError.message)}
-                  />
-                )}
-                <View style={styles.subContainer}>
-                  <ThemeText type="body__tertiary--bold">
-                    {getStopHeader(state.status, t)}
-                  </ThemeText>
-                  <ThemeText type="heading__title">
-                    {state.focusedEstimatedCall.quay.stopPlace?.name}{' '}
-                    {state.focusedEstimatedCall.quay.publicCode}
-                  </ThemeText>
-                </View>
-                <TimeInfo state={state} />
-              </View>
-            </GenericSectionItem>
-          </Section>
+        {status === 'loading' && <ActivityIndicator size="large" />}
+        {status === 'error' && (
+          <MessageInfoBox
+            type="error"
+            message={t(TravelAidTexts.error.message)}
+            onPressConfig={{action: refetch, text: t(dictionary.retry)}}
+          />
+        )}
+        {status === 'success' && (
+          <TravelAidSection
+            serviceJourney={serviceJourney}
+            fromQuayId={serviceJourneyDeparture.fromQuayId}
+          />
         )}
       </ScrollView>
     </SafeAreaView>
   );
 };
 
+const TravelAidSection = ({
+  serviceJourney,
+  fromQuayId,
+}: {
+  serviceJourney: ServiceJourneyWithEstCallsFragment;
+  fromQuayId?: string;
+}) => {
+  const styles = useStyles();
+  const {t} = useTranslation();
+
+  if (!serviceJourney.estimatedCalls) return null;
+
+  const {status, focusedEstimatedCall} = getFocusedEstimatedCall(
+    serviceJourney.estimatedCalls,
+    fromQuayId,
+  );
+
+  return (
+    <Section>
+      <GenericSectionItem style={styles.sectionContainer}>
+        <EstimatedCallInfo
+          departure={{
+            cancellation: false,
+            predictionInaccurate: false,
+            serviceJourney: serviceJourney ?? {},
+            destinationDisplay: focusedEstimatedCall.destinationDisplay,
+          }}
+        />
+      </GenericSectionItem>
+      <GenericSectionItem>
+        <View style={styles.sectionContainer}>
+          {status === TravelAidStatus.NoRealtime && (
+            <MessageInfoBox
+              type="error"
+              title={t(TravelAidTexts.noRealtimeError.title)}
+              message={t(TravelAidTexts.noRealtimeError.message)}
+            />
+          )}
+          <View style={styles.subContainer}>
+            <ThemeText type="body__tertiary--bold">
+              {getStopHeader(status, t)}
+            </ThemeText>
+            <ThemeText type="heading__title">
+              {focusedEstimatedCall.quay.stopPlace?.name}{' '}
+              {focusedEstimatedCall.quay.publicCode}
+            </ThemeText>
+          </View>
+          <TimeInfo state={{status, focusedEstimatedCall}} />
+        </View>
+      </GenericSectionItem>
+    </Section>
+  );
+};
+
 const TimeInfo = ({state}: {state: FocusedEstimatedCallState}) => {
   const {language, t} = useTranslation();
   const styles = useStyles();
@@ -174,6 +202,7 @@ const getStopHeader = (
 const useStyles = StyleSheet.createThemeHook((theme) => ({
   container: {
     paddingHorizontal: theme.spacings.medium,
+    gap: theme.spacings.medium,
   },
   sectionContainer: {
     flex: 1,