41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
import React, { useCallback, useState } from 'react'
|
|
import { View, FlatList, StyleSheet, Text } from 'react-native'
|
|
import { useFocusEffect } from '@react-navigation/native'
|
|
import { initDatabase, getAllMeasurements } from '../database/db'
|
|
import { Measurement } from '../types'
|
|
import MeasurementRow from '../components/MeasurementRow'
|
|
|
|
export default function HistoryScreen() {
|
|
const [measurements, setMeasurements] = useState<Measurement[]>([])
|
|
|
|
useFocusEffect(
|
|
useCallback(() => {
|
|
const load = async () => {
|
|
await initDatabase()
|
|
const all = await getAllMeasurements()
|
|
setMeasurements(all)
|
|
}
|
|
load()
|
|
}, [])
|
|
)
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Text style={styles.count}>{measurements.length} metingen</Text>
|
|
<FlatList
|
|
data={measurements}
|
|
keyExtractor={item => item.id}
|
|
renderItem={({ item }) => <MeasurementRow measurement={item} />}
|
|
contentContainerStyle={measurements.length === 0 ? styles.empty : undefined}
|
|
ListEmptyComponent={<Text style={styles.emptyText}>Nog geen metingen</Text>}
|
|
/>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: { flex: 1, backgroundColor: '#f5f5f5' },
|
|
count: { fontSize: 14, color: '#666', padding: 16, paddingBottom: 8 },
|
|
empty: { flex: 1, justifyContent: 'center', alignItems: 'center' },
|
|
emptyText: { fontSize: 16, color: '#999' },
|
|
})
|