Suppression de trains et défis

client/app/(tabs)/history.tsx

@@ -1,15 +1,92 @@
+import { useDeleteChallengeActionMutation } from '@/hooks/mutations/useChallengeMutation'
+import { useGameRepairMutation } from '@/hooks/mutations/useGameMutation'
+import { useDeleteTrainMutation } from '@/hooks/mutations/useTrainMutation'
+import { useAuth } from '@/hooks/useAuth'
 import { useChallengeActions } from '@/hooks/useChallengeActions'
 import { useChallenges } from '@/hooks/useChallenges'
 import { useMoneyUpdates } from '@/hooks/useMoneyUpdates'
 import { useTrain } from '@/hooks/useTrain'
 import { MoneyUpdate } from '@/utils/features/moneyUpdates/moneyUpdatesSlice'
 import { FontAwesome6 } from '@expo/vector-icons'
-import { useMemo } from 'react'
+import { useQueryClient } from '@tanstack/react-query'
+import { useMemo, useState } from 'react'
 import { FlatList } from 'react-native'
-import { Divider, FAB, List, Surface, Text } from 'react-native-paper'
+import { Button, Dialog, Divider, List, MD3Colors, Portal, Snackbar, Surface, Text } from 'react-native-paper'
 
 export default function HistoryScreen() {
+  const auth = useAuth()
+  const queryClient = useQueryClient()
   const moneyUpdates = useMoneyUpdates()
+  const [deletingMoneyUpdate, setDeletingMoneyUpdate] = useState<MoneyUpdate | null>(null)
+
+  const [successVisible, setSuccessVisible] = useState(false)
+  const [successMessage, setSuccessMessage] = useState("")
+  const [errorVisible, setErrorVisible] = useState(false)
+  const [error, setError] = useState([200, ""])
+
+  const deleteTrainMutation = useDeleteTrainMutation({
+    auth,
+    onPostSuccess: () => {
+      setDeletingMoneyUpdate(null)
+      setSuccessVisible(true)
+      setSuccessMessage("Train supprimé")
+      gameRepairMutation.mutate()
+      queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === 'get-money-updates' || query.queryKey[0] === 'get-trains' })
+    },
+    onError: ({ response, error }) => {
+      setErrorVisible(true)
+      if (response)
+        setError([response.statusCode, response.message])
+      else if (error)
+        setError([400, error.message])
+    },
+  })
+  const deleteChallengeActionMutation = useDeleteChallengeActionMutation({
+    auth,
+    onPostSuccess: () => {
+      setDeletingMoneyUpdate(null)
+      setSuccessVisible(true)
+      setSuccessMessage("Réalisation du défi supprimée")
+      gameRepairMutation.mutate()
+      queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === 'get-money-updates' || 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 gameRepairMutation = useGameRepairMutation({
+    auth,
+    onPostSuccess: () => {
+      queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === 'get-player' })
+    },
+    onError: ({ response, error }) => {
+      setErrorVisible(true)
+      if (response)
+        setError([response.statusCode, response.message])
+      else if (error)
+        setError([400, error.message])
+    },
+  })
+
+  function deleteMoneyUpdate(): void {
+    if (!deletingMoneyUpdate)
+      return
+    switch (deletingMoneyUpdate.reason) {
+      case 'BUY_TRAIN':
+        if (!deletingMoneyUpdate.tripId) return
+        deleteTrainMutation.mutate(deletingMoneyUpdate.tripId)
+        break
+      case 'CHALLENGE':
+        if (!deletingMoneyUpdate.actionId) return
+        deleteChallengeActionMutation.mutate(deletingMoneyUpdate.actionId)
+        break
+    }
+    setDeletingMoneyUpdate(null)
+  }
 
   return (
     <Surface style={{ flex :1 }}>
@@ -17,12 +94,47 @@ export default function HistoryScreen() {
         data={moneyUpdates}
         keyExtractor={(moneyUpdate) => `money-update-list-item-${moneyUpdate.id}`}
         ItemSeparatorComponent={() => <Divider />}
-        renderItem={(item) => <MoneyUpdateListItem moneyUpdate={item.item} />} />
+        renderItem={(item) => 
+          <MoneyUpdateListItem moneyUpdate={item.item}
+                               onDelete={['START', 'NEW_RUN'].includes(item.item.reason) ? undefined : () => setDeletingMoneyUpdate(item.item)} />} />
+      <Snackbar
+          key='success-snackbar'
+          visible={successVisible}
+          icon={'close'}
+          onDismiss={() => setSuccessVisible(false)}
+          onIconPress={() => setSuccessVisible(false)}>
+        <Text variant='bodyMedium' style={{ color: MD3Colors.secondary0 }}>
+          {successMessage}
+        </Text>
+      </Snackbar>
+      <Snackbar
+          key='error-snackbar'
+          visible={errorVisible}
+          icon={'close'}
+          onDismiss={() => setErrorVisible(false)}
+          onIconPress={() => setErrorVisible(false)}>
+        <Text variant='bodyMedium' style={{ color: MD3Colors.secondary0 }}>
+          Erreur {error[0]} : {error[1]}
+        </Text>
+      </Snackbar>
+      <Portal>
+        <Dialog visible={deletingMoneyUpdate !== null} onDismiss={() => setDeletingMoneyUpdate(null)}>
+          <Dialog.Title>Êtes-vous sûre ?</Dialog.Title>
+          <Dialog.Content>
+            <Text>Voulez-vous vraiment supprimer ce mouvement de fonds ?</Text>
+            {deletingMoneyUpdate && <MoneyUpdateListItem moneyUpdate={deletingMoneyUpdate} />}
+          </Dialog.Content>
+          <Dialog.Actions>
+            <Button onPress={() => setDeletingMoneyUpdate(null)}>Annuler</Button>
+            <Button onPress={() => deleteMoneyUpdate()}>Confirmer</Button>
+          </Dialog.Actions>
+        </Dialog>
+      </Portal>
     </Surface>
   )
 }
 
-function MoneyUpdateListItem({ moneyUpdate }: { moneyUpdate: MoneyUpdate }) {
+function MoneyUpdateListItem({ moneyUpdate, onDelete }: { moneyUpdate: MoneyUpdate, onDelete?: () => void }) {
   const trains = useTrain()
   const challengeActions = useChallengeActions()
   const challenges = useChallenges()
@@ -64,7 +176,7 @@ function MoneyUpdateListItem({ moneyUpdate }: { moneyUpdate: MoneyUpdate }) {
     const earnTime = new Date(moneyUpdate.timestamp).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
     const verb = moneyUpdate.amount >= 0 ? "Gagné" : "Dépensé"
     return <Text>
-      {verb} {moneyUpdate.amount} <FontAwesome6 name='coins' /> le {earnDate} à {earnTime}
+      {verb} {Math.abs(moneyUpdate.amount)} <FontAwesome6 name='coins' /> le {earnDate} à {earnTime}
     </Text>
   }, [moneyUpdate.amount])
 
@@ -73,6 +185,6 @@ function MoneyUpdateListItem({ moneyUpdate }: { moneyUpdate: MoneyUpdate }) {
         left={(props) => <List.Icon {...props} icon={icon} />}
         title={title}
         description={description}
-        right={(props) => <FAB mode='elevated' icon='delete' size='small' {...props} onPress={() => {}} />} />
+        onLongPress={onDelete} />
   )
 }

client/hooks/mutations/useChallengeMutation.ts

@@ -81,6 +81,33 @@ export const useEndChallenge = ({ auth, onPostSuccess, onError }: ChallengeActio
   })
 }
 
