1import React, { FC, useState, useEffect } from 'react';
2import { useInterval } from 'react-use';
3import { Time, TimeProps } from './Time';
4
5const INTERVAL = 150;
6
7export interface ElapsedTimeProps extends Omit<TimeProps, 'timeInMs'> {
8  // Use this to reset the timer. Any value is allowed just need to be !== from the previous.
9  // Keep in mind things like [] !== [] or {} !== {}.
10  resetKey?: any;
11}
12
13export const ElapsedTime: FC<ElapsedTimeProps> = ({ resetKey, humanize, className }) => {
14  const [elapsed, setElapsed] = useState(0); // the current value of elapsed
15
16  // hook that will schedule a interval and then update the elapsed value on every tick.
17  useInterval(() => setElapsed(elapsed + INTERVAL), INTERVAL);
18  // this effect will only be run when resetKey changes. This will reset the elapsed to 0.
19  useEffect(() => setElapsed(0), [resetKey]);
20
21  return <Time timeInMs={elapsed} className={className} humanize={humanize} />;
22};
23