Gestion dynamique de l'affichage du défi

client/app/(tabs)/challenges.tsx

@@ -1,9 +1,26 @@
+import ChallengeCard from '@/components/ChallengeCard'
 import PenaltyBanner from '@/components/PenalyBanner'
-import { FontAwesome6 } from '@expo/vector-icons'
-import { View } from 'react-native'
-import { Appbar, Button, Surface, Text } from 'react-native-paper'
+import { useChallengeActions } from '@/hooks/useChallengeActions'
+import { useChallenges } from '@/hooks/useChallenges'
+import { useGame } from '@/hooks/useGame'
+import { useMemo } from 'react'
+import { Appbar, Surface } from 'react-native-paper'
 
 export default function ChallengesScreen() {
+  const game = useGame()
+  const challengeActions = useChallengeActions()
+  const challenges = useChallenges()
+  const currentChallengeAction = useMemo(() => {
+    if (!game.currentChallengeId)
+      return null
+    return challengeActions.challengeActions.find((action) => action.id === game.currentChallengeId)
+  }, [game, challengeActions])
+  const currentChallenge = useMemo(() => {
+    if (!currentChallengeAction)
+      return null
+    return challenges.challenges.find((challenge) => challenge.id === currentChallengeAction.challengeId)
+  }, [currentChallengeAction, challenges])
+
   return (
     <Surface style={{ flex: 1 }}>
       <Appbar.Header>
@@ -11,27 +28,7 @@ export default function ChallengesScreen() {
         <Appbar.Action icon='format-list-bulleted' />
       </Appbar.Header>
       <PenaltyBanner />
-      <Surface elevation={2} style={{ flex: 1, margin: 20, borderRadius: 20 }}>
-        <View style={{ padding: 10 }}>
-          <Text variant='headlineMedium' style={{ textAlign: 'center' }}>Titre</Text>
-        </View>
-        <View style={{ flexGrow: 1 }}>
-          <Surface elevation={5} mode='flat' style={{ flexGrow: 1, padding: 15 }}>
-            <Text variant='bodyLarge' style={{ flexGrow: 1 }}>Description</Text>
-            <Text variant='titleMedium'>
-              Récompense : 500 <FontAwesome6 name='coins' />
-            </Text>
-          </Surface>
-        </View>
-        <View style={{ flexWrap: 'wrap', flexDirection: 'row', justifyContent: 'space-around', padding: 15 }}>
-          <Button mode='outlined' icon='cancel'>
-            Passer
-          </Button>
-          <Button mode='contained' icon='check'>
-            Terminer
-          </Button>
-        </View>
-      </Surface>
+      {currentChallenge && <ChallengeCard challenge={currentChallenge} />}
     </Surface>
   )
 }