/
TxHistoryList.tsx
88 lines (76 loc) · 2.49 KB
/
TxHistoryList.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
import {useNavigation} from '@react-navigation/native'
import _ from 'lodash'
import React from 'react'
import {useIntl} from 'react-intl'
import {Alert, SectionList, StyleSheet, View} from 'react-native'
import TxHistoryListItem from '../../legacy/components/TxHistory/TxHistoryListItem'
import {Text} from '../../legacy/components/UiKit'
import {actionMessages} from '../../legacy/i18n/global-messages'
import {formatDateRelative} from '../../legacy/utils/format'
import features from '../features'
import {TxListActionsBannerForTransactionsTab} from './TxListActionsBanner'
import {TransactionInfo} from './types'
type Props = {
transactions: Record<string, TransactionInfo>
refreshing: boolean
onRefresh: () => void
}
export const TxHistoryList = ({transactions, refreshing}: Props) => {
const strings = useStrings()
const navigation = useNavigation()
const groupedTransactions = getTransactionsByDate(transactions)
const handleExport = () => Alert.alert(strings.soon, strings.soon)
const handleSearch = () => Alert.alert(strings.soon, strings.soon)
return (
<View style={styles.listRoot}>
{(features.txHistory.export || features.txHistory.search) && (
<TxListActionsBannerForTransactionsTab onExport={handleExport} onSearch={handleSearch} />
)}
<SectionList
renderItem={({item}) => <TxHistoryListItem navigation={navigation} id={item.id} />}
renderSectionHeader={({section: {data}}) => <DayHeader ts={data[0].submittedAt} />}
refreshing={refreshing}
sections={groupedTransactions}
keyExtractor={(item) => item.id}
stickySectionHeadersEnabled={false}
nestedScrollEnabled={true}
/>
</View>
)
}
type DayHeaderProps = {
ts: unknown
}
const DayHeader = ({ts}: DayHeaderProps) => {
const intl = useIntl()
return (
<View style={styles.dayHeaderRoot}>
<Text>{formatDateRelative(ts, intl)}</Text>
</View>
)
}
const getTransactionsByDate = (transactions: Record<string, TransactionInfo>) =>
_(transactions)
.filter((t) => t.submittedAt != null)
.sortBy((t) => t.submittedAt)
.reverse()
.groupBy((t) => t.submittedAt?.substring(0, '2001-01-01'.length))
.values()
.map((data) => ({data}))
.value()
const styles = StyleSheet.create({
listRoot: {
flex: 1,
},
dayHeaderRoot: {
paddingTop: 16,
paddingBottom: 8,
paddingHorizontal: 20,
},
})
const useStrings = () => {
const intl = useIntl()
return {
soon: intl.formatMessage(actionMessages.soon),
}
}