70 lines
2.5 KiB
TypeScript
70 lines
2.5 KiB
TypeScript
import React, { useCallback, useState } from 'react'
|
|
import { View, ScrollView, TouchableOpacity, Text, StyleSheet } from 'react-native'
|
|
import { useFocusEffect } from '@react-navigation/native'
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
|
import { initDatabase, getAllMeasurements } from '../database/db'
|
|
import { Measurement } from '../types'
|
|
import LatestMeasurementCard from '../components/LatestMeasurementCard'
|
|
import WeightChart from '../components/WeightChart'
|
|
|
|
type Props = { navigation: any }
|
|
|
|
export default function DashboardScreen({ navigation }: Props) {
|
|
const insets = useSafeAreaInsets()
|
|
const [all, setAll] = useState<Measurement[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useFocusEffect(
|
|
useCallback(() => {
|
|
const load = async () => {
|
|
setLoading(true)
|
|
await initDatabase()
|
|
const allM = await getAllMeasurements()
|
|
const visible = allM.filter(m => !m.deletedAt)
|
|
setAll(visible)
|
|
setLoading(false)
|
|
}
|
|
load()
|
|
}, [])
|
|
)
|
|
|
|
return (
|
|
<View style={styles.outer}>
|
|
<View style={styles.navBar}>
|
|
<TouchableOpacity onPress={() => navigation.navigate('History')}>
|
|
<Text style={styles.navLink}>Historie</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity onPress={() => navigation.navigate('Settings')}>
|
|
<Text style={styles.navLink}>Instellingen</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
<ScrollView style={styles.container}>
|
|
{loading ? (
|
|
<Text style={styles.loading}>Laden...</Text>
|
|
) : (
|
|
<>
|
|
<LatestMeasurementCard measurements={all} />
|
|
<WeightChart measurements={all} />
|
|
</>
|
|
)}
|
|
</ScrollView>
|
|
|
|
<TouchableOpacity
|
|
style={[styles.fab, { marginBottom: insets.bottom + 16 }]}
|
|
onPress={() => navigation.navigate('NewMeasurement')}
|
|
>
|
|
<Text style={styles.fabText}>+ Nieuwe meting</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
outer: { flex: 1, backgroundColor: '#f5f5f5' },
|
|
container: { flex: 1 },
|
|
navBar: { flexDirection: 'row', justifyContent: 'space-around', padding: 12, backgroundColor: '#fff', borderBottomWidth: 1, borderBottomColor: '#eee' },
|
|
navLink: { fontSize: 16, color: '#2196F3', fontWeight: '600' },
|
|
fab: { backgroundColor: '#4CAF50', padding: 16, borderRadius: 8, margin: 16, alignItems: 'center' },
|
|
fabText: { color: '#fff', fontSize: 16, fontWeight: '700' },
|
|
loading: { fontSize: 16, color: '#999', textAlign: 'center', padding: 40 },
|
|
})
|