Fix calc gapsMs->restMs

Author: Yadro

src/helpers/MapPrevCurrent.ts src/helpers/ArrayHelper.tssrc/helpers/MapPrevCurrent.ts renamed to src/helpers/ArrayHelper.ts

@@ -1,6 +1,19 @@
 type CallbackPrev<T, R> = (prev: T | undefined, cur: T, index: number) => R;
 
-export function mapPrevCurrent<T, R = any>(
+export function iterPrevCurrent<T, R = any>(
+  items: T[],
+  callback: CallbackPrev<T, R>
+) {
+  for (let i = 0; i < items.length; i++) {
+    if (i === 0) {
+      callback(undefined, items[i], i);
+    } else {
+      callback(items[i - 1], items[i], i);
+    }
+  }
+}
+
+export function arrayHelper<T, R = any>(
   items: T[],
   callback: CallbackPrev<T, R>
 ): R[] {

src/helpers/DateTime.ts

@@ -1,6 +1,6 @@
 import { ITimeRangeModel } from '../models/TaskModel';
 import { format } from 'date-fns';
-import { mapPrevCurrent } from './MapPrevCurrent';
+import { iterPrevCurrent } from './ArrayHelper';
 
 function timePad(time: number): string {
   return String(time).padStart(2, '0');
@@ -49,11 +49,17 @@ export function calcDuration(taskTime: ITimeRangeModel[]): number {
 
 export function calcDurationGaps(taskTime: ITimeRangeModel[]): number {
   let result = 0;
-  mapPrevCurrent(taskTime, (prev, cur) => {
+  iterPrevCurrent(taskTime, (prev, cur) => {
     if (prev?.end) {
       result += cur.start.getTime() - prev.end.getTime();
     }
   });
+
+  const lastTask = taskTime[taskTime.length - 1];
+  if (lastTask && lastTask.end) {
+    result += new Date().getTime() - lastTask.end.getTime();
+  }
+
   return result;
 }
 

src/hooks/TaskHooks.ts

@@ -34,7 +34,7 @@ export function useTaskDuration(model: TaskModel | undefined) {
 
 export function useTimeItemsDuration(taskTime: TaskTimeItemModel[]) {
   const [durationMs, setDurationMs] = useState<number>(0);
-  const [gapsMs, setGapsMs] = useState<number>(0);
+  const [restMs, setRestMs] = useState<number>(0);
   const intervalRef = useRef<NodeJS.Timeout>();
 
   const calcTaskDuration = useCallback(
@@ -49,18 +49,15 @@ export function useTimeItemsDuration(taskTime: TaskTimeItemModel[]) {
 
   const setTimes = useCallback(() => {
     setDurationMs(calcTaskDuration());
-    setGapsMs(calcTaskGapsDuration());
+    setRestMs(calcTaskGapsDuration());
   }, [calcTaskDuration, calcTaskGapsDuration]);
 
   useEffect(() => {
     setTimes();
 
-    const haveActiveTime = taskTime.some((t) => !t.time.end);
-    if (haveActiveTime) {
-      intervalRef.current = setInterval(() => {
-        setTimes();
-      }, 1000);
-    }
+    intervalRef.current = setInterval(() => {
+      setTimes();
+    }, 1000);
 
     return () => {
       if (intervalRef.current) {
@@ -71,7 +68,7 @@ export function useTimeItemsDuration(taskTime: TaskTimeItemModel[]) {
 
   return {
     durationMs,
-    gapsMs,
+    restMs,
   };
 }
 

src/screens/hours/HoursScreen.tsx

@@ -12,7 +12,7 @@ import TaskTimeItemModel from '../../models/TaskTimeItemModel';
 import { Undefined } from '../../types/CommonTypes';
 import TotalHours from './components/TotalHours/TotalHours';
 import { createUseStyles } from 'react-jss';
-import { mapCurrentNext } from '../../helpers/MapPrevCurrent';
+import { mapCurrentNext } from '../../helpers/ArrayHelper';
 import { ITimeRangeModel } from '../../models/TaskModel';
 import { msToTime } from '../../helpers/DateTime';
 

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

@@ -10,8 +10,6 @@ import {
   getTime,
   msToTime,
 } from '../../../../helpers/DateTime';
-import { createUseStyles } from 'react-jss';
-import clsx from 'clsx';
 import LabelWithTooltip, { ILabelWithTooltipProps } from './LabelWithTooltip';
 
 interface TotalHoursProps {
@@ -20,13 +18,12 @@ interface TotalHoursProps {
 
 const TotalHours = observer((props: TotalHoursProps) => {
   const { timeItems } = props;
-  const classes = useStyle();
 
-  const { durationMs, gapsMs } = TaskHooks.useTimeItemsDuration(timeItems);
+  const { durationMs, restMs } = TaskHooks.useTimeItemsDuration(timeItems);
   const startWorkingTime = TaskHooks.useStartWorkingTime(timeItems);
   const estimatedWorkingTimeEnd = estimateWorkingTimeEnd(
     startWorkingTime,
-    gapsMs
+    restMs
   );
   const restHoursMs = EIGHT_HOURS - durationMs;
 
@@ -46,7 +43,7 @@ const TotalHours = observer((props: TotalHoursProps) => {
     },
     {
       icon: 'mi-local-cafe',
-      label: msToTime(gapsMs, false),
+      label: msToTime(restMs, false),
       tooltip: 'Rest hours',
     },
     {
@@ -69,16 +66,4 @@ const TotalHours = observer((props: TotalHoursProps) => {
   );
 });
 
-const useStyle = createUseStyles({
-  iconAndLabel: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  icon: {
-    fontSize: 18,
-    color: '#5f6368',
-    marginRight: 4,
-  },
-});
-
 export default TotalHours;

src/screens/projects/components/HoursByTask/HoursByTask.tsx

@@ -7,7 +7,7 @@ import { observer } from 'mobx-react';
 import { createUseStyles } from 'react-jss';
 
 import TaskModel, { ITimeRangeModel } from '../../../../models/TaskModel';
-import { mapPrevCurrent } from '../../../../helpers/MapPrevCurrent';
+import { arrayHelpers } from '../../../../helpers/ArrayHelper';
 import HoursItem from './components/HoursItem';
 import IconTile from '../../../../components/IconTile/IconTile';
 import { calcDuration, msToTime } from '../../../../helpers/DateTime';
@@ -40,7 +40,7 @@ export default observer(function HoursByTask({
           <BellFilled style={{ color: 'white' }} />
         </IconTile>
         {task?.time.length === 0 && <div>No billed hours</div>}
-        {mapPrevCurrent(task?.time || [], (prev, range, index) => {
+        {arrayHelpers(task?.time || [], (prev, range, index) => {
           const hoursItem = (
             <HoursItem
               range={range}