[Timer] Start/stop timers

Author: Dmitry Yadrikhinsky

src/helpers/DateTime.ts

@@ -0,0 +1,14 @@
+function timePad(time: number): string {
+  return String(time).padStart(2, '0');
+}
+
+export function msToTime(s: number) {
+  const ms = s % 1000;
+  s = (s - ms) / 1000;
+  const secs = s % 60;
+  s = (s - secs) / 60;
+  const mins = s % 60;
+  const hrs = (s - mins) / 60;
+
+  return `${timePad(hrs)}:${timePad(mins)}:${timePad(secs)}`;
+}

src/models/TaskModel.ts

@@ -36,7 +36,8 @@ export default class TaskModel extends AbstractModel implements ITaskModel {
   get duration() {
     return this.time.reduce((prev: number, range: number[]) => {
       if (range.length > 0) {
-        const duration = (range[1] ? range[1] : Date.now()) - range[0];
+        const duration =
+          (range.length === 2 ? range[1] : Date.now()) - range[0];
         return prev + duration;
       }
       return 0;

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

@@ -1,18 +1,53 @@
-import React from 'react';
-import { CaretRightFilled, DeleteOutlined } from '@ant-design/icons';
-import TaskModel from '../../../../models/TaskModel';
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  CaretRightFilled,
+  DeleteOutlined,
+  PauseOutlined,
+} from '@ant-design/icons';
+
 import './TaskNode.less';
 
+import TaskModel from '../../../../models/TaskModel';
+import rootStore from '../../../../services/RootStore';
+import { msToTime } from '../../../../helpers/DateTime';
+
+const { tasksStore } = rootStore;
+
 interface TaskNodeProps {
   model: TaskModel;
 }
 
 export default function TaskNode({ model }: TaskNodeProps) {
+  const intervalRef = useRef<NodeJS.Timeout>();
+  const [duration, setDuration] = useState<string>('');
+
+  useEffect(() => {
+    const duration = model.duration;
+    if (duration !== 0) {
+      setDuration(msToTime(duration));
+    }
+    if (model.active) {
+      intervalRef.current = setInterval(() => {
+        setDuration(msToTime(model.duration));
+      }, 1000);
+    }
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [model.active]);
+
   return (
     <div className="task-node">
       <span className="task-title">{model.title}</span>
+      <span>{duration}</span>
       <span className="task-node__actions">
-        <CaretRightFilled />
+        {!model.active ? (
+          <CaretRightFilled onClick={() => tasksStore.startTimer(model)} />
+        ) : (
+          <PauseOutlined onClick={() => tasksStore.endTimer(model)} />
+        )}
         <DeleteOutlined />
       </span>
     </div>

src/services/tasks/TaskStore.ts

@@ -44,13 +44,16 @@ export default class TaskStore {
       }
     });
     task.time.push([Date.now()]);
+    task.active = true;
+    this.tasksService.save(this.tasks);
   }
 
   endTimer(task: TaskModel) {
     this.activeTask = undefined;
     task.active = false;
     const range = task.time[task.time.length - 1];
     range.push(Date.now());
+    this.tasksService.save(this.tasks);
   }
 
   restore() {
@@ -70,6 +73,7 @@ export default class TaskStore {
     if (Array.isArray(this.tasks[projectId])) {
       this.checkTasksRecursive(this.tasks[projectId], taskIds);
     }
+    this.tasksService.save(this.tasks);
   }
 
   private getCheckedKeysRecursive(tasks: TaskModel[], checkedIds: string[]) {