Add progress bar for rest timer in StartPlan
This commit is contained in:
parent
60fe324e06
commit
dc73035607
|
@ -2,9 +2,9 @@ import {RouteProp, useRoute} from '@react-navigation/native'
|
|||
import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
|
||||
import {NativeModules, TextInput, View} from 'react-native'
|
||||
import {FlatList} from 'react-native-gesture-handler'
|
||||
import {Button} from 'react-native-paper'
|
||||
import {Button, ProgressBar} from 'react-native-paper'
|
||||
import {getBestSet} from './best.service'
|
||||
import {PADDING} from './constants'
|
||||
import {MARGIN, PADDING} from './constants'
|
||||
import CountMany from './count-many'
|
||||
import {AppDataSource} from './data-source'
|
||||
import {getNow, setRepo, settingsRepo} from './db'
|
||||
|
@ -16,6 +16,7 @@ import Settings from './settings'
|
|||
import StackHeader from './StackHeader'
|
||||
import StartPlanItem from './StartPlanItem'
|
||||
import {toast} from './toast'
|
||||
import useTimer from './use-timer'
|
||||
|
||||
export default function StartPlan() {
|
||||
const {params} = useRoute<RouteProp<PlanPageParams, 'StartPlan'>>()
|
||||
|
@ -30,13 +31,14 @@ export default function StartPlan() {
|
|||
const repsRef = useRef<TextInput>(null)
|
||||
const unitRef = useRef<TextInput>(null)
|
||||
const workouts = useMemo(() => params.plan.workouts.split(','), [params])
|
||||
const {minutes, seconds} = useTimer()
|
||||
|
||||
const [selection, setSelection] = useState({
|
||||
start: 0,
|
||||
end: 0,
|
||||
})
|
||||
|
||||
const refresh = useCallback(() => {
|
||||
const refresh = useCallback(async () => {
|
||||
const questions = workouts
|
||||
.map((workout, index) => `('${workout}',${index})`)
|
||||
.join(',')
|
||||
|
@ -52,11 +54,10 @@ export default function StartPlan() {
|
|||
LIMIT -1
|
||||
OFFSET 1
|
||||
`
|
||||
return AppDataSource.manager.query(select).then(newCounts => {
|
||||
setCounts(newCounts)
|
||||
const newCounts = await AppDataSource.manager.query(select)
|
||||
console.log(`${StartPlan.name}.focus:`, {newCounts})
|
||||
setCounts(newCounts)
|
||||
return newCounts
|
||||
})
|
||||
}, [workouts])
|
||||
|
||||
const select = useCallback(
|
||||
|
@ -100,9 +101,7 @@ export default function StartPlan() {
|
|||
(+weight > best.weight || (+reps > best.reps && +weight === best.weight))
|
||||
)
|
||||
toast("Great work King! That's a new record.")
|
||||
else if (settings.alarm) toast('Resting...')
|
||||
else toast('Added set')
|
||||
if (!settings.alarm) return
|
||||
else if (!settings.alarm) return toast('Added set')
|
||||
const milliseconds =
|
||||
Number(best.minutes) * 60 * 1000 + Number(best.seconds) * 1000
|
||||
const {vibrate, sound, noSound} = settings
|
||||
|
@ -116,6 +115,15 @@ export default function StartPlan() {
|
|||
toast('Commas and single quotes would break CSV exports')
|
||||
}, [])
|
||||
|
||||
const saveText = useMemo(() => {
|
||||
if (minutes === '00' && seconds === '00') return 'Save'
|
||||
return `Resting ${minutes}:${seconds}`
|
||||
}, [minutes, seconds])
|
||||
|
||||
const progress = useMemo(() => {
|
||||
return (Number(minutes) * 60 + Number(seconds)) / 210
|
||||
}, [minutes, seconds])
|
||||
|
||||
return (
|
||||
<>
|
||||
<StackHeader title={params.plan.days.replace(/,/g, ', ')} />
|
||||
|
@ -163,6 +171,11 @@ export default function StartPlan() {
|
|||
/>
|
||||
)}
|
||||
</View>
|
||||
<ProgressBar
|
||||
visible={minutes !== '00' || seconds !== '00'}
|
||||
style={{marginBottom: MARGIN}}
|
||||
progress={progress}
|
||||
/>
|
||||
<Button mode="contained" icon="save" onPress={handleSubmit}>
|
||||
Save
|
||||
</Button>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import React, {useEffect, useMemo, useState} from 'react'
|
||||
import {Dimensions, NativeEventEmitter, NativeModules, View} from 'react-native'
|
||||
import {Dimensions, NativeModules, View} from 'react-native'
|
||||
import {Button, Text, useTheme} from 'react-native-paper'
|
||||
import {ProgressCircle} from 'react-native-svg-charts'
|
||||
import {MARGIN, PADDING} from './constants'
|
||||
|
@ -7,27 +7,20 @@ import {settingsRepo} from './db'
|
|||
import DrawerHeader from './DrawerHeader'
|
||||
import MassiveFab from './MassiveFab'
|
||||
import Settings from './settings'
|
||||
import useTimer from './use-timer'
|
||||
|
||||
interface TickEvent {
|
||||
export interface TickEvent {
|
||||
minutes: string
|
||||
seconds: string
|
||||
}
|
||||
|
||||
export default function TimerPage() {
|
||||
const [minutes, setMinutes] = useState('00')
|
||||
const [seconds, setSeconds] = useState('00')
|
||||
const {minutes, seconds} = useTimer()
|
||||
const [settings, setSettings] = useState<Settings>()
|
||||
const {colors} = useTheme()
|
||||
|
||||
useEffect(() => {
|
||||
settingsRepo.findOne({where: {}}).then(setSettings)
|
||||
const emitter = new NativeEventEmitter()
|
||||
const listener = emitter.addListener('tick', (event: TickEvent) => {
|
||||
console.log(`${TimerPage.name}.tick:`, {event})
|
||||
setMinutes(event.minutes)
|
||||
setSeconds(event.seconds)
|
||||
})
|
||||
return listener.remove
|
||||
}, [])
|
||||
|
||||
const stop = () => {
|
||||
|
|
25
use-timer.ts
Normal file
25
use-timer.ts
Normal file
|
@ -0,0 +1,25 @@
|
|||
import {useCallback, useState} from 'react'
|
||||
import {useFocusEffect} from '@react-navigation/native'
|
||||
import {NativeEventEmitter} from 'react-native'
|
||||
import {TickEvent} from './TimerPage'
|
||||
|
||||
export default function useTimer() {
|
||||
const [minutes, setMinutes] = useState('00')
|
||||
const [seconds, setSeconds] = useState('00')
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
setMinutes('00')
|
||||
setSeconds('00')
|
||||
const emitter = new NativeEventEmitter()
|
||||
const listener = emitter.addListener('tick', (event: TickEvent) => {
|
||||
console.log(`${useTimer.name}.tick:`, {event})
|
||||
setMinutes(event.minutes)
|
||||
setSeconds(event.seconds)
|
||||
})
|
||||
return listener.remove
|
||||
}, []),
|
||||
)
|
||||
|
||||
return {minutes, seconds}
|
||||
}
|
Loading…
Reference in New Issue
Block a user