Interaction avec les boutons de fin de défi

client/app/(tabs)/challenges.tsx

@@ -1,6 +1,6 @@
 import ChallengeCard from '@/components/ChallengeCard'
 import PenaltyBanner from '@/components/PenalyBanner'
-import { useDrawRandomChallengeMutation } from '@/hooks/mutations/useChallengeMutation'
+import { useDrawRandomChallengeMutation, useEndChallenge } from '@/hooks/mutations/useChallengeMutation'
 import { useAuth } from '@/hooks/useAuth'
 import { useChallengeActions } from '@/hooks/useChallengeActions'
 import { useChallenges } from '@/hooks/useChallenges'
@@ -9,7 +9,7 @@ import { FontAwesome6 } from '@expo/vector-icons'
 import { useQueryClient } from '@tanstack/react-query'
 import { useEffect, useMemo, useState } from 'react'
 import { View } from 'react-native'
-import { ActivityIndicator, Appbar, Banner, FAB, MD3Colors, Surface, Text, TouchableRipple } from 'react-native-paper'
+import { ActivityIndicator, Appbar, Banner, FAB, MD3Colors, Snackbar, Surface, Text, TouchableRipple } from 'react-native-paper'
 
 function ChallengeScreenHeader() {
   return <>
@@ -38,26 +38,44 @@ function ChallengeScreenBody() {
     return challenges.challenges.find((challenge) => challenge.id === currentChallengeAction.challengeId)
   }, [currentChallengeAction, challenges])
   const [loading, setLoading] = useState(false)
+  const [successSnackbarVisible, setSuccessSnackbarVisible] = useState(false)
   const drawRandomChallengeMutation = useDrawRandomChallengeMutation({
     auth,
     onPostSuccess: () => {
       setLoading(true)
+      setSuccessSnackbarVisible(true)
       queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === 'get-challenges' || query.queryKey[0] === 'get-player' })
     }
   })
+  const endChallenge = useEndChallenge({
+    auth,
+    onPostSuccess: () => {
+      setLoading(true)
+      setSuccessSnackbarVisible(true)
+      queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === 'get-challenges' || query.queryKey[0] === 'get-player' })
+    },
+  })
   useEffect(() => {
     if (challengeActions)
       setLoading(false)
   }, [challengeActions])
 
   return <>
-    {currentChallenge && <ChallengeCard challenge={currentChallenge} />}
-    {!currentChallenge && game.currentRunner && <>
+    {loading &&
+      <View style={{ flexGrow: 1, justifyContent: 'center', alignItems: 'center' }}>
+        <ActivityIndicator size={'large'} />
+      </View>}
+    {!loading && currentChallenge &&
+      <ChallengeCard
+          challenge={currentChallenge}
+          onSuccess={() => { setLoading(true); endChallenge.mutate({ success: true }) }}
+          onFail={() => endChallenge.mutate({ success: false })} />}
+    {!loading && !currentChallenge && game.currentRunner && <>
       <Banner
           visible={!currentChallenge && game.currentRunner && !loading}
           icon='cancel'
           style={{ backgroundColor: MD3Colors.error40 }}>
-        <Text variant='titleMedium' style={{ textAlign: 'center' }}>Aucun défi en cours.</Text>
+        Aucun défi n'est en cours.
       </Banner>
       <View style={{ flexGrow: 1, justifyContent: 'center', alignItems: 'center' }}>
         <FAB
@@ -68,15 +86,20 @@ function ChallengeScreenBody() {
             onPress={() => drawRandomChallengeMutation.mutate()}
             variant='tertiary'
             customSize={64} />
-        {loading && <ActivityIndicator size={'large'} />}
       </View>
     </>}
     <Banner
-        visible={game.gameStarted && !game.currentRunner}
+        visible={!loading && game.gameStarted && !game.currentRunner}
         icon={({ size }) => <FontAwesome6 name='cat' size={size} color={'pink'} />}
         style={{ backgroundColor: MD3Colors.secondary30 }}>
       Vous êtes poursuiveuse, et n'avez donc pas de défi à accomplir.
     </Banner>
+    <Snackbar
+        visible={successSnackbarVisible}
+        onDismiss={() => setSuccessSnackbarVisible(false)}
+        action={{ label: "Fermer", onPress: () => setSuccessSnackbarVisible(false) }}>
+      Jeu actualisé
+    </Snackbar>
   </>
 }