79 lines
3.2 KiB
TypeScript
79 lines
3.2 KiB
TypeScript
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={() => {}} />} />
|
|
)
|
|
}
|