57 lines
2.2 KiB
TypeScript
57 lines
2.2 KiB
TypeScript
import React, { useCallback, useState } from 'react'
|
|
import { View, ScrollView, TouchableOpacity, Text, StyleSheet } from 'react-native'
|
|
import { useFocusEffect } from '@react-navigation/native'
|
|
import { initDatabase, getAllMeasurements, getLatestMeasurement } 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 [latest, setLatest] = useState<Measurement | null>(null)
|
|
const [all, setAll] = useState<Measurement[]>([])
|
|
|
|
useFocusEffect(
|
|
useCallback(() => {
|
|
const load = async () => {
|
|
await initDatabase()
|
|
const allM = await getAllMeasurements()
|
|
setAll(allM)
|
|
const latestM = await getLatestMeasurement()
|
|
setLatest(latestM)
|
|
}
|
|
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}>
|
|
<LatestMeasurementCard measurement={latest} />
|
|
<WeightChart measurements={all} />
|
|
|
|
<TouchableOpacity style={styles.fab} onPress={() => navigation.navigate('NewMeasurement')}>
|
|
<Text style={styles.fabText}>+ Nieuwe meting</Text>
|
|
</TouchableOpacity>
|
|
</ScrollView>
|
|
</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' },
|
|
})
|