traintrape-moi/client/app/(tabs)/train.tsx

import PenaltyBanner from '@/components/PenalyBanner'
import { useAddTrainMutation } from '@/hooks/mutations/useTrainMutation'
import { useAuth } from '@/hooks/useAuth'
import { useTrain } from '@/hooks/useTrain'
import { TrainTrip } from '@/utils/features/train/trainSlice'
import { FontAwesome6 } from '@expo/vector-icons'
import { useMemo, useState } from 'react'
import { FlatList, StyleSheet } from 'react-native'
import { Button, Dialog, Divider, FAB, HelperText, List, Portal, Surface, Text, TextInput } from 'react-native-paper'

export default function TrainScreen() {
  const [addTrainVisible, setAddTrainVisible] = useState(false)
  const [addTrainUrl, setAddTrainUrl] = useState("")
  const trainId = useMemo(() => /[0-9A-F]{8}-[0-9A-F]{4}-[0-9A-F]{4}-[0-9A-F]{4}-[0-9A-F]{12}/.exec(addTrainUrl)?.[0], [addTrainUrl])

  const auth = useAuth()
  const addTrainMutation = useAddTrainMutation({
    auth,
    onPostSuccess: () => setAddTrainVisible(false)
  })

  const trains = useTrain()

  return (
    <Surface style={{ flex: 1 }}>
      <PenaltyBanner />
      <FlatList
          data={trains.trains}
          keyExtractor={(train) => train.id}
          ItemSeparatorComponent={() => <Divider />}
          renderItem={(item) => <TrainListItem train={item.item} />} />
      <FAB
          icon='plus'
          style={styles.addTrainButton}
          onPress={() => setAddTrainVisible(true)} />
      <Portal>
        <Dialog visible={addTrainVisible} onDismiss={() => setAddTrainVisible(false)}>
          <Dialog.Title>Ajout d'un train</Dialog.Title>
          <Dialog.Content>
            <TextInput
                label="URL de partage RailPlanner"
                autoComplete='url'
                inputMode='url'
                defaultValue={addTrainUrl}
                multiline={true}
                onChangeText={setAddTrainUrl}
                error={!trainId}
                onEndEditing={() => {
                  if (trainId !== undefined)
                    addTrainMutation.mutate(trainId)
                }}
                placeholder="https://eurailapp.com/share/journey?id=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX&type=list&brand=interrail" />
            <HelperText type='error' visible={!trainId && addTrainVisible}>
              Le champ doit contenir l'identifiant d'un voyage au format UUID. {trainId}
            </HelperText>
          </Dialog.Content>
          <Dialog.Actions>
            <Button onPress={() => setAddTrainVisible(false)}>Annuler</Button>
            <Button onPress={() => {
              if (trainId !== undefined)
                addTrainMutation.mutate(trainId)
            }} disabled={trainId === undefined || addTrainMutation.isPending}>Ajouter</Button>
          </Dialog.Actions>
        </Dialog>
      </Portal>
    </Surface>
  )
}

const styles = StyleSheet.create({
  addTrainButton: {
    position: 'absolute',
    right: 25,
    bottom: 25,
  }
})

function TrainListItem({ train }: { train: TrainTrip }) {
  const depDateTime = new Date(train.departureTime)
  const depDate = depDateTime.toLocaleDateString()
  const depTime = depDateTime.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
  const arrDateTime = new Date(train.arrivalTime)
  const arrTime = arrDateTime.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
  const durationInMinutes = (arrDateTime.getTime() - depDateTime.getTime()) / 1000 / 60
  const duration = `${Math.floor(durationInMinutes / 60).toString().padStart(2, '0')}:${Math.floor(durationInMinutes % 60).toString().padStart(2, '0')}`
  const title = `${train.from} ${depTime} => ${train.to} ${arrTime} (${depDate})`
  const distanceKm = Math.ceil(train.distance / 1000)
  const cost = 10 * distanceKm
  return <>
    <List.Item
      title={title}
      description={<><Text>Durée : {duration}, distance : {distanceKm} km, coût : {cost}</Text> <FontAwesome6 name='coins' /></>}
      />
    </>
}