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