fix(mobile): return elapsedTime in seconds fixes #119

vydimitrov · Apr 28, 2021 · 0a2ac54 · 0a2ac54
1 parent ec5296f
commit 0a2ac54
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 13 deletions.
diff --git a/packages/mobile/__tests__/TimeWrapper.test.js b/packages/mobile/__tests__/TimeWrapper.test.js
@@ -8,7 +8,7 @@ import { TimeWrapper } from '../src/components'
 Math.random = () => 0.124578
 
 const fixture = {
-  durationMilliseconds: 10000,
+  duration: 10,
   animatedElapsedTime: { addListener: jest.fn(), removeListener: jest.fn() },
   renderAriaTime: ({ remainingTime }) => remainingTime,
   animatedColor: {},
@@ -50,13 +50,21 @@ describe('behaviour tests', () => {
         {...fixture}
         animatedElapsedTime={animatedElapsedTime}
         renderAriaTime={undefined}
-      />
+      >
+        {({ remainingTime, elapsedTime }) => (
+          <>
+            <Text>Remaining time - {remainingTime}</Text>
+            <Text>Elapsed time - {elapsedTime}</Text>
+          </>
+        )}
+      </TimeWrapper>
     )
 
     act(() => {
       listener({ value: 4823 })
     })
 
-    expect(getByText('6')).toBeTruthy()
+    expect(getByText('Remaining time - 6')).toBeTruthy()
+    expect(getByText('Elapsed time - 4.823')).toBeTruthy()
   })
 })
diff --git a/packages/mobile/src/components/CountdownCircleTimer.jsx b/packages/mobile/src/components/CountdownCircleTimer.jsx
@@ -93,7 +93,7 @@ const CountdownCircleTimer = (props) => {
         <TimeWrapper
           animatedColor={animatedStroke}
           animatedElapsedTime={animatedElapsedTime}
-          durationMilliseconds={durationMilliseconds}
+          duration={durationMilliseconds / 1000} // durationMilliseconds is locked version of the duration
           renderAriaTime={renderAriaTime}
         >
           {children}

diff --git a/packages/mobile/src/components/TimeWrapper.jsx b/packages/mobile/src/components/TimeWrapper.jsx
@@ -15,30 +15,31 @@ const TimeWrapper = (props) => {
   const {
     children,
     animatedElapsedTime,
-    durationMilliseconds,
+    duration,
     renderAriaTime,
     animatedColor,
   } = props
 
   const [timeProps, setTimeProps] = useState({
-    animatedElapsedTime: 0,
-    remainingTime: durationMilliseconds / 1000,
+    remainingTime: duration,
+    elapsedTime: 0,
     animatedColor,
   })
 
   useEffect(() => {
     const animatedListenerId = animatedElapsedTime.addListener(({ value }) => {
+      const elapsedTime = value / 1000
       setTimeProps({
-        remainingTime: Math.ceil((durationMilliseconds - value) / 1000),
-        elapsedTime: value,
+        remainingTime: Math.ceil(duration - elapsedTime),
+        elapsedTime,
         animatedColor,
       })
     })
 
     return () => {
       animatedElapsedTime.removeListener(animatedListenerId)
     }
-  }, [animatedElapsedTime, animatedColor, durationMilliseconds])
+  }, [animatedElapsedTime, animatedColor, duration])
 
   return (
     <>
@@ -68,7 +69,7 @@ const TimeWrapper = (props) => {
 }
 
 TimeWrapper.propTypes = {
-  durationMilliseconds: PropTypes.number.isRequired,
+  duration: PropTypes.number.isRequired,
   animatedElapsedTime: PropTypes.object.isRequired,
   // when there is a single color we just past the color string
   // when there are more colors it is an interpolate object

diff --git a/packages/mobile/types/CountdownCircleTimer.d.ts b/packages/mobile/types/CountdownCircleTimer.d.ts
@@ -1,8 +1,9 @@
 import * as React from 'react'
 
 export interface TimeProps {
-  remainingTime?: number
-  elapsedTime?: number
+  remainingTime: number
+  elapsedTime: number
+  animatedColor: Animated.AnimatedInterpolation
 }
 
 type ChildAsFunc = {