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

import { useAddTrainMutation } from '@/hooks/mutations/useTrainMutation'
import { useAuth } from '@/hooks/useAuth'
import { useMemo, useState } from 'react'
import { StyleSheet } from 'react-native'
import { Button, Dialog, FAB, HelperText, 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)
  })

  return (
    <Surface style={{ flex: 1 }}>
      <Text variant='bodyMedium'>Ici on aura la page pour ajouter un trajet en train depuis Rail Planner</Text>
      <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,
  }
})