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