[TimeRangeModal] Duration refactoring

Author: Dmitry Yadrikhinsky

src/components/TimeRangeModal/TimeRangeModal.tsx

@@ -115,7 +115,7 @@ export default observer(function TimeRangeModal({
           </Col>
           <Col span={8}>
             <Form.Item label="Duration" labelCol={{ span: 24 }}>
-              <TimeRangeDuration taskTimeItem={taskTime} />
+              <TimeRangeDuration timeRange={timeRange} />
             </Form.Item>
           </Col>
         </Row>

src/components/TimeRangeModal/components/TimeRangeDuration.tsx

@@ -1,19 +1,16 @@
 import React from 'react';
 
-import { useTimeItemsDuration } from '../../../hooks/TaskHooks';
-import TaskTimeItemModel from '../../../models/TaskTimeItemModel';
+import { useTimeRangeDuration } from '../../../hooks/TaskHooks';
+import { ITimeRangeModel } from '../../../models/TaskModel';
 
 interface TimeRangeDurationProps {
-  taskTimeItem?: TaskTimeItemModel;
+  timeRange?: ITimeRangeModel;
 }
 
 export default function TimeRangeDuration({
-  taskTimeItem,
+  timeRange,
 }: TimeRangeDurationProps) {
-  const duration = useTimeItemsDuration(
-    taskTimeItem ? [taskTimeItem] : [],
-    true
-  );
+  const duration = useTimeRangeDuration(timeRange);
 
   return <div>{duration}</div>;
 }

src/hooks/TaskHooks.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 
 import { calcDuration, msToTime } from '../helpers/DateTime';
-import TaskModel from '../models/TaskModel';
+import TaskModel, { ITimeRangeModel } from '../models/TaskModel';
 import TaskTimeItemModel from '../models/TaskTimeItemModel';
 
 export function useTaskDuration(model: TaskModel | undefined) {
@@ -61,3 +61,28 @@ export function useTimeItemsDuration(
 
   return duration;
 }
+
+export function useTimeRangeDuration(timeRange: ITimeRangeModel | undefined) {
+  const [duration, setDuration] = useState<string>('');
+  const intervalRef = useRef<NodeJS.Timeout>();
+
+  useEffect(() => {
+    if (!timeRange) {
+      return;
+    }
+    const haveActiveTime = !timeRange.end;
+    setDuration(msToTime(calcDuration([timeRange])));
+    if (haveActiveTime) {
+      intervalRef.current = setInterval(() => {
+        setDuration(msToTime(calcDuration([timeRange])));
+      }, 1000);
+    }
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [timeRange]);
+
+  return duration;
+}