+export const useDeleteChallengeActionMutation = ({ auth, onPostSuccess, onError }: ChallengeActionProps) => {
+  return useMutation({
+    mutationFn: async (challengeActionId: number) => {
+      return fetch(`${process.env.EXPO_PUBLIC_TRAINTRAPE_MOI_SERVER}/challenge-actions/${challengeActionId}/`, {
+        method: "DELETE",
+        headers: {
+          "Authorization": `Bearer ${auth.token}`,
+          "Content-Type": "application/json",
+        },
+      })
+    },
+    onSuccess: async (resp) => {
+      if (resp.status >= 400) {
+        if (onError)
+          onError({ response: await resp.json() })
+        return
+      }
+      if (onPostSuccess)
+        onPostSuccess()
+    },
+    onError: async (error: Error) => {
+      if (onError)
+        onError({ error: error })
+    }
+  })
+}
+
 export const useAddChallengeMutation = ({ auth, onPostSuccess, onError }: ChallengeProps) => {
   return useMutation({
     mutationFn: async (challenge: Omit<Challenge, 'id'>) => {
@@ -154,12 +181,12 @@ export const useDeleteChallengeMutation = ({ auth, onPostSuccess, onError }: Cha
           "Authorization": `Bearer ${auth.token}`,
           "Content-Type": "application/json",
         },
-      }).then(resp => resp.json())
+      })
     },
-    onSuccess: async (data) => {
+    onSuccess: async (resp) => {
-      if (data.statusCode) {
+      if (resp.status >= 400) {
         if (onError)
-          onError({ response: data })
+          onError({ response: await resp.json() })
         return
       }
       if (onPostSuccess)

client/hooks/mutations/useGameMutation.ts

@@ -103,7 +103,7 @@ export const useGameSwitchPlayerMutation = ({ auth, updateGameState, onPostSucce
   })
 }
 
-export const useGameRepairMutation = ({ auth, onPostSuccess, onError }: GameProps) => {
+export const useGameRepairMutation = ({ auth, onPostSuccess, onError }: Omit<GameProps, 'updateGameState'>) => {
   return useMutation({
     mutationFn: async () => {
       return fetch(`${process.env.EXPO_PUBLIC_TRAINTRAPE_MOI_SERVER}/game/repair/`, {

client/hooks/mutations/useTrainMutation.ts

@@ -47,3 +47,30 @@ export const useAddTrainMutation = ({ auth, onPostSuccess, onError }: TrainProps
     }
   })
 }
+
+export const useDeleteTrainMutation = ({ auth, onPostSuccess, onError }: TrainProps) => {
+  return useMutation({
+    mutationFn: async (trainId: string) => {
+      return fetch(`${process.env.EXPO_PUBLIC_TRAINTRAPE_MOI_SERVER}/trains/${trainId}/`, {
+        method: "DELETE",
+        headers: {
+          "Authorization": `Bearer ${auth.token}`,
+          "Content-Type": "application/json",
+        },
+      })
+    },
+    onSuccess: async (resp) => {
+      if (resp.status >= 400) {
+        if (onError)
+          onError({ response: await resp.json() })
+        return
+      }
+      if (onPostSuccess)
+        onPostSuccess()
+    },
+    onError: async (error: Error) => {
+      if (onError)
+        onError({ error: error })
+    }
+  })
+}