import { useRef, useState, useEffect, useCallback } from 'react'
const parseMs = (milliseconds) => {
const hour = Math.floor(milliseconds / 3600000) % 24
const minute = Math.floor(milliseconds / 60000) % 60
const second = Math.floor(milliseconds / 1000) % 60
return {
days: Math.floor(milliseconds / 86400000),
hours: hour < 10 ? '0' + hour : hour,
minutes: minute < 10 ? '0' + minute : minute,
seconds: second < 10 ? '0' + second : second,
}
}
const useCountDown = (endTimeStamp) => {
const timer = useRef(null)
const [remainingTime, setRemainingTime] = useState(0)
const calcTimeDiff = useCallback(() => {
const currentTime = Date.now()
const diff = Math.max(0, (endTimeStamp || 0) - currentTime)
if (diff <= 0) {
if (timer.current) {
clearInterval(timer.current)
timer.current = null
}
}
setRemainingTime(diff)
return diff > 0
}, [endTimeStamp])
useEffect(() => {
if (timer.current) {
clearInterval(timer.current)
}
const isActive = calcTimeDiff()
if (isActive) {
timer.current = setInterval(() => {
const stillActive = calcTimeDiff()
if (!stillActive && timer.current) {
clearInterval(timer.current)
timer.current = null
}
}, 1000)
}
return () => {
if (timer.current) {
clearInterval(timer.current)
timer.current = null
}
}
}, [calcTimeDiff])
const { days, hours, minutes, seconds } = parseMs(remainingTime)
return {
days,
hours,
minutes,
seconds,
isFinished: remainingTime <= 0
}
}
export default useCountDown