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

client/components/ChallengeCard.tsx

@@ -0,0 +1,30 @@
+import { Challenge } from "@/utils/features/challenges/challengesSlice"
+import { FontAwesome6 } from "@expo/vector-icons"
+import { View } from "react-native"
+import { Button, Surface, Text } from "react-native-paper"
+
+export default function ChallengeCard({ challenge }: { challenge: Challenge }) {
+  return (
+    <Surface elevation={2} style={{ flex: 1, margin: 20, borderRadius: 20 }}>
+    <View style={{ padding: 10 }}>
+      <Text variant='headlineMedium' style={{ textAlign: 'center' }}>{challenge.title}</Text>
+    </View>
+    <View style={{ flexGrow: 1 }}>
+      <Surface elevation={5} mode='flat' style={{ flexGrow: 1, padding: 15 }}>
+        <Text variant='bodyLarge' style={{ flexGrow: 1 }}>{challenge.description}</Text>
+        <Text variant='titleMedium'>
+          Récompense : {challenge.reward} <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>
+  )
+}

client/hooks/useChallenges.ts

@@ -1,3 +1,3 @@
 import { useAppSelector } from "./useStore"
 
-export const useTrain = () => useAppSelector((state) => state.challenges)
+export const useChallenges = () => useAppSelector((state) => state.challenges)

client/utils/features/game/gameSlice.ts

@@ -1,4 +1,5 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { ChallengeAction } from '../challengeActions/challengeActionsSlice'
 
 export interface RunPayload {
   id: number
@@ -20,6 +21,7 @@ export interface GameState {
   gameStarted: boolean
   money: number
   currentRunner: boolean
+  currentChallengeId: number | null
   chaseFreeTime: number | null  // date
   penaltyStart: number | null // date
   penaltyEnd: number | null  //date
@@ -30,6 +32,7 @@ const initialState: GameState = {
   gameStarted: false,
   money: 0,
   currentRunner: false,
+  currentChallengeId: null,
   chaseFreeTime: null,
   penaltyStart: null,
   penaltyEnd: null,