Ajout, modification et suppression de défi

client/app/(tabs)/index.tsx

@@ -24,14 +24,16 @@ export default function MapScreen() {
             visible={game.gameStarted || game.money > 0}
             icon={(props) => <FontAwesome6 {...props} name='coins' size={20} />}
             color='black'
-            label={`${game.money}`} />
+            label={`${game.money}`}
+            onPress={() => {}} />
         <FAB
             style={styles.statusBadge}
             visible={game.gameStarted || game.money > 0}
             size='small'
             color='black'
             icon={game.currentRunner ? 'run-fast' : () => <FontAwesome6 name='cat' size={20} />}
-            label={game.currentRunner ? "Coureuse" : "Poursuiveuse"} />
+            label={game.currentRunner ? "Coureuse" : "Poursuiveuse"}
+            onPress={() => {}} />
       </View>
       <FreeChaseBanner />
     </Surface>

client/app/challenges-list.tsx

@@ -1,7 +1,10 @@
 import ChallengeCard from "@/components/ChallengeCard"
+import { useAddChallengeMutation, useDeleteChallengeMutation, useEditChallengeMutation } from "@/hooks/mutations/useChallengeMutation"
+import { useAuth } from "@/hooks/useAuth"
 import { useChallenges } from "@/hooks/useChallenges"
 import { Challenge } from "@/utils/features/challenges/challengesSlice"
 import { FontAwesome6 } from "@expo/vector-icons"
+import { useQueryClient } from "@tanstack/react-query"
 import { useRouter } from "expo-router"
 import { useState } from "react"
 import { FlatList, StyleSheet } from "react-native"
@@ -9,6 +12,8 @@ import { Appbar, Button, Dialog, Divider, FAB, List, MD3Colors, Modal, Portal, S
 
 export default function ChallengesList() {
   const router = useRouter()
+  const queryClient = useQueryClient()
+  const auth = useAuth()
   const challenges = useChallenges()
 
   const [editChallengeVisible, setEditChallengeVisible] = useState(false)
@@ -23,6 +28,77 @@ export default function ChallengesList() {
   const [errorVisible, setErrorVisible] = useState(false)
   const [error, setError] = useState([200, ""])
 
+  const addChallengeMutation = useAddChallengeMutation({
+    auth,
+    onPostSuccess: () => {
+      setSuccessMessage("Le défi a bien été ajouté !")
+      setSuccessSnackbarVisible(true)
+      queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === 'get-challenges' })
+    },
+    onError: ({ response, error }) => {
+      setErrorVisible(true)
+      if (response)
+        setError([response.statusCode, response.message])
+      else if (error)
+        setError([400, error.message])
+    },
+  })
+  const editChallengeMutation = useEditChallengeMutation({
+    auth,
+    onPostSuccess: () => {
+      setSuccessMessage("Le défi a bien été modifié !")
+      setSuccessSnackbarVisible(true)
+      setEditChallengeVisible(false)
+      setDisplayedChallenge(null)
+      queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === 'get-challenges' })
+    },
+    onError: ({ response, error }) => {
+      setErrorVisible(true)
+      if (response)
+        setError([response.statusCode, response.message])
+      else if (error)
+        setError([400, error.message])
+    },
+  })
+  const deleteChallengeMutation = useDeleteChallengeMutation({
+    auth,
+    onPostSuccess: () => {
+      setSuccessMessage("Le défi a bien été supprimé !")
+      setSuccessSnackbarVisible(true)
+      setEditChallengeVisible(false)
+      queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === 'get-challenges' })
+    },
+    onError: ({ response, error }) => {
+      setErrorVisible(true)
+      if (response)
+        setError([response.statusCode, response.message])
+      else if (error)
+        setError([400, error.message])
+    },
+  })
+
+  function sendEditChallenge() {
+    if (editChallengeId) {
+      editChallengeMutation.mutate({
+        id: editChallengeId,
+        title: editChallengeTitle,
+        description: editChallengeDescription,
+        reward: editChallengeReward,
+      })
+    }
+    else {
+      addChallengeMutation.mutate({
+        title: editChallengeTitle,
+        description: editChallengeDescription,
+        reward: editChallengeReward,
+      })
+    }
+  }
+
+  function sendDeleteChallenge() {
+    displayedChallenge && deleteChallengeMutation.mutate(displayedChallenge)
+  }
+
   return (
     <Surface style={{ flex: 1 }}>
       <Appbar.Header>
@@ -103,14 +179,14 @@ export default function ChallengesList() {
                 inputMode='numeric'
                 onChangeText={(text) => setEditChallengeReward(+text)}
                 error={!editChallengeReward}
-                onEndEditing={() => { }} />
+                onEndEditing={sendEditChallenge} />
           </Dialog.Content>
           <Dialog.Actions>
             <Button onPress={() => setEditChallengeVisible(false)}>Annuler</Button>
             <Button
-                onPress={() => { }}
+                onPress={sendEditChallenge}
                 disabled={!editChallengeTitle || !editChallengeDescription || !editChallengeReward}>
-              Ajouter
+              {editChallengeId ? "Modifier" : "Ajouter"}
             </Button>
           </Dialog.Actions>
         </Dialog>
@@ -123,7 +199,7 @@ export default function ChallengesList() {
           </Dialog.Content>
           <Dialog.Actions>
             <Button onPress={() => setConfirmDeleteVisible(false)}>Annuler</Button>
-            <Button onPress={() => { }}>Confirmer</Button>
+            <Button onPress={sendDeleteChallenge}>Confirmer</Button>
           </Dialog.Actions>
         </Dialog>
       </Portal>