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

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>