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

client/app/(tabs)/challenges.tsx

@@ -39,13 +39,22 @@ function ChallengeScreenBody() {
   }, [currentChallengeAction, challenges])
   const [loading, setLoading] = useState(false)
   const [successSnackbarVisible, setSuccessSnackbarVisible] = useState(false)
+  const [errorVisible, setErrorVisible] = useState(false)
+  const [error, setError] = useState([200, ""])
   const drawRandomChallengeMutation = useDrawRandomChallengeMutation({
     auth,
     onPostSuccess: () => {
       setLoading(true)
       setSuccessSnackbarVisible(true)
       queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === 'get-challenges' || query.queryKey[0] === 'get-player' })
-    }
+    },
+    onError: ({ response, error }) => {
+      setErrorVisible(true)
+      if (response)
+        setError([response.statusCode, response.message])
+      else if (error)
+        setError([400, error.message])
+    },
   })
   const endChallenge = useEndChallenge({
     auth,
@@ -54,6 +63,13 @@ function ChallengeScreenBody() {
       setSuccessSnackbarVisible(true)
       queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === 'get-challenges' || query.queryKey[0] === 'get-player' })
     },
+    onError: ({ response, error }) => {
+      setErrorVisible(true)
+      if (response)
+        setError([response.statusCode, response.message])
+      else if (error)
+        setError([400, error.message])
+    },
   })
   useEffect(() => {
     if (challengeActions)
@@ -95,11 +111,23 @@ function ChallengeScreenBody() {
       Vous êtes poursuiveuse, et n'avez donc pas de défi à accomplir.
     </Banner>
     <Snackbar
+        key='success-snackbar'
         visible={successSnackbarVisible}
+        icon={'close'}
         onDismiss={() => setSuccessSnackbarVisible(false)}
-        action={{ label: "Fermer", onPress: () => setSuccessSnackbarVisible(false) }}>
+        onIconPress={() => setSuccessSnackbarVisible(false)}>
       Jeu actualisé
     </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>
   </>
 }
 

client/app/(tabs)/settings.tsx

@@ -1,12 +1,19 @@
 import { useGameRepairMutation, useGameResetMutation, useGameStartMutation, useGameStopMutation, useGameSwitchPlayerMutation } from '@/hooks/mutations/useGameMutation'
 import { useAuth } from '@/hooks/useAuth'
 import { useGame, useUpdateGameState } from '@/hooks/useGame'
+import { useQueryClient } from '@tanstack/react-query'
 import { useRouter } from 'expo-router'
 import { useState } from 'react'
-import { Button, Dialog, FAB, List, Portal, Surface, Text } from 'react-native-paper'
+import { Button, Dialog, FAB, List, MD3Colors, Portal, Snackbar, Surface, Text } from 'react-native-paper'
 
 export default function HistoryScreen() {
+  const [successVisible, setSuccessVisible] = useState(false)
+  const [successMessage, setSuccessMessage] = useState("")
+  const [errorVisible, setErrorVisible] = useState(false)
+  const [error, setError] = useState([200, ""])
+
   const router = useRouter()
+  const queryClient = useQueryClient()
   const auth = useAuth()
   const game = useGame()
   const updateGameState = useUpdateGameState()
@@ -14,22 +21,84 @@ export default function HistoryScreen() {
   const gameStartMutation = useGameStartMutation({
     auth,
     updateGameState,
+    onPostSuccess: () => {
+      setSuccessVisible(true)
+      setSuccessMessage("Jeu démarré avec succès")
+      queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === 'get-game' })
+    },
+    onError: ({ response, error }) => {
+      setErrorVisible(true)
+      if (response)
+        setError([response.statusCode, response.message])
+      else if (error)
+        setError([400, error.message])
+    },
   })
   const gameStopMutation = useGameStopMutation({
     auth,
     updateGameState,
+    onPostSuccess: () => {
+      setSuccessVisible(true)
+      setSuccessMessage("Jeu arrêté avec succès")
+      queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === 'get-game' })
+    },
+    onError: ({ response, error }) => {
+      setErrorVisible(true)
+      if (response)
+        setError([response.statusCode, response.message])
+      else if (error)
+        setError([400, error.message])
+    },
   })
   const gameSwitchMutation = useGameSwitchPlayerMutation({
     auth,
     updateGameState,
+    onPostSuccess: () => {
+      setSuccessVisible(true)
+      setSuccessMessage("Échange de joueuse en course réalisé avec succès")
+      queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === 'get-game' })
+    },
+    onError: ({ response, error }) => {
+      setErrorVisible(true)
+      if (response)
+        setError([response.statusCode, response.message])
+      else if (error)
+        setError([400, error.message])
+    },
   })
   const gameRepairMutation = useGameRepairMutation({
     auth,
     updateGameState,
+    onPostSuccess: () => {
+      setSuccessVisible(true)
+      setSuccessMessage("Réparation du jeu effectuée avec succès")
+      queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === 'get-game' })
+      queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === 'get-player' })
+      queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === 'money-updates' })
+    },
+    onError: ({ response, error }) => {
+      setErrorVisible(true)
+      if (response)
+        setError([response.statusCode, response.message])
+      else if (error)
+        setError([400, error.message])
+    },
   })
   const gameResetMutation = useGameResetMutation({
     auth,
     updateGameState,
+    onPostSuccess: () => {
+      setSuccessVisible(true)
+      setSuccessMessage("Jeu réinitialisé avec succès")
+      queryClient.invalidateQueries()
+    },
+    onError: ({ response, error }) => {
+      setErrorVisible(true)
+      if (response)
+        setError([response.statusCode, response.message])
+      else if (error)
+        setError([400, error.message])
+    },
   })
 
   const [resetConfirmVisible, setResetConfirmVisible] = useState(false)
@@ -80,6 +149,26 @@ export default function HistoryScreen() {
             right={() => <FAB icon="reload-alert" size="small" variant={'tertiary'} />}
             onPress={() => setResetConfirmVisible(true)} />
       </List.Section>
+      <Snackbar
+          key='success-snackbar'
+          visible={successVisible}
+          icon={'close'}
+          onDismiss={() => setSuccessVisible(false)}
+          onIconPress={() => setSuccessVisible(false)}>
+        <Text variant='bodyMedium' style={{ color: MD3Colors.secondary0 }}>
+          {successMessage}
+        </Text>
+      </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 key="confirmReset" visible={resetConfirmVisible} onDismiss={() => setResetConfirmVisible(false)}>
           <Dialog.Title>Confirmer</Dialog.Title>

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>