From b91048597c859d19fe2cedff54c347d6c476c5af Mon Sep 17 00:00:00 2001 From: Amr Labib Date: Sat, 28 Nov 2020 19:26:43 +0200 Subject: [PATCH 1/5] support millisecond accuracy and minor enhancement --- src/useTimer.js | 19 +++++++++++++++++-- src/utils/Time.js | 5 +++-- webpack.dev.js | 3 ++- 3 files changed, 22 insertions(+), 5 deletions(-) diff --git a/src/useTimer.js b/src/useTimer.js index b62aa66..fbe0057 100644 --- a/src/useTimer.js +++ b/src/useTimer.js @@ -56,10 +56,25 @@ export default function useTimer(settings) { setExpiryTimestamp(newExpiryTimestamp); } - useEffect(() => { - if (Validate.expiryTimestamp(expiryTimestamp)) { + function handleExtraMilliSeconds(secondsValue, extraMilliSeconds) { + setSeconds(Math.floor(secondsValue) + 1); + intervalRef.current = setTimeout(() => { + intervalRef.current = undefined; setSeconds(Time.getSecondsFromExpiry(expiryTimestamp)); start(); + }, extraMilliSeconds); + } + + useEffect(() => { + if (Validate.expiryTimestamp(expiryTimestamp)) { + const secondsValue = Time.getSecondsFromExpiry(expiryTimestamp); + const extraMilliSeconds = ((secondsValue - Math.floor(secondsValue)) * 1000).toFixed(2); + if (extraMilliSeconds > 0) { + handleExtraMilliSeconds(secondsValue, extraMilliSeconds); + } else { + setSeconds(secondsValue); + start(); + } } return clearIntervalRef; }, [expiryTimestamp]); diff --git a/src/utils/Time.js b/src/utils/Time.js index 36c299c..845ee29 100644 --- a/src/utils/Time.js +++ b/src/utils/Time.js @@ -16,8 +16,9 @@ export default class Time { static getSecondsFromExpiry(expiry) { const now = new Date().getTime(); const milliSecondsDistance = expiry - now; - if (milliSecondsDistance > 0) { - return Math.floor(milliSecondsDistance / 1000); + const roundedValue = Math.ceil((milliSecondsDistance) / 100) * 100; + if (roundedValue > 0) { + return roundedValue / 1000; } return 0; } diff --git a/webpack.dev.js b/webpack.dev.js index 6826d57..4572296 100644 --- a/webpack.dev.js +++ b/webpack.dev.js @@ -33,6 +33,7 @@ module.exports = { devServer: { contentBase: path.join(__dirname, 'dev-dist'), compress: true, - port: 9000 + port: 9000, + disableHostCheck: true } } \ No newline at end of file From 97a830d59d791492686a9bc43757b13cd485247d Mon Sep 17 00:00:00 2001 From: Amr Labib Date: Mon, 30 Nov 2020 15:51:52 +0200 Subject: [PATCH 2/5] Time util calculation seconds ceil --- src/useTimer.js | 3 +-- src/utils/Time.js | 8 ++++---- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/useTimer.js b/src/useTimer.js index fbe0057..af4e6dc 100644 --- a/src/useTimer.js +++ b/src/useTimer.js @@ -57,7 +57,6 @@ export default function useTimer(settings) { } function handleExtraMilliSeconds(secondsValue, extraMilliSeconds) { - setSeconds(Math.floor(secondsValue) + 1); intervalRef.current = setTimeout(() => { intervalRef.current = undefined; setSeconds(Time.getSecondsFromExpiry(expiryTimestamp)); @@ -69,10 +68,10 @@ export default function useTimer(settings) { if (Validate.expiryTimestamp(expiryTimestamp)) { const secondsValue = Time.getSecondsFromExpiry(expiryTimestamp); const extraMilliSeconds = ((secondsValue - Math.floor(secondsValue)) * 1000).toFixed(2); + setSeconds(secondsValue); if (extraMilliSeconds > 0) { handleExtraMilliSeconds(secondsValue, extraMilliSeconds); } else { - setSeconds(secondsValue); start(); } } diff --git a/src/utils/Time.js b/src/utils/Time.js index 845ee29..b15421e 100644 --- a/src/utils/Time.js +++ b/src/utils/Time.js @@ -1,5 +1,6 @@ export default class Time { - static getTimeFromSeconds(totalSeconds) { + static getTimeFromSeconds(secs) { + const totalSeconds = Math.ceil(secs); const days = Math.floor(totalSeconds / (60 * 60 * 24)); const hours = Math.floor((totalSeconds % (60 * 60 * 24)) / (60 * 60)); const minutes = Math.floor((totalSeconds % (60 * 60)) / 60); @@ -16,9 +17,8 @@ export default class Time { static getSecondsFromExpiry(expiry) { const now = new Date().getTime(); const milliSecondsDistance = expiry - now; - const roundedValue = Math.ceil((milliSecondsDistance) / 100) * 100; - if (roundedValue > 0) { - return roundedValue / 1000; + if (milliSecondsDistance > 0) { + return milliSecondsDistance / 1000; } return 0; } From 8a36780ff82964a6a61d23421fab3483ca307944 Mon Sep 17 00:00:00 2001 From: Amr Labib Date: Mon, 30 Nov 2020 18:35:21 +0200 Subject: [PATCH 3/5] useTimer minor code enhancement --- src/useTimer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/useTimer.js b/src/useTimer.js index af4e6dc..36ceec7 100644 --- a/src/useTimer.js +++ b/src/useTimer.js @@ -67,7 +67,7 @@ export default function useTimer(settings) { useEffect(() => { if (Validate.expiryTimestamp(expiryTimestamp)) { const secondsValue = Time.getSecondsFromExpiry(expiryTimestamp); - const extraMilliSeconds = ((secondsValue - Math.floor(secondsValue)) * 1000).toFixed(2); + const extraMilliSeconds = Math.floor((secondsValue - Math.floor(secondsValue)) * 1000); setSeconds(secondsValue); if (extraMilliSeconds > 0) { handleExtraMilliSeconds(secondsValue, extraMilliSeconds); From 017a350e24f201a401157017c4a51e3dedd54fad Mon Sep 17 00:00:00 2001 From: Amr Labib Date: Mon, 30 Nov 2020 18:42:41 +0200 Subject: [PATCH 4/5] setIsRunning to true in handleExtraMilliSeconds --- src/useTimer.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/useTimer.js b/src/useTimer.js index 36ceec7..02c48da 100644 --- a/src/useTimer.js +++ b/src/useTimer.js @@ -57,6 +57,7 @@ export default function useTimer(settings) { } function handleExtraMilliSeconds(secondsValue, extraMilliSeconds) { + setIsRunning(true); intervalRef.current = setTimeout(() => { intervalRef.current = undefined; setSeconds(Time.getSecondsFromExpiry(expiryTimestamp)); From 4946e43b909bd96aed690971b2a5102403a721ea Mon Sep 17 00:00:00 2001 From: Amr Labib Date: Mon, 30 Nov 2020 19:08:53 +0200 Subject: [PATCH 5/5] commented milliseconds example in App.js --- app/App.js | 1 + 1 file changed, 1 insertion(+) diff --git a/app/App.js b/app/App.js index 2a2565b..13abab1 100644 --- a/app/App.js +++ b/app/App.js @@ -45,6 +45,7 @@ function MyTimer({ expiryTimestamp }) { export default function App() { const time = new Date(); time.setSeconds(time.getSeconds() + 600); // 10 minutes timer + // time.setMilliseconds(time.getMilliseconds() + 6500); // 6.5 seconds timer return (