31 lines
855 B
TypeScript
31 lines
855 B
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Duration } from 'luxon';
|
|
import { durationFormatted, 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 formattedDuration = durationFormatted(Duration.fromMillis(duration));
|
|
|
|
useEffect(() => {
|
|
if (!intervalId) {
|
|
intervalId = setInterval(() => {
|
|
setDuration(duration + 1000);
|
|
}, 1000);
|
|
}
|
|
return () => clearInterval(intervalId);
|
|
}, [duration]);
|
|
|
|
return <div className={className}>{startTime && formattedDuration}</div>;
|
|
}
|
|
|
|
export default Counter;
|