[TotalHours] Move into component

Author: Dmitry Yadrikhinsky

src/hooks/TaskHooks.ts

@@ -1,11 +1,8 @@
 import { msToTime } from '../helpers/DateTime';
 import TaskModel from '../models/TaskModel';
 import { useEffect, useRef, useState } from 'react';
+import TaskTimeModel from '../models/TaskTimeModel';
 
-/**
- *
- * @param model
- */
 export function useTaskDuration(model: TaskModel | undefined) {
   model = model || ({} as TaskModel);
 
@@ -34,3 +31,34 @@ export function useTaskDuration(model: TaskModel | undefined) {
 
   return duration;
 }
+
+function calcDuration(taskTime: TaskTimeModel[]) {
+  return taskTime.reduce((prev, curr) => {
+    if (curr.time.end) {
+      return prev + curr.time.end.getTime() - curr.time.start.getTime();
+    }
+    return prev + new Date().getTime() - curr.time.start.getTime();
+  }, 0);
+}
+
+export function useTimeItemsDuration(taskTime: TaskTimeModel[]) {
+  const [duration, setDuration] = useState<string>('');
+  const intervalRef = useRef<NodeJS.Timeout>();
+
+  useEffect(() => {
+    const haveActiveTime = taskTime.some((t) => !t.time.end);
+    setDuration(msToTime(calcDuration(taskTime), false));
+    if (haveActiveTime) {
+      intervalRef.current = setInterval(() => {
+        setDuration(msToTime(calcDuration(taskTime), false));
+      }, 1000);
+    }
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [taskTime]);
+
+  return duration;
+}

src/screens/hours/HoursView.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Layout, Space } from 'antd';
 import { observer } from 'mobx-react';
 
@@ -11,6 +11,7 @@ import SelectDate from './components/SelectDate/SelectDate';
 import TimeRangeModal from '../../components/TimeRangeModal/TimeRangeModal';
 import TaskTimeModel from '../../models/TaskTimeModel';
 import { Undefined } from '../../types/CommonTypes';
+import TotalHours from './components/TotalHours/TotalHours';
 
 const { tasksStore } = rootStore;
 
@@ -21,13 +22,14 @@ export default observer(function HoursView() {
     Undefined<TaskTimeModel>
   >();
 
-  const tasks = tasksStore.getTasksByDate(date);
+  const tasks = useMemo(() => tasksStore.getTasksByDate(date), [date]);
   const timeItems = getTimeItems(tasks, date);
 
   return (
     <Layout className="hours">
       <Space direction="vertical">
         <SelectDate date={date} onChange={setDate} />
+        <TotalHours timeItems={timeItems} />
         {timeItems.map((taskTime, index) => (
           <HoursCard
             key={index}

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

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