Massive/TimerPage.tsx

75 lines
2.0 KiB
TypeScript

import {useFocusEffect} from '@react-navigation/native'
import React, {useCallback, useMemo, useState} from 'react'
import {Dimensions, NativeModules, View} from 'react-native'
import {Button, Text, useTheme} from 'react-native-paper'
import {ProgressCircle} from 'react-native-svg-charts'
import AppFab from './AppFab'
import {MARGIN, PADDING} from './constants'
import {settingsRepo} from './db'
import DrawerHeader from './DrawerHeader'
import Settings from './settings'
import useTimer from './use-timer'
export interface TickEvent {
minutes: string
seconds: string
}
export default function TimerPage() {
const {minutes, seconds} = useTimer()
const [settings, setSettings] = useState<Settings>()
const {colors} = useTheme()
useFocusEffect(
useCallback(() => {
settingsRepo.findOne({where: {}}).then(setSettings)
}, []),
)
const stop = () => {
NativeModules.AlarmModule.stop()
}
const add = async () => {
console.log(`${TimerPage.name}.add:`, settings)
NativeModules.AlarmModule.add()
}
const progress = useMemo(() => {
return (Number(minutes) * 60 + Number(seconds)) / 210
}, [minutes, seconds])
const left = useMemo(() => {
return Dimensions.get('screen').width * 0.5 - 60
}, [])
return (
<>
<DrawerHeader name="Timer" />
<View style={{flexGrow: 1, padding: PADDING}}>
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text style={{fontSize: 70, position: 'absolute'}}>
{minutes}:{seconds}
</Text>
<ProgressCircle
style={{height: 300, width: 300, marginBottom: MARGIN}}
progress={progress}
strokeWidth={10}
progressColor={colors.primary}
backgroundColor={colors.primary + '80'}
/>
</View>
</View>
<Button onPress={add} style={{position: 'absolute', top: '82%', left}}>
Add 1 min
</Button>
<AppFab icon="stop" onPress={stop} />
</>
)
}