Se creó la pagina que representa un viaje realizado

import { View, Text, FlatList, StyleSheet, SectionList } from "react-native";

import { useGetTravelHistory } from "../../hooks/useGetTravelHistory";

import { ApiRequestStatus } from "../../constants/api_request_states";

import { FullPageLoader } from "../../common/components/full_page_loader";

import { CustomTileButton } from "../../common/components/custom_tile_button";

import { LIGTHT_THEME } from "../../constants/theme";

import { router } from "expo-router";

export const TravelHistoryPage = () => {

  const { travelHistory, requestStatus } = useGetTravelHistory();

  if (requestStatus === ApiRequestStatus.LOADING) {

    return <FullPageLoader />;

  }

  if (requestStatus === ApiRequestStatus.ERROR || !travelHistory) {

    return (

      <View>

        <Text>Error</Text>

      </View>

    );

  }

  const onPress = (id: number) => {

    router.push(`/travel_history/details/${id}`);

  };

  return (

    <SectionList

      sections={travelHistory}

      scrollEnabled={true}

      keyExtractor={(item, index) => item.id.toString() + index}

      renderItem={({ item }) => (

        <CustomTileButton

          title={item.destination}

          subtitle={`${item.startDate.toDateString()} - ${item.endDate.toDateString()}`}

          onPress={() => onPress(item.id)}

        />

      )}

      renderSectionHeader={({ section: { title } }) => (

        <View style={styles.pastTravelsHeaderContainer}>

          <Text style={styles.pastTravelsHeaderTitle}>{title}</Text>

        </View>

      )}

      style={styles.pastTravelsContainer}

      ListFooterComponent={<View style={{ height: 50 }} />}

      ItemSeparatorComponent={() => <View style={{ height: 10 }} />}

      renderSectionFooter={({section}) => {

        if (section.data.length === 0) {

          return (

            <View style={{ alignItems: "center"}}>

              <Text>No travels</Text>

            </View>

          );

        }

        return null;

      }}

    />

  );

};

const styles = StyleSheet.create({

  pastTravelsHeaderContainer: {

    width: "100%",

    height: 50,

    backgroundColor: LIGTHT_THEME.color.background,

    marginBottom: 15,

    justifyContent: "center",

    alignItems: "center",

  },

  pastTravelsHeaderTitle: {

    fontSize: 18,

    fontWeight: "600",

  },

  pastTravelsContainer: {

    flex: 1,

    backgroundColor: LIGTHT_THEME.color.background,

    paddingHorizontal: 15,

  },

});