34 lines
898 B
TypeScript
34 lines
898 B
TypeScript
import React, { useState, useEffect } from 'react'
|
|
import { convertTimestampToUtcTimestamp } from 'App/date';
|
|
|
|
interface Props {
|
|
startTime: any,
|
|
className?: string
|
|
}
|
|
|
|
function Counter({ startTime, className }: Props) {
|
|
let intervalId: NodeJS.Timer;
|
|
const [duration, setDuration] = useState(convertTimestampToUtcTimestamp(new Date().getTime()) - convertTimestampToUtcTimestamp(startTime));
|
|
|
|
const secsFull = ~~(duration / 1000)
|
|
const mins = ~~(secsFull / 60)
|
|
const secs = secsFull - mins * 60
|
|
const formattedDuration = `${mins}:${secs < 10 ? 0 : ''}${secs}`
|
|
|
|
useEffect(() => {
|
|
if (!intervalId) {
|
|
intervalId = setInterval(() => {
|
|
setDuration(duration + 1000)
|
|
}, 1000)
|
|
}
|
|
return () => clearInterval(intervalId)
|
|
}, [duration])
|
|
|
|
return (
|
|
<div className={className}>
|
|
{startTime && formattedDuration}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Counter
|