Add progress bar for rest timer in StartPlan

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<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)
-      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 (
     <>
       <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>

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<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 = () => {

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}
+}