From dc7303560717acf013169dcee4c385cd853be867 Mon Sep 17 00:00:00 2001 From: Brandon Presley Date: Thu, 10 Nov 2022 15:15:27 +1300 Subject: [PATCH] Add progress bar for rest timer in StartPlan --- StartPlan.tsx | 35 ++++++++++++++++++++++++----------- TimerPage.tsx | 15 ++++----------- use-timer.ts | 25 +++++++++++++++++++++++++ 3 files changed, 53 insertions(+), 22 deletions(-) create mode 100644 use-timer.ts diff --git a/StartPlan.tsx b/StartPlan.tsx index e98a187..72d4309 100644 --- a/StartPlan.tsx +++ b/StartPlan.tsx @@ -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>() @@ -30,13 +31,14 @@ export default function StartPlan() { const repsRef = useRef(null) const unitRef = useRef(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) - console.log(`${StartPlan.name}.focus:`, {newCounts}) - return 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 ( <> @@ -163,6 +171,11 @@ export default function StartPlan() { /> )} + diff --git a/TimerPage.tsx b/TimerPage.tsx index 4fb1ce4..466b56e 100644 --- a/TimerPage.tsx +++ b/TimerPage.tsx @@ -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() 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 = () => { diff --git a/use-timer.ts b/use-timer.ts new file mode 100644 index 0000000..d525735 --- /dev/null +++ b/use-timer.ts @@ -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} +}