Utilisation de snackbars pour afficher le statut d'une requête

client/app/(tabs)/train.tsx

@@ -4,19 +4,36 @@ import { useAuth } from '@/hooks/useAuth'
 import { useTrain } from '@/hooks/useTrain'
 import { TrainTrip } from '@/utils/features/train/trainSlice'
 import { FontAwesome6 } from '@expo/vector-icons'
+import { useQueryClient } from '@tanstack/react-query'
 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'
+import { Button, Dialog, Divider, FAB, HelperText, List, MD3Colors, Portal, Snackbar, 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 [successSnackbarVisible, setSuccessSnackbarVisible] = useState(false)
+  const [errorVisible, setErrorVisible] = useState(false)
+  const [error, setError] = useState([200, ""])
+
   const auth = useAuth()
+  const queryClient = useQueryClient()
   const addTrainMutation = useAddTrainMutation({
     auth,
-    onPostSuccess: () => setAddTrainVisible(false)
+    onPostSuccess: () => {
+      setAddTrainVisible(false)
+      setSuccessSnackbarVisible(true)
+      queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === 'get-trains' })
+    },
+    onError: ({ response, error }) => {
+      setErrorVisible(true)
+      if (response)
+        setError([response.statusCode, response.message])
+      else if (error)
+        setError([400, error.message])
+    },
   })
 
   const trains = useTrain()
@@ -33,6 +50,24 @@ export default function TrainScreen() {
           icon='plus'
           style={styles.addTrainButton}
           onPress={() => setAddTrainVisible(true)} />
+      <Snackbar
+          key='success-snackbar'
+          visible={successSnackbarVisible}
+          icon={'close'}
+          onDismiss={() => setSuccessSnackbarVisible(false)}
+          onIconPress={() => setSuccessSnackbarVisible(false)}>
+        Train ajouté avec succès
+      </Snackbar>
+      <Snackbar
+          key='error-snackbar'
+          visible={errorVisible}
+          icon={'close'}
+          onDismiss={() => setErrorVisible(false)}
+          onIconPress={() => setErrorVisible(false)}>
+        <Text variant='bodyMedium' style={{ color: MD3Colors.secondary0 }}>
+          Erreur {error[0]} : {error[1]}
+        </Text>
+      </Snackbar>
       <Portal>
         <Dialog visible={addTrainVisible} onDismiss={() => setAddTrainVisible(false)}>
           <Dialog.Title>Ajout d'un train</Dialog.Title>