Refactoring TaskHooks

Author: Yadro

src/components/TaskControl/TaskControl.tsx

@@ -5,14 +5,14 @@ import { PauseOutlined } from '@ant-design/icons';
 import './TaskControl.less';
 
 import rootStore from '../../modules/RootStore';
-import { useTaskDuration } from '../../hooks/TaskHooks';
+import * as TaskHooks from '../../hooks/TaskHooks';
 import CircleButton from '../CircleButton/CircleButton';
 
 const { tasksStore, projectStore } = rootStore;
 
 export default observer(function TaskControl() {
   const task = tasksStore.activeTask;
-  const duration = useTaskDuration(task);
+  const duration = TaskHooks.useTaskDuration(task);
 
   const project = useMemo(() => {
     return projectStore.get(task?.projectId || '');

src/components/TimeRangeModal/components/TimeRangeDuration.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { useTimeRangeDuration } from '../../../hooks/TaskHooks';
+import * as TaskHooks from '../../../hooks/TaskHooks';
 import { ITimeRangeModel } from '../../../models/TaskModel';
 
 interface TimeRangeDurationProps {
@@ -10,7 +10,7 @@ interface TimeRangeDurationProps {
 export default function TimeRangeDuration({
   timeRange,
 }: TimeRangeDurationProps) {
-  const duration = useTimeRangeDuration(timeRange);
+  const duration = TaskHooks.useTimeRangeDuration(timeRange);
 
   return <div>{duration}</div>;
 }

src/helpers/DateTime.ts

@@ -31,14 +31,14 @@ export function msToTime(s: number, showSeconds: boolean = true) {
   return `${timePad(hrs)}:${timePad(mins)}`;
 }
 
-export function calcDuration(taskTime: ITimeRangeModel[]) {
+export function calcDuration(taskTime: ITimeRangeModel[]): number {
   return taskTime.reduce((prev, timeRange) => {
     if (!timeRange.start) {
       return 0;
     }
-    if (timeRange.end) {
-      return prev + timeRange.end.getTime() - timeRange.start.getTime();
+    if (!timeRange.end) {
+      return prev + new Date().getTime() - timeRange.start.getTime();
     }
-    return prev + new Date().getTime() - timeRange.start.getTime();
+    return prev + timeRange.end.getTime() - timeRange.start.getTime();
   }, 0);
 }

src/hooks/TaskHooks.ts

@@ -1,12 +1,10 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { calcDuration, msToTime } from '../helpers/DateTime';
 import TaskModel, { ITimeRangeModel } from '../models/TaskModel';
 import TaskTimeItemModel from '../models/TaskTimeItemModel';
 
 export function useTaskDuration(model: TaskModel | undefined) {
-  model = model || ({} as TaskModel);
-
   const intervalRef = useRef<NodeJS.Timeout>();
   const [duration, setDuration] = useState<string>('');
 
@@ -28,7 +26,7 @@ export function useTaskDuration(model: TaskModel | undefined) {
         clearInterval(intervalRef.current);
       }
     };
-  }, [model, model.active]);
+  }, [model, model?.active]);
 
   return duration;
 }
@@ -40,24 +38,27 @@ export function useTimeItemsDuration(
   const [duration, setDuration] = useState<string>('');
   const intervalRef = useRef<NodeJS.Timeout>();
 
+  const calcTaskDuration = useCallback(
+    () => msToTime(calcDuration(taskTime.map((t) => t.time)), showSeconds),
+    [showSeconds, taskTime]
+  );
+
   useEffect(() => {
+    setDuration(calcTaskDuration());
+
     const haveActiveTime = taskTime.some((t) => !t.time.end);
-    setDuration(
-      msToTime(calcDuration(taskTime.map((t) => t.time)), showSeconds)
-    );
     if (haveActiveTime) {
       intervalRef.current = setInterval(() => {
-        setDuration(
-          msToTime(calcDuration(taskTime.map((t) => t.time)), showSeconds)
-        );
+        setDuration(calcTaskDuration());
       }, 1000);
     }
+
     return () => {
       if (intervalRef.current) {
         clearInterval(intervalRef.current);
       }
     };
-  }, [taskTime]);
+  }, [calcTaskDuration, taskTime]);
 
   return duration;
 }
@@ -66,23 +67,29 @@ export function useTimeRangeDuration(timeRange: ITimeRangeModel | undefined) {
   const [duration, setDuration] = useState<string>('');
   const intervalRef = useRef<NodeJS.Timeout>();
 
+  const calcTimeRangeDuration = useCallback(
+    () => msToTime(timeRange ? calcDuration([timeRange]) : 0),
+    [timeRange]
+  );
+
   useEffect(() => {
     if (!timeRange) {
       return;
     }
+    setDuration(calcTimeRangeDuration());
+
     const haveActiveTime = !timeRange.end;
-    setDuration(msToTime(calcDuration([timeRange])));
     if (haveActiveTime) {
       intervalRef.current = setInterval(() => {
-        setDuration(msToTime(calcDuration([timeRange])));
+        setDuration(calcTimeRangeDuration());
       }, 1000);
     }
     return () => {
       if (intervalRef.current) {
         clearInterval(intervalRef.current);
       }
     };
-  }, [timeRange]);
+  }, [calcTimeRangeDuration, timeRange]);
 
   return duration;
 }

src/screens/hours/components/TotalHours/TotalHours.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 
-import { useTimeItemsDuration } from '../../../../hooks/TaskHooks';
+import * as TaskHooks from '../../../../hooks/TaskHooks';
 import TaskTimeItemModel from '../../../../models/TaskTimeItemModel';
 
 interface TotalHoursProps {
   timeItems: TaskTimeItemModel[];
 }
 
 export default observer(function TotalHours({ timeItems }: TotalHoursProps) {
-  const duration = useTimeItemsDuration(timeItems);
+  const duration = TaskHooks.useTimeItemsDuration(timeItems);
   return <div>{duration}</div>;
 });

src/screens/projects/components/DrawerTask/components/Duration.tsx

@@ -6,15 +6,15 @@ import { createUseStyles } from 'react-jss';
 import IconTile from '../../../../../components/IconTile/IconTile';
 import PlayStopButton from '../../../../../components/PlayStopButton/PlayStopButton';
 import TaskModel from '../../../../../models/TaskModel';
-import { useTaskDuration } from '../../../../../hooks/TaskHooks';
+import * as TaskHooks from '../../../../../hooks/TaskHooks';
 
 interface DurationProps {
   task?: TaskModel;
 }
 
 export default observer(function Duration({ task }: DurationProps) {
   const classes = useStyle();
-  const duration = useTaskDuration(task);
+  const duration = TaskHooks.useTaskDuration(task);
 
   return (
     <div className={classes.root}>

src/screens/projects/components/TaskNode/TaskNode.tsx

@@ -9,7 +9,7 @@ import { createUseStyles } from 'react-jss';
 
 import TaskModel from '../../../../models/TaskModel';
 import rootStore from '../../../../modules/RootStore';
-import { useTaskDuration } from '../../../../hooks/TaskHooks';
+import * as TaskHooks from '../../../../hooks/TaskHooks';
 
 const { tasksStore } = rootStore;
 
@@ -20,7 +20,7 @@ interface TaskNodeProps {
 export default observer(function TaskNode({ task }: TaskNodeProps) {
   const classes = useStyle();
 
-  const duration = useTaskDuration(task);
+  const duration = TaskHooks.useTaskDuration(task);
 
   function preventDefault(fn: () => void) {
     return (e: SyntheticEvent) => {