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>
   </>
 }