traintrape-moi/client/app/(tabs)/history.tsx

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 { FlatList } from 'react-native'
import { Divider, FAB, List, Surface, Text } from 'react-native-paper'

export default function HistoryScreen() {
  const moneyUpdates = useMoneyUpdates()

  return (
    <Surface style={{ flex :1 }}>
      <FlatList
        data={moneyUpdates}
        keyExtractor={(moneyUpdate) => `money-update-list-item-${moneyUpdate.id}`}
        ItemSeparatorComponent={() => <Divider />}
        renderItem={(item) => <MoneyUpdateListItem moneyUpdate={item.item} />} />
    </Surface>
  )
}

function MoneyUpdateListItem({ moneyUpdate }: { moneyUpdate: MoneyUpdate }) {
  const trains = useTrain()
  const challengeActions = useChallengeActions()
  const challenges = useChallenges()

  const icon = useMemo(() => {
    switch (moneyUpdate.reason) {
      case 'START': return 'star'
      case 'NEW_RUN': return 'run'
      case 'BUY_TRAIN': return 'train'
      case 'CHALLENGE': return 'cards'
    }
  }, [moneyUpdate.reason])

  const title = useMemo(() => {
    switch (moneyUpdate.reason) {
      case 'START':
        return "Début de la partie"
      case 'NEW_RUN':
        return "Nouvelle tentative"
      case 'BUY_TRAIN':
        const train = trains.find((train) => train.id === moneyUpdate.tripId)
        if (!train) return "Train"
        const depDateTime = new Date(train.departureTime)
        const depTime = depDateTime.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
        const arrDateTime = new Date(train.arrivalTime)
        const arrTime = arrDateTime.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
        return `${train.from} ${depTime} => ${train.to} ${arrTime}`
      case 'CHALLENGE':
        const challengeAction = challengeActions.find((challengeAction) => challengeAction.id === moneyUpdate.actionId)
        if (!challengeAction) return "Défi"
        const challenge = challenges.find((challenge) => challenge.id === challengeAction.challengeId)
        if (!challenge) return "Défi"
        return challenge.title
    }
  }, [moneyUpdate.reason, moneyUpdate.tripId, moneyUpdate.actionId])

  const description = useMemo(() => {
    const earnDate = new Date(moneyUpdate.timestamp).toLocaleDateString(undefined, { day: '2-digit', month: '2-digit' })
    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}
    </Text>
  }, [moneyUpdate.amount])

  return (
    <List.Item
        left={(props) => <List.Icon {...props} icon={icon} />}
        title={title}
        description={description}
        right={(props) => <FAB mode='elevated' icon='delete' size='small' {...props} onPress={() => {}} />} />
  )
}