Récupération de défis et tirage d'un nouveau défi via des boutons

client/app/(tabs)/challenges.tsx

@@ -1,12 +1,14 @@
 import ChallengeCard from '@/components/ChallengeCard'
 import PenaltyBanner from '@/components/PenalyBanner'
+import { useDrawRandomChallengeMutation } from '@/hooks/mutations/useChallengeMutation'
+import { useAuth } from '@/hooks/useAuth'
 import { useChallengeActions } from '@/hooks/useChallengeActions'
 import { useChallenges } from '@/hooks/useChallenges'
 import { useGame } from '@/hooks/useGame'
 import { FontAwesome6 } from '@expo/vector-icons'
-import { useMemo } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { View } from 'react-native'
-import { Appbar, Banner, FAB, MD3Colors, Surface, Text } from 'react-native-paper'
+import { ActivityIndicator, Appbar, Banner, FAB, MD3Colors, Surface, Text, TouchableRipple } from 'react-native-paper'
 
 function ChallengeScreenHeader() {
   return <>
@@ -19,31 +21,49 @@ function ChallengeScreenHeader() {
 }
 
 function ChallengeScreenBody() {
+  const auth = useAuth()
   const game = useGame()
   const challengeActions = useChallengeActions()
   const challenges = useChallenges()
   const currentChallengeAction = useMemo(() => {
-    if (!game.currentChallengeId)
+    if (!game.activeChallengeId)
       return null
-    return challengeActions.challengeActions.find((action) => action.id === game.currentChallengeId)
+    return challengeActions.challengeActions.find((action) => action.id === game.activeChallengeId)
   }, [game, challengeActions])
   const currentChallenge = useMemo(() => {
     if (!currentChallengeAction)
       return null
     return challenges.challenges.find((challenge) => challenge.id === currentChallengeAction.challengeId)
   }, [currentChallengeAction, challenges])
+  const [loading, setLoading] = useState(false)
+  const drawRandomChallengeMutation = useDrawRandomChallengeMutation({
+    auth,
+    onPostSuccess: () => setLoading(true),
+  })
+  useEffect(() => {
+    if (challengeActions)
+      setLoading(false)
+  }, [challengeActions])
 
   return <>
     {currentChallenge && <ChallengeCard challenge={currentChallenge} />}
     {!currentChallenge && game.currentRunner && <>
       <Banner
-          visible={!currentChallenge && game.currentRunner}
+          visible={!currentChallenge && game.currentRunner && !loading}
           icon='cancel'
           style={{ backgroundColor: MD3Colors.error40 }}>
         <Text variant='titleMedium' style={{ textAlign: 'center' }}>Aucun défi en cours.</Text>
       </Banner>
       <View style={{ flexGrow: 1, justifyContent: 'center', alignItems: 'center' }}>
-        <FAB icon='cards' variant='tertiary' style={{ width: 250, height: 250, borderRadius: 20, justifyContent: 'center' }} size='large' label='Tirer un défi' />
+        <FAB
+            label='Tirer un défi'
+            icon='cards'
+            disabled={drawRandomChallengeMutation.isPending}
+            visible={!currentChallenge && game.currentRunner && !loading}
+            onPress={() => drawRandomChallengeMutation.mutate()}
+            variant='tertiary'
+            customSize={64} />
+        {loading && <ActivityIndicator size={'large'} />}
       </View>
     </>}
     <Banner